Org-mode HTML export 覚書

ページデザイン

科学系の記事を書くときの Read the Docs風のデザインは https://github.com/fniessen/org-html-themes を利用して書いている。

また http://d.hatena.ne.jp/tamura70/20100216/org で公開されている、 org.css に MathJax3 の設定を追加してを利用している。

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;
}

mjx-container {
    display: inline-grid;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    padding:0.25em
}

MathJax3対応 (org-mode version 9.5)

Mathjax3はfontやlinebreaks対応がまだなので完全にMathjax2互換があるわけではない。以下をinit.elに加えればよい。

(defvar org-html-mathjax3-template)
(setq org-html-mathjax3-template "<script>
MathJax = {
  chtml: {
    scale: %SCALE,
    displayAlign: '%ALIGN',
    displayIndent: '%INDENT'
  },
  options: {
    settings: {
        scale: %SCALE
    },
  },
  tex: {
    packages: {'[-]': ['autoload', 'require']},
    tags: '%AUTONUMBER',
    tagSide: '%TAGSIDE',
    tagIndent: '%TAGINDENT',
    useLabelIds: true,
    ams: {
      multlineWidth: '%MULTLINEWIDTH'
    }
  },
  svg: {
    fontCache: 'global'
  }
};
</script>
<script type=\"text/javascript\" id=\"MathJax-script\" async
  src=\"%PATH\">
</script>")

(setq org-html-mathjax2-template org-html-mathjax-template)
(setq org-html-mathjax-template org-html-mathjax3-template)

(setq org-html-mathjax-options
      '((path "https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js")
        (scale "100")
        (align "center")
        (font "TeX")
        (linebreaks "false")
        (autonumber "ams")
        (indent "0em")
        (multlinewidth "85%")
        (tagindent ".8em")
        (tagside "right")))

ファイルごとのoptionの設定は #+HTML_MATHJAX: align:"center" tagside: right autonumber: ams などとすることができる。

ちなみに ver9.5ではもともとの rg-html-mathjax-template 中身は以下。

