ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Markdownが色々な場面で使われるようになっています。ライブラリの数も多様で、それぞれ若干実装方法が異なったりするのが難点にもなっています。

Remarkableはnode製のMarkdownパーサーで、サーバ/クライアントサイドの両方で動作するのが利点のライブラリとなっています。機能も豊富なので選択肢として良さそうです。

Remarkableの使い方

基本的な使い方は次のようになります。

var Remarkable = require('remarkable');

// This values are default
var md = new Remarkable(/* "default" */, {
  html:         false,        // Enable HTML tags in source
  xhtmlOut:     false,        // Use '/' to close single tags (<br />)
  breaks:       false,        // Convert '\n' in paragraphs into <br />
  langPrefix:   'language-',  // CSS language prefix for fenced blocks
  linkify:      false,        // Autoconvert URL-like texts to links
  typographer:  false,        // Enable smartypants and other sweet transforms

  // Highlighter function. Should return escaped HTML,
  // or '' if input not changed
  highlight: function (/*str, , lang*/) { return ''; }
});

console.log(md.render('# Remarkable rulezz!'));
// => <h1>Remarkable rulezz!</h1>

nodeでサーバサイド、JavaScriptでクライアントサイドで動作します。

$ npm install remarkable --save
$ bower install remarkable --save

特徴としてあげているのは高速性と、機能拡張です。useを使ってプラグインを作れます。

var md = new Remarkable();

md.use(plugin1)
  .use(plugin2, opts)
  .use(plugin3);

また、トレードマークなど一部の記号を変換する機能があります。

var Remarkable = require('remarkable');
var md = new Remarkable({ typographer: true });

// These values are default
md.typographer.set({
  singleQuotes: '‘’', // set empty to disable
  doubleQuotes: '“”', // set '«»' for Russian, '„“' for German, empty to disable
  copyright:    true, // (c) (C) → ©
  trademark:    true, // (tm) (TM) → ™
  registered:   true, // (r) (R) → ®
  plusminus:    true, // +- → ±
  paragraph:    true, // (p) (P) -> §
  ellipsis:     true, // ... → … (also ?.... → ?.., !.... → !..)
  dupes:        true, // ???????? → ???, !!!!! → !!!, `,,` → `,`
  dashes:       true  // -- → &ndash;, --- → &mdash;
})

実際の描画例はこちら。
実際の描画例はこちら。

改行をpタグとbrで変更できます。
改行をpタグとbrで変更できます。

コードのハイライト表示にも対応。
コードのハイライト表示にも対応。

JavaScriptのMarkdownパーサーは幾つかあります。大抵はMarkdownエディタのオンラインプレビューに使われますので、より高速に描画できるものを選ぶと良いでしょう。サーバサイドと同じレンダリングエンジンが使えるのも利点です。拡張もできるのでWebサービス好みのレンダリングに変更するのも容易そうです。

Remarkableはnode/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

Remarkable demo

jonschlinkert/remarkable

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2