Setup

Setting up Mivhak.js is as simple as including a few scripts. Mivhak.js depends on jQuery and Cloud9’s Ace Editor for syntax highlighting. Mivhak.js also uses the font Roboto from Google Fonts, but you can skip it if you want to use your own font. Here is an example of a basic setup:

<!DOCTYPE html>
<html>
    <head>
        <link href="path/to/mivhak.min.css" rel="stylesheet" />
        <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    </head>
    <body>
        
        <div class="mivhak">
            <pre miv-lang="javascript">
                // JavaScript code goes here
            </pre>
        </div>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js"></script>
        <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
        <script src="path/to/mivhak.bundle.min.js"></script>
        <script>$('.mivhak').mivhak();</script>
    </body>
</html>

Markup

A simple Mivhak element consists of a wrapper element with class .mivhak, and a single <pre> child element. The wrapper element represents a Mivhak instance, and each child <pre> element represents a resource.  For example:

<!-- a Mivhak instance -->
<div class="mivhak">
    <!-- a Mivhak resource -->
    <pre></pre>
</div>

A Mivhak instance can have as many resources as one would like. If more than one resource is present, Mivhak will create tabs for each resource in the order in which they appear in the markup. You can apply options to the instance as a whole and to individual resources via miv- prepended attributes. You can see all available options here.

Embedding Code

Let’s see how we can embed a simple JavaScript code snippet. The lang resource option tells Mivhak what language syntax to use for that given resource. In order to tell Mivhak to use the JavaScript syntax highlighter, you need to add the miv-lang="javascript" attribute to that resource. For example:

<div class="mivhak">
    <pre miv-lang="javascript">
        // Some JavaScript code goes here
    </pre>
</div>

Mivhak supports any of the available Ace Editor language modes.

Inline Code

To improve performance, Mivhak.js does not highlight the syntax of inline code blocks, but instead only modifies their style. To have the code appear inlined with the text, use the <code> element with the .mivhak-inline class and the miv-theme attribute. For example:

<code class="mivhak-inline" miv-theme="light">var num = 3;</code>

 Embedding Code from a URL

Mivhak can also load code snippets from remote URLs. This can be useful in many cases, such as when you want to embed code from a repository instead of storing it locally, or when you want to preload external scripts for the live preview (more on that in the next sections).

To do that, you can use the source option, and use the URL for the value. For example:

<div class="mivhak">
    <pre miv-lang="javascript" miv-source="http://mycoolsite.com/path/to/raw.js"></pre>
</div>

This will tell Mivhak to populate the <pre> element with the content from the URL.

Embedding Multiple Code Blocks in Tabs

Tabs are automatically created when there are more than one child <pre> elements. The order of the tabs is directly related to the order of the <pre> elements in the HTML. For example, the following markup will create 3 tabs: HTML, CSS and JavaScript.

<div class="mivhak">
    <pre miv-lang="html">
        <!-- HTML code goes here -->
    </pre>
    <pre miv-lang="css">
        /* CSS code goes here */
    </pre>
    <pre miv-lang="javascript">
        // JavaScript code goes here
    </pre>
</div>

Creating a Live Preview

Mivhak.js lets you run code inside a sandbox within the browser (an iframe). Currently, the only supported languages are the web-stack languages – HTML, CSS & JavaScript. To add a live preview, set the runnable option or the miv-runnable attribute to true. This will add a “play” button to the top bar, that, once clicked, will trigger the live preview.

Additionally, you need to let Mivhak know how to treat each resource (either as a script, style or markup) by using the miv-run-as attribute.

<div class="mivhak" miv-runnable="true">
    <pre miv-lang="html" miv-run-as="markup">
        <!-- HTML code goes here -->
    </pre>
    <pre miv-lang="css" miv-run-as="style">
        /* CSS code goes here */
    </pre>
    <pre miv-lang="javascript" miv-run-as="script">
        // JavaScript code goes here
    </pre>
</div>

The live preview window will be automatically created and populated with the appropriate content. Once the user clicks on the “play” button, the code will be executed. The live preview will reset itself every time the user clicks on the “play” button.

Preloading External Scripts/Styles for the Live Preview

Sometimes you need the live preview to run code that depends on external libraries or styles. To accomplish that, you can use hidden resources. Hidden resources are child <pre> elements that have a miv-visible="false" attribute. These resources are loaded into the live preview, but are not visible to the user and do not have their own tab in the top bar. Building on the previous example, the markup will look like this:

<div class="mivhak" miv-runnable="true">
    <pre miv-visible="false" miv-run-as="script" miv-source="path/to/jquery.min.js"></pre>
    <pre miv-lang="html" miv-run-as="markup">
        <!-- HTML code goes here -->
    </pre>
    <pre miv-lang="css" miv-run-as="style">
        /* CSS code goes here */
    </pre>
    <pre miv-lang="javascript" miv-run-as="script">
        // JavaScript code goes here
    </pre>
</div>

The above example loads jQuery into the live preview. The code will be executed only after all external resources have been loaded.

Collapsing the Code Viewer

If you have large code blocks and you want to save space or have the user focus on other things besides the code, you can collapse the code viewer using the collapsed option or the miv-collapsed attribute. When set to true, the code viewer will be collapsed and a “Show Code” button will appear. Once clicked, the code viewer will expand to it’s full size. For example:

<div class="mivhak" miv-collapsed="true">
    <pre miv-lang="javascript">
        // JavaScript code goes here
    </pre>
</div>

Customizing Colors & Buttons

You can completely customize and brand the visual appearance of Mivhak. So much so, that we’ve implemented custom horizontal & vertical scrollbars instead of using the browser’s scrollbars, so that they will match the rest of the look and feel of Mivhak across all browsers. Customizing the main accent color is done by using the accentColor option or the miv-accent-color attribute, which accepts any supported CSS color formats (HEX, RGB, color names, etc.). The accent color affects the scrollbars, nav tabs and dropdown items. Usage example:

<div class="mivhak" miv-accent-color="#27ae60">
    <pre miv-lang="javascript">
        // JavaScript code goes here
    </pre>
</div>

You can also modify the settings dropdown, by removing, adding or modifying the dropdown’s items. You can use one of the built-in buttons or write your own custom buttons (see dropdown buttons for more information). Adding the dropdown buttons can only be done through jQuery. For example:

$('.mivhak').mivhak({buttons:[
    'wrap',     // A built in button
    'collapse',
    // A custom button
    {
        text: "My Custom Button",
        toggle: false,
        function(e) {
            // Do something on click. 'this' refers to the Mivhak instance
        }
    }
]});

 

Spread the word about Mivhak.js!