org-babel: HTMLエクスポートでコードハイライト用CSSを分離する

Emacs

org-babel を使えるようにする

Changelog によれば org 6.31 から org-babel が同梱されるようになったとのことで、せっかくなので org ごと新しいものにしておく。
.emacs などで (require 'ob) などと書かなくても自動的にロードされ、org-babel の機能が使えるようになる（自分の環境ではそうでした）。

参考: Org-mode list of user-visible changes … Version 6.31 Org-babel is now part of the Org distribution

ドキュメントも org 本体に取り込まれたそうです。

HTMLエクスポートでコードハイライト用 CSS を分離

org-export-as-html などで普通に HTML にエクスポートすると、コードハイライトされるのは良いとして、スタイルが style属性で直に埋め込まれる。

<pre class="src src-emacs-lisp">
<span style="color: #4aa;">(</span>setq x 
<span style="color: #4aa;">(</span>
<span style="color: #f66;">+</span> 1 2<span style="color: #4aa;">)</span>
<span style="color: #4aa;">)</span>
</pre>

これを class にして分離するには
M-x customize-group RET org-export-htmlize RET
で org-export-htmlize-output-type を "css" にする（デフォルトは inline-css）。

または
(setq org-export-htmlize-output-type 'css)


こうなります:

<pre class="src src-emacs-lisp">
<span class="org-my-paren">(</span>setq x 
<span class="org-my-paren">(</span>
<span class="org-my-symbol">+</span> 1 2<span class="org-my-paren">)</span>
<span class="org-my-paren">)</span>
</pre>

EmacsのフェイスをCSSとして出力

各 class に割り当てるスタイルは一から自分で作ってもいいが、

M-x org-export-htmlize-generate-css

するとフェイスを元に生成してくれるので、これをいじるのが良さげ。

その他

  • font-lock-mode を有効にしておく。