屯遁のパズルとプログラミングの日記

Emacs org-modeを使ってみる: (13) HTMLにエクスポート

今回は，HTMLファイルにエクスポートする方法についてまとめてみる．
なおUbuntu 8.04 LTSとEmacs22上で， org-6.34c (2010年1月10日リリース)の利用を前提にしている．

リンク

エクスポートの結果

最初に，元のorgファイルとエクスポートした結果を示す．

2010年11月28日追記
- orgファイルのHTMLエクスポートも参照

orgファイルの例

元のorgファイル htmlexport.org の内容は以下の通り．

#+TITLE: orgファイルのHTMLエクスポート
#+AUTHOR: 屯遁
#+EMAIL: 
#+LANGUAGE: ja
#+OPTIONS: toc:nil num:nil author:nil creator:nil LaTeX:t
#+STYLE: <link rel="stylesheet" type="text/css" href="org.css">
#+MACRO: em @<font size=+1 color=red>$1@</font>
* ヘッダ
** タイトル等
   タイトルや著者等は以下のように記述する．

   #+BEGIN_EXAMPLE
   #+TITLE: orgファイルのHTMLエクスポート
   #+AUTHOR: 屯遁
   #+EMAIL: 
   #+LANGUAGE: ja
   #+END_EXAMPLE

** オプションの指定
   オプションを以下のように指定する．

   #+BEGIN_EXAMPLE
   #+OPTIONS: toc:nil num:nil author:nil creator:nil LaTeX:t
   #+END_EXAMPLE

   =toc:nil= は目次なし，
   =num:nil= は章番号なし，
   =author:nil= はフッターへの著者表示なし，
   =creator:nil=  はフッターに「HTML generated by org-mode 6.34c in emacs 22」等の
   表示をしないことを表す．
   最後の =LaTeX:t= はLaTeXの式を利用することを表す．

** スタイルファイルの指定
   スタイルファイルを以下のように指定する．

   #+BEGIN_EXAMPLE
   #+STYLE: <link rel="stylesheet" type="text/css" href="org.css">
   #+END_EXAMPLE

   =org.css= の内容については，[[*インクルード][インクルード]] を参照のこと．

* 基本要素
** 文字修飾
   *太字* ， /斜体/ などの文字修飾は，以下のように記述する．
   ただし，「 =*太字*= 」等の前後には半角スペースが必要になる点に注意する．

   #+BEGIN_QUOTE
   #+ATTR_HTML: border="2" rules="all" frame="all"
   |------------+----------|
   | 記述       | 表示     |
   |------------+----------|
   | ~*太字*~   | *太字*   |
   | ~/斜体/~   | /斜体/   |
   | ~_下線_~   | _下線_   |
   | ~=固定幅=~ | ~固定幅~ |
   |------------+----------|
   #+END_QUOTE

** 下付き上付き文字
   下付き文字や上付き文字は，以下のように記述する
   ([[*LaTeX表記][LaTeX表記]]も参照)．

   #+BEGIN_QUOTE
   #+ATTR_HTML: border="2" rules="all" frame="all"
   |-------------+-----------|
   | 記述        | 表示      |
   |-------------+-----------|
   | ~x_ij~      | x_ij      |
   | ~10^23~     | 10^23     |
   | ~a_{i-1}^2~ | a_{i-1}^2 |
   | ~_{5}C_2~   | _{5}C_2   |
   |-------------+-----------|
   #+END_QUOTE

   「 =_= 」や「 =^= 」を記述したい場合は，
   「 \ 」(バックスラッシュ)を前に付ける．

** 特別な記号
   ギリシャ文字などは =\alpha= などのようにして記述できる．

   #+BEGIN_EXAMPLE
   \forall \alpha \beta.(\alpha \in \Gamma \and \alpha \ge \beta \Rightarrow \beta \in \Gamma)
   #+END_EXAMPLE
   
   以下は，上の例をエクスポートした結果である．

   #+BEGIN_QUOTE
   \forall \alpha \beta.(\alpha \in \Gamma \and \alpha \ge \beta \Rightarrow \beta \in \Gamma)
   #+END_QUOTE

** HTMLタグ
   以下のように「@」を利用すれば，HTMLタグを記述できる．

   #+BEGIN_EXAMPLE
   @<font size="+2" color="blue">大きな文字@</font>
   #+END_EXAMPLE

   以下は，上をエクスポートした結果である．

   #+BEGIN_QUOTE
   @<font size="+2" color="blue">大きな文字@</font>
   #+END_QUOTE

