Markdown の表の罫線

Markdown のオリジナルでは表を描く機能が定義されておらず、表を描くには拡張版の Markdown を利用することになります。Markdown の拡張版はいくつかありますが、MultiMarkdown と kramdown で表を書くと、とうぜん罫線が表示されません。通常は、出力された HTML ファイルをすこし書き換えてcssファイルで設定すると思いますが、とりあえず表示したいときに面倒です。そんな時のアイデアです。

kramdown

GitHub にも採用されているkramdownはなかなか高性能で、初期設定ではHTMLのタグを書くと出力にそのまま出してくれます。これを利用して、Markdownの文頭あたりに以下の一文を入れます。

<style type="text/css">
table {
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid black;
}
</style>

たとえば、以下のようにします。

<style type="text/css">
table {
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid black;
}
</style>
| First Header | Second Header |         Third Header |  
| :----------- | :-----------: | -------------------: |  
| First row    |      Data     | Very long data entry |  
| Second row   |    **Cell**   |               *Cell* |  

MultiMarkdown

MultiMarkdownは以前にも書きましたが BBEdit の Preview 機能で拡張版の Markdown を表示する時に便利です。BBEditではPreviewで表示する時のcssファイルを指定できます。以下のような css ファイルを書いて、 DefaultCSS_ Markdown.css.css という名前で保存します。保存する場所は ~/Library/Application Support/BBEdit/ の中に Preview CSS と言う名前のディレクトリ作ります。既に Preview CSS がある場合はそのディレクトリを使ってください。

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

なお、ファイル名を DefaultCSS_ Markdown.css.css とするとPreviewの初期値として利用できます。詳しくは、BBEditのwikiを参照してください。