Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

nodeでmarkdownを使う

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