org-modeのHTMLテーマ

org-modeで書いた文書をHTMLにエクスポートするときのテーマで
お気に入りのものを紹介します。

主に以下のサイトのパクリです。

• https://github.com/fniessen/org-html-themes

ReadTheOrg

Read The Docのクローンです。

orgファイルでマニュアルなどの文章を書いたときのテーマとして好適です。

サンプルに拙作の文書をリンクしてきます。
http://sambatriste.github.io/maven3-tutorial/

以下の断片をorgファイルに貼り付けます。

#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="http://www.pirilampo.org/styles/readtheorg/css/htmlize.css"/>
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="http://www.pirilampo.org/styles/readtheorg/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="http://www.pirilampo.org/styles/lib/js/jquery.stickytableheaders.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="http://www.pirilampo.org/styles/readtheorg/js/readtheorg.js"></script>

BigBlow

org-modeのUI/UXをブラウザ上で再現したテーマです。色使いがすっきりしていてきれいです。
どちらかというと、TODOリストをエクスポートするのに向いているようです。
（もちろん文章でもOK）

ショートカットキーが充実しています。

Shortcut	What it does
? or h	ダッシュボード
n	次の見出しへ
p	前の見出しへ
b	上スクロール
<	先頭へ
>	末尾へ
+	折りたたみを展開する
r	次のタスクへ
R	前のタスクへ
q	タスクリストのレビューをやめる
g	リロード

サイト自体がこのテーマでできているようです。
http://www.pirilampo.org/

YouTubeに2分程度の短いデモ動画があります。
https://www.youtube.com/watch?v=DnSGSiXYuOk

以下の断片をorgファイルに貼り付けます。

#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="http://www.pirilampo.org/styles/bigblow/css/htmlize.css"/>
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="http://www.pirilampo.org/styles/bigblow/css/bigblow.css"/>
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="http://www.pirilampo.org/styles/bigblow/css/hideshow.css"/>

#+HTML_HEAD: <script type="text/javascript" src="http://www.pirilampo.org/styles/bigblow/js/jquery-1.11.0.min.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="http://www.pirilampo.org/styles/bigblow/js/jquery-ui-1.10.2.min.js"></script>

#+HTML_HEAD: <script type="text/javascript" src="http://www.pirilampo.org/styles/bigblow/js/jquery.localscroll-min.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="http://www.pirilampo.org/styles/bigblow/js/jquery.scrollTo-1.4.3.1-min.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="http://www.pirilampo.org/styles/bigblow/js/jquery.zclip.min.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="http://www.pirilampo.org/styles/bigblow/js/bigblow.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="http://www.pirilampo.org/styles/bigblow/js/hideshow.js"></script>
#+HTML_HEAD: <script type="text/javascript" src="http://www.pirilampo.org/styles/lib/js/jquery.stickytableheaders.min.js"></script>

Solarized

LightとDarkがあります。

サンプル(Light)は以下にあります。
http://thomasf.github.io/solarized-css/test/org-hacks.html

以下の断片をorgファイルに貼り付けます。

Solarized Light

#+INFOJS_OPT: view:t toc:t ltoc:t mouse:underline buttons:0 path:http://thomasf.github.io/solarized-css/org-info.min.js
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="http://thomasf.github.io/solarized-css/solarized-light.min.css" />

Solarized Dark

#+INFOJS_OPT: view:t toc:t ltoc:t mouse:underline buttons:0 path:http://thomasf.github.io/solarized-css/org-info.min.js
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="http://thomasf.github.io/solarized-css/solarized-dark.min.css" />