0.0.9 • Published 10 years ago

roommirror v0.0.9

Weekly downloads
3
License
MIT
Repository
github
Last release
10 years ago

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

0.0.9

10 years ago

0.0.8

10 years ago

0.0.7

10 years ago

0.0.6

10 years ago

0.0.5

10 years ago

0.0.4

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago