org_inove
このページでは， Org-Mode の HTML エクスポート時のスタイルを inove 風にするための方法について紹介しています．
目的
Org-Mode の HTML エクスポート機能は、ファイルを公開したい時には便利 なものの、デフォルトではとても貧弱なスタイルとなっています。見栄えが悪 いと、せっかく HTML 形式にして公開しても読んでもらえない可能性がありま す。
そこで、出力を inove 風のスタイルにするための設定を作成しました。こ れを使えば、少なくとも見栄えの問題でスルーされる可能性は減ることでしょ う。あとは中身を充実させるのみ！
開発環境
開発は，Emacs 23.1 ，Org-Mode 6.21b で行っています．
設定
elisp の設定
inove スタイルを適用するためには、HTML エクスポート時の文書構造を少 しいじる必要があります。そこで、org-mode の関係する関数を入れ替えます。
アーカイブに含まれている elisp/org-my-exp.el を load-path の通った場 所においた後、.emacs に下記の設定を追加します。
(require 'org) ; 「(require 'org) 」の後に次の 1 行を追加する (require 'org-my-exp)
CSS および Javascript の準備
アーカイブの theme に含まれている css フォルダおよび img フォルダ を、エクスポートされた HTML ファイルから参照出来る場所にコピーします。
org ファイルの設定
エクスポート対象の org ファイルの末尾に下記の行を追加します。 「css/inove.css」のパスについては、 css フォルダをコピーした場所に応 じて適宜書き換えてください。
#+STYLE: <link rel="stylesheet" type="text/css" href="css/inove.css" />
使い方
通常の HTML エクスポートの手順通り、 C-c C-e h とすれば、inove スタイ ルの HTML ファイルが生成されます。
jQuery との組み合わせ
さらに表示を見やすくしたい場合は、 jQuery を使うのがおすすめです。た とえば、以下のような記述を org ファイルに追加すると、NEW や UPDATE と行ったタ グが設定されているブロックを強調表示します。 実際の表示例は、 サンプル を参照してください。
#+STYLE: <link rel="stylesheet" type="text/css" href="css/inove.css" />
#+STYLE: <script type="text/javascript" src="js/jquery.js"></script>
#+STYLE: <script type="text/javascript">
#+STYLE: $(document).ready(function(){
#+STYLE: var t0, t1;
#+STYLE: t0 = $("span:contains('NEW')").filter(".tag").parent().filter("h2,h3,h4").parent();
#+STYLE: t1 = $("span:contains('NEW')").filter(".tag").parent().filter("li");
#+STYLE: t0.css("background", "#d6e8ff").css("border", "1px solid #0033cc");
#+STYLE: t1.css("background", "#d6e8ff").css("border", "1px solid #0033cc");
#+STYLE: $("span:contains('NEW')").filter(".tag").css("float", "right").css("background", "#0033cc").css("color", "white");
#+STYLE: t0 = $("span:contains('UPDATE')").filter(".tag").parent().filter("h2,h3,h4").parent();
#+STYLE: t1 = $("span:contains('UPDATE')").filter(".tag").parent().filter("li");
#+STYLE: t0.css("background", "#e2ffe1").css("border", "1px solid #009900");
#+STYLE: t1.css("background", "#e2ffe1").css("border", "1px solid #009900");
#+STYLE: $("span:contains('UPDATE')").filter(".tag").css("float", "right").css("background", "#009900").css("color", "white");
#+STYLE: $("span").filter(".tag").parent().parent().css("margin-right", "40px");
#+STYLE: });
#+STYLE: </script>