"<script type=\"text/x-mathjax-config\">
    MathJax.Hub.Config({
        displayAlign: \"%ALIGN\",
        displayIndent: \"%INDENT\",

        \"HTML-CSS\": { scale: %SCALE,
                        linebreaks: { automatic: \"%LINEBREAKS\" },
                        webFont: \"%FONT\"
                       },
        SVG: {scale: %SCALE,
              linebreaks: { automatic: \"%LINEBREAKS\" },
              font: \"%FONT\"},
        NativeMML: {scale: %SCALE},
        TeX: { equationNumbers: {autoNumber: \"%AUTONUMBER\"},
               MultLineWidth: \"%MULTLINEWIDTH\",
               TagSide: \"%TAGSIDE\",
               TagIndent: \"%TAGINDENT\"
             }
});
</script>
<script src=\"%PATH\"></script>"

MathJaxのマクロ

https://whyitsso.net/others/mathjax.html

表記例

エスケープ

org-modeで文字をエスケープする方法

HTML直書き

@@記法

@@HTMLタグ @@ インラインに挿入できる。 Aiueo Test kakikukeko

HTMLブロック

#+BEGIN_EXPORT html #+END_EXPORT

Test

kakikukeko

List

1
- 2
  - 3
    - 4 [0/0]
      - [X] check1
      - [ ] check2
      - [ ] check3

文字修飾

Under Line
太字
~~打ち消し~~
斜体
インライン
等幅

数式

とくに設定しなくても Mathjax が勝手に適応されるっぽい。

inline 表示

 か~$$~ でOK 改行はオプションをオフにしておけば $\overline{A + B} = \overline{A} \bullet \overline{B}$ のように反映されるなくなる。単語区切り文字扱い。上付き下付きは e^iθ, E_XF のように数式環境外でも使える。もちろん数式環境でもOKで $e^{i\theta}, E_{XF}$ のようになる。

Display style

LaTeXのequationやalignなどは一通り使える。

改行は

\begin{align} V = \frac{d}{dt} \int_{\mathbf{x}\in C} \mathbf{B}(t,\mathbf{x})\cdot d\mathbf{S}(\mathbf{x})\\ \end{align}

のように反映される。

文中に日本語も

\begin{align} \mathrm{起電力} &= \frac{d}{dt} \int_{\mathbf{x}\in C} \mathrm{磁場}(t,\mathbf{x})\cdot d\mathbf{S}(\mathbf{x})\\ &= \color{red}磁束の時間微分\color{black} \end{align}

のように大丈夫。

\textcolor を使うにはExtensionの読み込みが必要っぽい。 https://orgmode.org/manual/Math-formatting-in-HTML-export.html

org-exportはまだmathjax2.7なので3系列に移行したらうまく行く。

\begin{aligned} \textcolor{red}{abcde}=\textcolor{#0ff}{fgh} \end{aligned} \begin{align} \cancel{xyz} \end{align}

数式が横に長くなるときののoverflowは

mjx-container {
    display: inline-grid;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    padding:0.25em
}

や

.MathJax {
    min-width: 0;
    padding:0.25em;
    overflow-x: auto;
    overflow-y: hidden;
}

と設定しておけばちゃんとできると期待されるが、今の所うまくスクロールできない。数式番号があるときにだめになる。 tagをleftにしてもrightにしてももだめ。 divやspanをつかうwork aroundしか今のところなさそう。

こんな感じになる。 equation + align

\begin{equation} \begin{aligned} \mathbb{P}\left[X_{n+1}=i_{n+1} | B\right]=& \mathbb{P}\left[X_{n+1}=i_{n+1} | B \cap A_{1}\right] \mathbb{P}\left[A_{1} | B\right] \\ &+\mathbb{P}\left[X_{n+1}=i_{n+1} | B \cap A_{2}\right] \mathbb{P}\left[A_{2} | B\right] \\=& \mathbb{P}\left[X_{n+1}=i_{n+1} | B \cap\left\{X_{n}=i_{n}\right\}\right] \mathbb{P}\left[X_{n}=i_{n} | B\right] \\ &+\mathbb{P}\left[X_{n+1}=i_{n+1} | B \cap\left\{X_{n}=-i_{n}\right\}\right] \mathbb{P}\left[X_{n}=-i_{n} | B\right] a + a + a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a + a + a + a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a +a + a + b \end{aligned} \end{equation}

.scroll{
    overflow-x: auto;
    overflow-y: hidden;
}

として、数式環境を以下で囲んでいる。

@@html:<div class = scroll>@@
@@html:</div>@@

表

氏名	数学	英語	国語	合計
野比	1	20	50	71
出来杉	80	80	80	240

グルーピング (うまくいっていない？)

Name	Hair	Height	Weight	English	Result
Emi	brown	average	heavy	yes	foreign student
Mario	brown	short	average	no	Japanese
Jun	black	tall	average	no	Japanese
Lisa	brown	tall	average	yes	foreign student
Jo	red	average	light	yes	foreign student
Mie	black	short	light	yes	Japanese
Ran	black	average	light	yes	Japanese
Mai	brown	tall	heavy	no	Japanese

https://asobitai.hatenablog.com/entry/2016/07/24/095710

引用

いわゆる verbatim 表示。
**強調** などのマークアップが無視される。
改行は無視されない。

QUOTEブロック

鳴かぬなら殺してしまえホトトギス – 織田信長

EXAMPLEブロック

例の例の例。**お元気**ですか。

ATT_HTMLでいろいろ体裁を変えられる。 https://orgmode.org/manual/Text-areas-in-HTML-export.html

Hello world

コード

色を付けるのは htmlize.el (要install)

(defun xor (a b)
     "Exclusive or."
     (if a (not b) b))

{
	"url" : "クロールした URL",
	"host" : "クロールした URL に含まれていたホスト名",
	"title" : "タイトル",
	"content":	"本文",
	"content_length" : "クロールしたドキュメントサイズ",
	"last_modified" : "クロールしたドキュメントの最終更新日時",
	"mimetype" : "ドキュメントの MIME タイプ"
}

よく使っている設定例

#+TITLE: title
#+AUTHOR: ril
#+LANGUAGE: ja
#+OPTIONS: toc:t num:nil author:t creator:nil timestanp:t tex:t \n:nil
#+HTML_MATHJAX: align:"center" tagside: right autonumber: none
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="https://fniessen.github.io/org-html-themes/src/readtheorg_theme/css/htmlize.css"/>
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="https://fniessen.github.io/org-html-themes/src/readtheorg_theme/css/readtheorg.css"/>
#+HTML_HEAD: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
#+HTML_HEAD: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="https://fniessen.github.io/org-html-themes/src/lib/js/jquery.stickytableheaders.min.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="https://fniessen.github.io/org-html-themes/src/readtheorg_theme/js/readtheorg.js"></script>
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="../css/rtd.css">
#+HTML_HEAD: <style>pre.src{background:#343131;color:white;} </style>
#+STARTUP: showeverything