2012年08月16日 21:30 [Edit]

Tips - MarkdownをHTMLにembedする

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


この記事へのトラックバックURL

この記事へのトラックバック
juli【】at 2012年08月21日 11:50
http://wtech.dip.jp/juli/juli.shtml【】at 2012年08月21日 11:41
この記事へのコメント
先生!!質問があります!!!
このブログで紹介されるプログラミングに関する小技は、一体どれだけ世の中に影響を与えているんですか?w
Posted by kogaiunko at 2012年08月18日 03:55