Markdownの最大の特徴は、「HTMLをembedできるマークアップ言語」であること。

Daring Fireball: Markdown Syntax Documentation
For any markup that is not covered by Markdown's syntax, you simply use HTML itself. There's no need to preface it or delimit it to indicate that you're switching from Markdown to HTML; you just use the tags.

それでは逆にHTMLにMarkdownをembedできないか?

Demo

Recipe

  1. スタイルシートを用意

     <style>
 .markdown  { width:100%; height:320px; overflow:scroll; background-color:#cc88888;  }
 .showdown { background-color:#ccffcc }
 </style>

  2. <textarea class="markdown" disabled> で Markdown をくくる

     <textarea class="markdown" disabled>
 漢字、強調された_カタカナ_、もっと強調された__ひらがな__の入った[Markdown].

 [Markdown]: http://daringfireball.net/projects/markdown/

 <table border="1"><tbody>
 <tr><th>追伸</th><td>生HTMLも</td>
 </tbody></table>
 </textarea>

  3. 最後に以下のsnippetを張る

     <script src="http://blog.livedoor.jp/dankogai/js/showdown.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script>
 $(function(){
     var sd = new Showdown.converter()
     $('.markdown').replaceWith(function(){
         return $('<div/>').html(sd.makeHtml(this.value)).addClass('showdown')
     });
 });
 </script>

考察

  • <div>タグとかではなくあえて<textarea>を使っているのは、Markdownが「HTMLをembedできるマークアップ言語」だから。それゆえMarkdownの「コンテナ」としてのDOMから、ありのままのテキストをとれないと行けないのだけど、elem.innerHTMLだとバランスしない>とかが&gt;になっちゃったり、さりとてelem.textContentだとHTMLだと解釈された部分は中身のテキストしかとれない。XHTMLのCDATAとかはHTML5ではどうやら使えなさそうだし。そうなると生データをありのままにquoteする最も手軽な手段は<textarea>ということに。
  • snippetがやっているのは、その<textarea>を、その.valueから生成したHTMLで置き換えているということ。textarea.markdownなelementが、div.showdownで置き換えられる。こうしておくことで、<noscript>なブラウザでも生Markdownはどうにか見えるし、JSによって変換された部分には固有のCSSが適用できる。
  • ここでは Markdown -> HTML の変換にshowdown.jsを採用した。なぜmarkdown.jsでないかというと、markdown.jsは「HTMLをembedできるマークアップ言語」という、Markdownの最も重要な要件を満たしていなかったから。対してmarkdown.pl完全互換を標榜しているだけあって、Markdown内HTML処理もきちんとしている。

余談

ではあるが、Mac用のMarkdown editor としては、[Mou]がおすすめ。フリーウェアだけあって、Mountain Lionではデフォルトのセキュリティ設定では駄目だしを食らうが、本アプリにはそれを一時的に回避するだけの価値がある。

Mou Screenshot

Enjoy!

Dan the Markdowner