2015年6月21日日曜日

Markdown ファイルに 166 バイト追加して自分自身で HTML プレビューができるようにする

Markdown は汎用性が高く、手軽に記述できるマークアップ言語です。しかし、実体は単なるテキスト ファイルなので、Web ブラウザで表示したときに元の内容がそのまま表示されてしまいます。

ビフォー

もちろん、Pandoc などのツールを使えば Markdown から HTML へと簡単に変換することができますが、この方法では元のファイルを変更するたびにツールを走らせる必要があります。個人的にそれは少し面倒なので、ファイル自身で HTML プレビューができるようにしてみました。(勝手に Previewable Markdown (pmd) 形式と呼ぶことにします。)

アフター

やり方

ファイルの先頭に次の (166 バイトの) コードを追加するだけです。

<script src=https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js></script><body onload="a=document.body;a.innerHTML=marked(a.firstChild.innerHTML)"><pre>

見て分かる通り、なんら難しいことはしていません。onload 時に <pre> タグの内容を HTML に変換し、その結果を body の innerHTML に代入しているだけです。変換元として body ではなく <pre> タグを使っている理由は、改行を維持したまま HTML に変換させたかったからです。また、ここでは Markdown のコンバーターに marked.js を使いましたが、Showdownmarkdown-js などの他のコンバーターを使うこともできます。

参考までに圧縮前の元のコードも載せておきます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<script>
    window.onload = function() {
        var body = document.body;
        body.innerHTML = marked(body.firstChild.innerHTML);
    }
</script>
<body>
<pre>


注意点

  • ファイルは Shift-JIS または UTF-8 (BOM なし) で保存してください。UTF-8 (BOM あり) の場合、Chrome で HTML として認識されません。
  • IE で開く場合は拡張子を .html にする必要があります。また、開いた後、自身でエンコードを指定する必要があります。
  • <pre> タグの影響により、おそらく、ツールを使った変換が正しく行われなくなります。

参考

0 件のコメント:

コメントを投稿