できる気がしてきた。

僕の興味のあることを共有します。

Markdown をHTMLに埋める方法

みなさん、HTML書いていますか? ぼくは恥かしながら、HTMLを書くのが苦手です。 どうにかして、HTML書かずにWebページを書くことができないか探していました。 jekyllなどを使う方法などがメジャーなようですが、正直そのためにHTMLを書き直すのは気が引けます。どうにかして、部分的な導入はできないのでしょうか? また、Pandocなどで、ローカルでHTMLに変換してアップロードする方法もあるのですが、今回はローカル環境の準備すらも不要なmarkedを導入してみようとおもいます。

marked

markedとはjavascript製のmarkdownの実装です。 ひとまず以下のコードを見てください。

<script type="text/javascript" src="lib/marked.js"></script>
...
<div id="content"></div>
<script>
  var marked=require("marked");
  document.getElementById("content").innerHTML =
    marked('# We love markdown!');
</script>

marked()に文字列を渡すことでHTMLの実行結果が戻されます。 しかし、これには問題があります。引数に文字列しか渡せないのです。

そこで不馴れなJavaScriptを用いて良い感じにしてみましょう。

<script type="text/javascript" src="lib/marked.js"></script>
...
<div id="body">
<div id="markdown">
# We love markdown!
## Do you like markdown?
</div>
<div id="content"></div>
</div>
<script>
  var marked=require("marked");
  content=document.getElementById("content");
  markdown=document.getElementById("markdown");
  content.innerHTML = marked(markdown.innerHTML);
  body.removeChild(markdown);
</script>

こうすることで、idがmarkdownのところを読み込んで、適当なHTMLを掃き出しでくれるので、これを、contentに代入すればよいということです。 これで、HTMLの苦手な僕でも簡単に記事などのお手入れが出来るようになりました。

markedはとても応用範囲が広いプログラムなので、是非活用してみてください。

chjj/marked