子育てしながらエンジニアしたい

現在 4 歳 女の子の子育て中エンジニアによる、技術系 + 日常系ブログ。

Emacs org-mode から見栄えの良い HTML を出力する

Emacs org-mode は、メモや TODO リストにとどまらず、いろんなことに使える Emacs のモードです。

orgmode.org

数年前から
「org-mode で書いたメモを HTML にエクスポートして報告書代わりにする」
ことをしていたのですが、久しぶりにやってみたら、昔よりも簡単に見栄えの良い HTML ができるようになってました。

たかが見栄え、されど見栄え。
中身は変わらなくても見栄えが良いと、良い仕事をした感じがあります。(錯覚?)
簡単ですがまとめておくことにしました。

emacs-htmlize の導入

これは見栄えと関係ないですが、そもそも html へのエクスポートでこけたのでメモ。

PC を入れ替えたときに、新しく Emacs 26.2 を入れました。
org-to-html (C-c C-e h h) しようとしたら、以下のエラーメッセージが出ました。

Please install htmlize from https://github.com/hniksic/emacs-htmlize

このお達しに従って、上記の GitHub から htmlize.el を lisp の入っているディレクトリにダウンロード。
そして init.el に以下を追加しました。

;; htmlize
(require 'htmlize)

見栄えを良くする

org ファイルの一番上に一行書くだけで、見栄えの良い HTML が出力できます。

#+SETUPFILE: https://fniessen.github.io/org-html-themes/setup/theme-readtheorg.setup

これだけ。
こんな素敵なものを用意してくれたのは以下の GitHub

github.com

今の所、Bigblow と ReadTheOrg の 2 テーマがあるようです。
上記の例は ReadTheOrg のテーマを使ったものです。
Bigblow にしたければ、

#+SETUPFILE: https://fniessen.github.io/org-html-themes/setup/theme-bigblow.setup

と書くだけ。
とても簡単!!

さらにテーマのカスタマイズもできるようです。
デフォルトだとコードブロックが見づらかったので、GitHub のカスタマイズ例に従って下記の一文を追加しました。

#+HTML_HEAD: <style>pre.src{background:#343131;color:white;} </style>

結果例

1 つ前にデータベース関連の記事を書きました。

edosha.hatenablog.jp

これのメモを報告書っぽくエクスポートした例です。

元の org ファイル

#+SETUPFILE: https://fniessen.github.io/org-html-themes/setup/theme-readtheorg.setup
#+HTML_HEAD: <style>pre.src{background:#343131;color:white;} </style>

#+TITLE: DB Performance Improvement
#+AUTHOR: edosha

* 現状調査
** レコード数と処理時間
  各テーブルのレコード数を調べ、それぞれ同じ SQL Query に対してどのくらい時間がかかるか調べた。

*** SQL Query
    #+BEGIN_SRC sql
    select count(*) from テーブル名;
    #+END_SRC

*** 結果
    | Table | Count | Time |
    |-------+-------+------|
    | A     |       |      |
    | B     |       |      |
    | C     |       |      |
    |       |       |      |
    |       |       |      |
    |       |       |      |
    |       |       |      |
    |       |       |      |
    |       |       |      |
    |       |       |      |

出力された HTML

出力された HTML
出力された HTML

素敵な Read The Docs 風の HTML がこれだけで出ました!
これはもう報告書は org-mode で決まりだ...