Bye Bye Moore

PoCソルジャーな零細事業主が作業メモを残すブログ

nodeでmarkdownを使う

javascript

Wikiページでお馴染み、markdown記法。
情報音痴でも、markdownなら何とか扱えるって人は割りと多いです。
そういった方々に合わせたり、既存の資源を活かしたい場合は"marked"ライブラリ活用は一考価値ありかも。

実際のところ

導入

$ npm i -g marked

CLIツールが付いてるので、試験も兼ねて使ってみましょう。

$ printf '# hoge\n you are markdown scripts' | marked 
<h1 id="hoge">hoge</h1>
<p> you are markdown scripts</p>

nodeでレンダリングする

ライブラリ呼んで、marked関数にmarkdown記法の文字列を渡してあげるだけ。お手軽です。

var marked = require('marked');
console.log(marked('I am using __markdown__.'));

// Outputs: <p>I am using <strong>markdown</strong>.</p>

静的ファイルに仕込む

https://raw.githubusercontent.com/chjj/marked/master/lib/marked.jsから取ってきてlib以下に突っ込んだ後

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Marked in the browser</title>
  <script src="lib/marked.js"></script> 
</head>
<body>
  <div id="content"></div>
  <script>
    document.getElementById('content').innerHTML =
      marked('# Marked in browser\n\nRendered by **marked**.');
  </script> 
</body>
</html>

とかやると
f:id:shuzo_kino:20160223225930p:plain
と、ちゃんとレンダリングしてくれます。
jQueryだのVirtualDOMだのと連動すれば、リアルタイムで更新みたいなこともできるかも知れませんね。

expressに仕込む

expressのレンダリングエンジンとしても採用可能です。
もとからmarkdownの資源がある場合は、下手にコンバーター書くより転用した方が安上がりですね。
新コンテンツは非markdownにしたい場合も、Routerを使うことでレンダリングエンジンの変更はできるみたいです(検証中)
github.com

参考もと