** インライン画像
   画像のインライン表示は以下のように記述する．
   「file: 」を忘れないように記述する．

   #+BEGIN_EXAMPLE
   #+ATTR_HTML: alt="TODO状態遷移" width="50%"
   [[file:org-2010-02-07.png]]
   #+END_EXAMPLE

   以下は，上のように記述したインライン画像の例である．

   #+ATTR_HTML: alt="TODO状態遷移" width="50%"
   [[file:org-2010-02-07.png]]

** 水平線
   =<hr>= による水平線を挿入するには，
   以下のように5文字以上の連続する「 =-= 」を記述する．

   #+BEGIN_EXAMPLE
   -----
   #+END_EXAMPLE

** リンク
   リンクは，通常のorgでの記法にしたがって記述すれば，
   [[* ヘッダ][ヘッダ]] や [[http://d.hatena.ne.jp/tamura70/][屯遁のパズルとプログラミングの日記]] のようになる．

** コメント
   「* COMMENT 見出し」のようになっている部分木は，
   コメントとなりエクスポートされない．

*** COMMENT コメントの例
   この部分はエクスポートされない
**** この部分もエクスポートされない
* ブロック要素
** リスト
   リストは，通常のorgでの記法にしたがって記述すれば良い．

   - 項目1
     - 子項目1
     - 子項目2
   - 項目2
     1. 最初
     2. 二番目

** 表
   表は，以下のように記述すれば枠線が表示される．
   #+BEGIN_EXAMPLE
   #+ATTR_HTML: id="table1" border="2" rules="all" frame="all"
   |----------+----+----+----+----+------|
   |          | Q1 | Q2 | Q3 | Q4 | 合計 |
   |----------+----+----+----+----+------|
   | パソコン | 30 |  0 | 50 |  0 |   80 |
   | ソフト   |  5 | 15 | 20 |  3 |   43 |
   | 通信     |  2 |  2 |  2 |  2 |    8 |
   |----------+----+----+----+----+------|
   | 合計     | 37 | 17 | 72 |  5 |  131 |
   |----------+----+----+----+----+------|
   #+END_EXAMPLE

   以下は，上のように記述した表の例である．

   #+ATTR_HTML: id="table1" border="2" rules="all" frame="all"
   |----------+----+----+----+----+------|
   |          | Q1 | Q2 | Q3 | Q4 | 合計 |
   |----------+----+----+----+----+------|
   | パソコン | 30 |  0 | 50 |  0 |   80 |
   | ソフト   |  5 | 15 | 20 |  3 |   43 |
   | 通信     |  2 |  2 |  2 |  2 |    8 |
   |----------+----+----+----+----+------|
   | 合計     | 37 | 17 | 72 |  5 |  131 |
   |----------+----+----+----+----+------|

   - 枠線の細かい制御はできないようだ．
   - 数字の右揃えはうまく制御できないようだ．
     =<td>= タグにclassが指定できれば良いのだが...

** センタリング
   センタリングしたい部分は，以下のように記述する．
   #+BEGIN_EXAMPLE
   #+BEGIN_CENTER
   すべてをできる限りシンプルにせよ．\\
   ただしそれ以上はシンプルにするな．
   #+END_CENTER
   #+END_EXAMPLE

   以下は，HTMLにエクスポートした結果である．
   #+BEGIN_CENTER
   すべてをできる限りシンプルにせよ．\\
   ただしそれ以上はシンプルにするな．
   #+END_CENTER

** 引用
   引用の部分は，以下のように記述する．
   #+BEGIN_EXAMPLE
   #+BEGIN_QUOTE
   すべてをできる限りシンプルにせよ．
   ただしそれ以上はシンプルにするな． -- アインシュタイン
   #+END_QUOTE
   #+END_EXAMPLE

   以下は，HTMLにエクスポートした結果である．
   #+BEGIN_QUOTE
   すべてをできる限りシンプルにせよ．
   ただしそれ以上はシンプルにするな． -- アインシュタイン
   #+END_QUOTE

** 例示
   以下のように行を「:」から始めれば，=<pre>= タグとしてエクスポートされる．
   #+BEGIN_EXAMPLE
   : 例示の行
   :   <pre> タグでエクスポートされる
   #+END_EXAMPLE

   以下は，上の例のエクスポート結果である．

   : 例示の行
   :   <pre> タグでエクスポートされる

   また，「 =#+BEGIN_EXAMPLE= 」，「 =#+END_EXAMPLE= 」でくくった場合も，
   =<pre>= タグとしてエクスポートされる．

   : #+BEGIN_EXAMPLE
   : 例示のブロックの例
   :   <pre> タグでエクスポートされる
   : #+END_EXAMPLE

   プログラムの場合は「 =#+BEGIN_SRC=  」を用い，
   後ろにはプログラミング言語名を指定する．
   また，「-n」オプションを用いると行番号も表示される．

   #+BEGIN_EXAMPLE
   #+BEGIN_SRC c -n
   int main(int argc, char* argv[]) {
       .....
   }
   #+END_SRC
   #+END_EXAMPLE

   以下は，上の例をエクスポートした結果である．

   #+BEGIN_SRC c -n
   int main(int argc, char* argv[]) {
       .....
   }
   #+END_SRC
   
* 進んだ利用
** HTML要素
   「 =#+BEGIN_HTML= 」，「 =#+END_HTML= 」でくくると，
   その中ではHTMLのタグを直接記述できる．

** インクルード
   以下のように記述すると，ファイルをインクルードできる
   (インデントせずに記述する)．

   : #+INCLUDE: "org.css" example

   以下は，上のように記述して =org.css= をインクルードした結果である．

#+INCLUDE: "org.css" example

** マクロ
   以下のように記述すると，マクロを定義できる．
   「 =em= 」がマクロ名，その後ろがマクロ本体である．
   引数は「 =$1= 」，「 =$2= 」等を用いる．

   #+BEGIN_EXAMPLE
   #+MACRO: em @<font size=+1 color=red>$1@</font>
   #+END_EXAMPLE

  ~{{{~ =em(強調部分)= ~}}}~ のように三重の波カッコでくくるとマクロが展開され，
  結果は「{{{em(強調部分)}}}」となる．

** LaTeX表記
   LaTeXの式や数式ブロックは以下のようにして記述する．

   #+BEGIN_EXAMPLE
   $\sum_{i=1}^n a_i x_i \ge b$ の時
   #+END_EXAMPLE

   上の例は，以下のような結果になる．
   LaTeXの式の部分はインライン画像となっている．

   #+BEGIN_QUOTE
   $\sum_{i=1}^n a_i x_i \ge b$ の時
   #+END_QUOTE

   数式ブロックは，そのまま記述できる．

   #+BEGIN_EXAMPLE
   \begin{eqnarray*}
   x & = & \sqrt{\frac{a}{b}}
   \end{eqnarray*}
   #+END_EXAMPLE

   上の例は，以下のような結果になる．

   #+BEGIN_QUOTE
   \begin{eqnarray*}
   x & = & \sqrt{\frac{a}{b}}
   \end{eqnarray*}
   #+END_QUOTE

-----

スタイルファイルの例

以下は，上で利用しているCSSファイルの例である． org.css として保存する．

h1, h2, h3, h4 { 
  border-style: none none none solid;
  border-color: #336699; 
  font-weight: bold;
}

h1 {
  border-style: none none none solid;
  background-color: lightblue;
  border-left-width: 20px;
  padding: 0.6ex 0.6ex 0.6ex 0.6ex;
}

h2 { 
  border-style: none none none solid;
  background-color: lightblue;
  border-left-width: 15px;
  padding: 0.4ex 0.4ex 0.4ex 0.6ex;
}

h3 { 
  border-style: none none solid solid;
  background-color: white;
  border-left-width: 10px;
  padding: 0.2ex 0.2ex 0.2ex 0.6ex;
}

a:link:hover, a:visited:hover {
  color: darkred;
  background-color: yellow;
}

body {
  background-color: white;
  color: black;
}

code, tt {
  font-family: monospace;
  font-weight: bold;
  font-style: normal;
}

pre {
  background-color: gainsboro;
  font-family: monospace;
  font-weight: bold;
  font-style: normal;
  white-space: pre;
  margin-left: 40pt;
  margin-right: 40pt;
  padding: 10pt;
}

pre.src {
  background-color: #eeeeee;
}

エクスポートの実行

「C-c C-e h」でHTMLにエクスポートできる．

追記

以下も参照．

「Emacs org-modeを使ってみる」の目次