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: メモを揉め

Package Sidebar

Install

npm i roommirror

Weekly Downloads

0

Version

0.0.9

License

MIT

Last publish

Collaborators

  • all-user