Code Mirror

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with over 100 language modes and various addons that implement more advanced editing functionality, a rich programming API and a CSS theming system are available for customizing CodeMirror to fit your application, and extending it with new functionality.

HTML Usage
                                                
                                                    Add CSS Style to <head> section 
                                                    <!-- Code Mirror Editor CSS -->
                                                    <link href="plugins/codemirror/css/codemirror.css" rel="stylesheet">
                                                    <!--Body Section add HTML and id to textarea or div -->
                                                    <textarea id="code1" style="overflow-x: scroll;">
                                                         // Code goes here
                                                    </textarea>
                                                
                                            
Javascript Usage
                                                
<script>
$(document).ready(function () {
    var editor_two = CodeMirror.fromTextArea(document.getElementById("code1"), {
        lineNumbers: true,
        matchBrackets: true,
        styleActiveLine: true
    });
    var editor_one = CodeMirror.fromTextArea(document.getElementById("code2"), {
        lineNumbers: true,
        matchBrackets: true,
        styleActiveLine: true,
        theme: "ambiance" // Add theme to CodeMirror ambiance
    });
    var editor_one = CodeMirror.fromTextArea(document.getElementById("code3"), {
        lineNumbers: true,
        matchBrackets: true,
        styleActiveLine: true,
        theme: "darcula" // Add theme to CodeMirror darcula
    });
    var editor_one = CodeMirror.fromTextArea(document.getElementById("code4"), {
        lineNumbers: true,
        matchBrackets: true,
        styleActiveLine: true,
        theme: "twilight" // Add theme to CodeMirror twilight
    });
});
</script>
                                                
                                            
Code Mirror Editor - Basic example

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.

Code Mirror Editor - Theme Example

A rich programming API and a CSS theming system are available for customizing CodeMirror to fit your application, and extending it with new functionality. For more info go to http://codemirror.net/

Code Mirror Editor - Darcula

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.

Code Mirror Editor - Twilight Themes

A rich programming API and a CSS theming system are available for customizing CodeMirror to fit your application, and extending it with new functionality. For more info go to http://codemirror.net/

Basic Usage

The recommended way to mark up a code block(both for semantics and for Prism) is a <pre> element with a element <code> inside, like so:

Code:

<pre><code class="language-css">
    p{
        color: #1abc9c
     }
</code>
</pre>
                            
Output:

p {
    color: #1abc9c
  }
                            
HTML Markup

Use the following code to use HTML syntax highlighter.

Usage:

<pre>
    <code class="language-markup">
        HTML CODE ... 
    </code>
</pre>
Example:

<div class="card">
    <div class="card-header">
    <h5>Hello card</h5>
        <span> lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
        <div class="card-header-right">
            <i class="icofont icofont-rounded-down"></i>
            <i class="icofont icofont-refresh"></i>
            <i class="icofont icofont-close-circled"></i>
        </div>
    </div>
    <div class="card-block">
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    </div>
</div>
 
CSS Markup

Use the following code to use HTML syntax highlighter.

Usage:

<pre>
    <code class="language-css">
        CSS CODE ... 
    </code>
</pre>
Example:

a:active{
  color:#1abc9c;
}
p{
  font-size:13px;
}
.btn-primary{
  color: #1abc9c;
  background-color: #fff;
}
.label-primary {
  background-color: #1abc9c;
}
.badge-primary {
  background-color: #1abc9c;
}
.bg-primary {
  background-color: #1abc9c !important;
  color: #fff;
}
.panel-primary {
  border-color: #1abc9c;
}
Line Number

Line number at the beginning of code lines.

Obviously, this is supposed to work only for code blocks ( <pre> <code> ) and not for inline code. Add class line-numbers to your desired <pre> and line-numbers plugin will take care.

Optional: You can specify the data-start (Number) attribute on the <pre> element. It will shift the line counter.

Usage:

<pre class="line-numbers">
    <code class="language-css">
    p {
        color: red
    }
    </code>
</pre>
 
Example:

(function() {
    if (typeof self==='undefined' || !self.Prism || !self.document) {
    return;
    }
}());
 
Line Highlight

Highlights specific lines and/or line ranges.

You specify the lines to be highlighted through the data-line attribute on the <pre> element, in the following simple format:

  1. A single number refers to the line with that number
  2. Ranges are denoted by two numbers, separated with a hyphen (-)
  3. Multiple line numbers or ranges are separated by commas.
  4. Whitespace is allowed anywhere and will be stripped off.
Usage:

<pre data-line="2, 4, 8-10">
    <code class="language-css">
    p {
    color: red
    }
    </code>
</pre>
 
Example:

pre.line-numbers {
  position: relative;
  padding-left: 3.8em;
  counter-reset: linenumber;
}
pre.line-numbers > code {
  position: relative;
}
.line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 0;
  font-size: 100%;
  left: -3.8em;
  width: 3em;
  /* works for line-numbers below 1000 lines */
  letter-spacing: -1px;
  border-right: 1px solid #999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
Auto Linker

Converts URLs and emails in code to clickable links. Parses Markdown links in comments.

URLs and emails will be linked automatically, you don’t need to do anything. To link some text inside a comment to a certain URL, you may use the Markdown syntax:

Usage:

<pre>
    <code class="language-css">
        @font-face {
        src: url(http://www.refinethemes.com/logo.otf);
        }
    </code>
</pre>
 
Example:

@font-face {
    src: url(http://www.refinethemes.com/logo.otf);
    font-family: 'LeaVerou';
}
                    
Show Invisibles

Show hidden characters such as tabs and line breaks.

Usage:
Example:
 
(function() {
    if ( typeof self !=='undefined' && !self.Prism || typeof global !=='undefined' && !global.Prism) {
    return;
    }
    Prism.hooks.add('before-highlight', function(env) {
        var tokens=env.grammar;
        tokens.tab=/\t/g;
        tokens.crlf=/\r\n/g;
        tokens.lf=/\n/g;
        tokens.cr=/\r/g;
        tokens.space=/ /g;
    });
})();
 
File Highlight

Fetch external files and highlight them with Prism. Used on the Prism website itself.

Use the data-src attribute on empty <pre> elements, like so:

Usage:
  <pre data-src="bootstrap.min.js">
</pre>
 

You don’t need to specify the language, it’s automatically determined by the file extension. If, however, the language cannot be determined from the file extension or the file extension is incorrect, you may specify a language as well (with the usual class name way).

Please note that the files are fetched with XMLHttpRequest. This means that if the file is on a different origin, fetching it will fail, unless CORS is enabled on that website.

Example: