Pandoc で Blogger の記事を書く

Pandoc で 様々なフォーマットの文書を作成する

tanakhさんの記事で、Pandoc という Haskell 製の文書フォーマット変換ツールがあることを知りました。私は、Emacs + SKK で文書を書くのが最もストレスが低いので、Emacsで文書を書いて、他のフォーマットに変換できると非常に幸せです。とりあえず、Blogger の Blog 記事を書くときの Pandoc の活用方法についてメモしておきます。

インストール

> cabal install pandoc -fhighlighting

-fhighlighting でシンタックスハイライト機能を有効にしておきます。

使いかた

Pandoc のページ を見ると、Markdown, reStructuredText 等の様々なフォーマットから HTML, PDF, ... 等の多様なフォーマットに変換できることが書いてあります。
とりあえず、"Markdown 形式で文書を書いて、HTMLに変換し、Blogger の記事にする" という目的で使います。
この記事も勿論, Markdown で書いています。

変換のしかた

> pandoc markdown_file.txt -o output.html

で Markdown -> HTML に変換できます。

Markdown の文法

ココ(DALING FIREBALL)や, ココ(Wikipedia) が参考になるでしょう。

Haskell のソースを Syntax Highlighting する

Haskell のソースを Syntax Hilighting する方法を書きます。(そもそもコレをメモしたかったので、この記事を書きました)
通常、Markdown で program source を書くには、先頭に4文字以上の空白を入れてインデントすればいいみたいですが、これでは Syntax Highlight してくれないようです。また、私は空白でインデントする書き方が好きではありません。
ココに情報がありますが、ソースコード等を書くには

~~~~~~
source code here
~~~~~~

のように、tilde 6 個以上で囲んで、その間に書けばいいみたいです。
Haskell のコードを Syntax Highlight するには、

~~~~~~{.haskell}
hoge::[Char]->Int
hoge (x:xs) = undefined
~~~~~~

のように、上の行を ~~~~~~{.haskell} にすればいいみたいです。 行番号を入れるには、

1 2 3 4

~~~~~~{.haskell .numberLines} hoge::[Char]->Int hoge (x:xs) = undefined ~~~~~~

のように、上の行を ~~~~~~{.haskell .numberLines} にすればいいみたいです。
これを html に変換して Blogger の記事に貼ればよいのですが、色の部分は css で実現されているため、css を変更しないと色が付きません。
Blogger のテンプレートの カスタム css の部分に、以下の css を追加します。 (pandoc -s file.txt -o html で出力した HTML の
の部分から抽出したものです)

table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode, table.sourceCode pre 
   { margin: 0; padding: 0; border: 0; vertical-align: baseline; border: none; }
td.lineNumbers { border-right: 1px solid #AAAAAA; text-align: right; color: #AAAAAA; padding-right: 5px; padding-left: 5px; }
td.sourceCode { padding-left: 5px; }
code.sourceCode span.kw { color: #007020; font-weight: bold; } 
code.sourceCode span.dt { color: #902000; }
code.sourceCode span.dv { color: #40a070; }
code.sourceCode span.bn { color: #40a070; }
code.sourceCode span.fl { color: #40a070; }
code.sourceCode span.ch { color: #4070a0; }
code.sourceCode span.st { color: #4070a0; }
code.sourceCode span.co { color: #60a0b0; font-style: italic; }
code.sourceCode span.ot { color: #007020; }
code.sourceCode span.al { color: red; font-weight: bold; }
code.sourceCode span.fu { color: #06287e; }
code.sourceCode span.re { }
code.sourceCode span.er { color: red; font-weight: bold; }

これで、上記の Markdown を変換した HTML を記事に貼れば、シンタックスハイライトされます。