National Poetry Month

    roommirror

    0.0.9 • Public • Published

    RoomMirror

    Syntax highlight code blocks generated from Markdown with CodeMirror.

    doc in japanese

    RoomMirror Doc: 日本語ドキュメント

    install

    npm install roommirror

    usage

    common settings

    path to codemirror is "roommirror_root/node_modules/codemirror"

    <link rel="stylesheet" href="codemirror/lib/codemirror.css">

    and theme files...

    <link rel="stylesheet" href="codemirror/theme/base16-dark.css">
    <link rel="stylesheet" href="codemirror/theme/solarized.css">
    <link rel="stylesheet" href="codemirror/theme/monokai.css">

    in browser

    <script src="browser/roommirror.js"></script>

    or exclude CodeMirror...

    <script src="path/to/codemirror.js"></script>
    <script src="browser/rm_without_cm.js"></script>

    and mode files...

    <script src="codemirror/mode/htmlmixed/htmlmixed.js"></script>
    <script src="codemirror/mode/javascript/javascript.js"></script>
    <script src="codemirror/mode/css/css.js"></script>

    in browserify

    var RoomMirror = require('roommirror');
     
    // and mode files...
    require('codemirror/mode/htmlmixed/htmlmixed.js');
    require('codemirror/mode/javascript/javascript.js');
    require('codemirror/mode/css/css.js');

    RoomMirror(qs) -> [CodeMirror]

    • parameter
      qs: css selector of elements you want syntax highlighting.
    • return
      [CodeMirror]: array of codemirror instances that highlighted code blocks.

    RoomMirror.byAnnotation(qs) -> [CodeMirror]

    • parameter
      qs: css selector of previous elements you want syntax highlighting.
    <p class="rm-a" data-eval="{ mode: 'javascript' }"></p>
    <div>var test = 'test';</div>
    • return
      [CodeMirror]: array of codemirror instances that highlighted code blocks.

    example for markdown

    in markdown...

    <p class="rm-a" data-eval="{ mode: 'javascript', lineNumbers: true }"></p>
     
        var test = 'test';
        var add = function(a, b) {
          return a + b;
        };
     
        [0, 1, 2, 3, 4].reduce(add, 0); // 10
     

    generate to html...

    <p class="rm-a" data-eval="{ mode: 'javascript', lineNumbers: true }"></p>
    <pre><code>var test = 'test';
    var add = function(a, b) {
      return a + b;
    };
     
    [0, 1, 2, 3, 4].reduce(add, 0); // 10</code></pre>

    syntax highlighting

    var roommirrors = RoomMirror.byAnnotation('.rm-a');

    demo

    in myblog: メモを揉め

    Install

    npm i roommirror

    DownloadsWeekly Downloads

    1

    Version

    0.0.9

    License

    MIT

    Last publish

    Collaborators

    • all-user