orgファイルのHTMLエクスポート

ヘッダ

タイトル等

タイトルや著者等は以下のように記述する.

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

オプションの指定

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

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

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

スタイルファイルの指定

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

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

org.css の内容については,インクルード を参照のこと.

基本要素

文字修飾

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

記述表示
*太字*太字
/斜体/斜体
_下線_下線
=固定幅=固定幅

下付き上付き文字

下付き文字や上付き文字は,以下のように記述する (LaTeX表記も参照).

記述表示
x_ijxij
10^231023
a_{i-1}^2ai-12
_{5}C_25C2

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

特別な記号

ギリシャ文字などは \alpha などのようにして記述できる.

\forall \alpha \beta.(\alpha \in \Gamma \and \alpha \ge \beta \Rightarrow \beta \in \Gamma)

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

∀ α β.(α ∈ Γ ∧ α ≥ β ⇒ β ∈ Γ)

HTMLタグ

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

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

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

大きな文字

インライン画像

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

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

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

TODO状態遷移

水平線

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

-----

リンク

リンクは,通常のorgでの記法にしたがって記述すれば, ヘッダ屯遁のパズルとプログラミングの日記 のようになる.

コメント

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

ブロック要素

リスト

リストは,通常のorgでの記法にしたがって記述すれば良い.

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

表は,以下のように記述すれば枠線が表示される.

#+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 |
|----------+----+----+----+----+------|

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

Q1Q2Q3Q4合計
パソコン30050080
ソフト51520343
通信22228
合計3717725131
  • 枠線の細かい制御はできないようだ.
  • 数字の右揃えはうまく制御できないようだ. <td> タグにclassが指定できれば良いのだが…

センタリング

センタリングしたい部分は,以下のように記述する.

#+BEGIN_CENTER
すべてをできる限りシンプルにせよ.\\
ただしそれ以上はシンプルにするな.
#+END_CENTER

以下は,HTMLにエクスポートした結果である.

すべてをできる限りシンプルにせよ.
ただしそれ以上はシンプルにするな.

引用

引用の部分は,以下のように記述する.

#+BEGIN_QUOTE
すべてをできる限りシンプルにせよ.
ただしそれ以上はシンプルにするな. -- アインシュタイン
#+END_QUOTE

以下は,HTMLにエクスポートした結果である.

すべてをできる限りシンプルにせよ. ただしそれ以上はシンプルにするな. – アインシュタイン

例示

以下のように行を「:」から始めれば, <pre> タグとしてエクスポートされる.

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

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

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

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

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

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

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

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

1:  int main(int argc, char* argv[]) {
2:      .....
3:  }

進んだ利用

HTML要素

#+BEGIN_HTML 」,「 #+END_HTML 」でくくると, その中ではHTMLのタグを直接記述できる.

インクルード

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

#+INCLUDE: "org.css" example

以下は,上のように記述して 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;
}

マクロ

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

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

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

LaTeX表記

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

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

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

の時

数式ブロックは,そのまま記述できる.

\begin{eqnarray*}
x & = & \sqrt{\frac{a}{b}}
\end{eqnarray*}

上の例は,以下のような結果になる.


Date: 2010-03-01 10:45:45 JST