Options

There are two types of options: instance options and resource options. Instance options are applied to the entire Mivhak element, while resource options are applied to the individual child <pre> elements.

Instance Options

Instance options are options that can be applied to a Mivhak element. There are two ways to apply instance options: via the element’s attributes (prepended by miv-), or by passing an object to the jQuery call. If an option is set using both methods, the attributes will take precedence over the jQuery call. For example, to apply the option lineNumbers via the element’s attributes, use the following code:

<div class="mivhak" miv-line-numbers="true">
    <pre>...</pre>
</div>
$('.mivhak').mivhak();

Or, to apply the option lineNumbers via jQuery, use the following code:

$('.mivhak').mivhak({
    lineNumbers: true
});

Available Options

runnable (Boolean)

Whether to add a live preview (and a “play” button) to run the code.
Default value:  false

editable (Boolean)

Whether to allow the user to edit the code. If runnable is set to true, the live preview will be updated when the code changes.
Default value:  false

lineNumbers (Boolean)

Whether to show line numbers on the left.
Default value:  false

accentColor (String)

One of the supported CSS color formats (HEX, RGB, etc…) to be used as the code viewer’s accent color. The color will be applied to scrollbars, tab navigation and dropdown items.
Default value:  false

collapsed (Boolean)

Whether to collapse the code viewer initially.
Default value:  false

caption (String)

Text/HTML string to be displayed at the bottom of the code viewer.
Default value:  false

theme (String)

The code viewer’s theme. Accepted values are: 'dark', 'light'
Default value:  'light'

height (String|Number)

The code viewer’s height. Accepted values are either a number (for custom height in pixels) or one of the following string values:
'auto' – The height will be automatically calculated to match the content height. If there are multiple resources (tabs), the height will be calculated by the content of the first resource.
'min' – The height will be calculated to match the resource with the least  content.
'max' – The height will be calculated to match the resource with the most  content.
'average' – The height will be calculated as the average heights of all resources (tabs).
Default value:  'average'

padding (Number)

The surrounding padding between the code and the wrapper.
Default value:  15

topbar (Boolean)

Whether to show/hide the top bar.
Default value:  true

buttons (Array)

An array of strings/objects for the settings dropdown menu. Use a string to refer to one of the built-in buttons, or an object to create a custom button. See Dropdown Buttons for more information.
Default value:  ['wrap','copy','collapse','about']

Resource Options

Resource options are options that can be applied to a Mivhak resource (any child <pre> element). These options can only be applied via the <pre> element attributes.

lang (String)

The resource language (one of the supported Ace Editor language modes)
Default value:  null

runAs (Boolean|String)

How the resource should be treated in the preview window. Accepted values are 'script' 'style' 'markup' or false. This option is only applicable if the runnable instance option is set to true.
Default value:  false

source (Boolean|String)

A URL to an external source. The content of the resource will be populated with the content from the remote URL.
Default value:  false

visible (Boolean)

Whether to show this resource as a tab. Useful if you want to include external libraries for the live preview and don’t need to see their contents.
Default value:  true

mark (Boolean|String)

Mark/highlight a range of lines given as a string in the format ‘1, 3-4’.
Default value:  false

startLine (Number)

Set the initial line number (1 based). This option is only applicable if the lineNumbers instance option is set to true.
Default value:  1

Methods

toggleLineWrap
Toggle line wrap on/off for the currently active tab. Initially set to on (true) by default.
Parameters: none.
Example: $('.mivhak').mivhak('toggleLineWrap');

copyCode
Copy the code in the currently active tab to clipboard (works in all browsers apart from Safari, where it selects the code and prompts the user to press command+c).
Parameters: none.
Example: $('.mivhak').mivhak('copyCode');

collapse
Collapse the code viewer and show a “Show Code” button.
Parameters: none.
Example: $('.mivhak').mivhak('collapse');

expand
Expand the code viewer if it’s collapsed.
Parameters: none.
Example: $('.mivhak').mivhak('expand');

showTab
Show/activate a tab by the given index (zero based).
Parameters: index (Number).
Example: $('.mivhak').mivhak('showTab',0);

setHeight
Set the height of the code viewer. One of (auto|min|max|average) or a custom number.
Parameters: height (Number|String).
Example: $('.mivhak').mivhak('setHeight',150);

setAccentColor
Set the code viewer’s accent color. Applied to nav-tabs text, nav-tabs underline, scrollbars and dropdown menu items text.
Parameters: color (String).
Example: $('.mivhak').mivhak('setAccentColor','#ff0000');

Dropdown Buttons

The settings dropdown can be modified via the buttons instance option to include built-in and custom buttons.

Built-In Buttons

'wrap' – The wrap button features a toggle button and is used to toggle line wrap on/off for the currently active tab.
'copy' – The copy button copies the code in the currently active tab to clipboard (except for Safari, where it selects the code and prompts the user to press command+c).
'collapse' – The collapse button toggles the entire code viewer into and out of its collapsed state.
'about' – The about button shows the user information about Mivhak.

Custom buttons

Passing an object instead of a string to the buttons instance option will create a custom button. There are 3 properties that a custom button object can have:

text (String) – The text to be displayed as the button’s label.
toggle (Boolean) – Whether or not to show a toggle on the right.
click (Function) – A function to be called when the button is clicked. The this keyword will refer to the current Mivhak instance. The event object will be passed as a parameter.

Example Code:

{
    text: 'Button Label', 
    toggle: true, 
    click: function(e) {
        console.log(this);
}

 

Spread the word about Mivhak.js!