Asciidocで生成するHTMLにテーマを適用して見た目を変える

Asciidocorで生成するHTMLへ適用できるテーマを開発できるAsciidoctor stylesheet factoryというツールがあります。

が、テーマの開発はまだ試せていませんので、ここではhtakeuchi/docker-asciidoctor-jpでテーマを使用する方法を紹介します。

Asciidoctor stylesheet factoryでは標準で以下のテーマが提供されます。

• asciidoctor.css
• foundation.css
• maker.css
• rubygems.css
• colony.css
• github.css
• readthedocs.css
• foundation-lime.css
• golo.css
• riak.css
• foundation-potion.css
• iconic.css
• rocket-panda.css

theme showcaseで各テーマの実際の見た目を確認できます。

htakeuchi/docker-asciidoctor-jpでは/stylesheets配下に以下のテーマが置かれていますので、 テーマは以下のように指定すればOKです。

1

asciidoctor -a stylesheet=github.css -a stylesdir=/stylesheets/ foo.adoc

この場合、スタイルシートはHTML中に埋めこまれますので、1つのHTMLだけで構成される簡単なドキュメントなどに便利です。

1

asciidoctor -a linkcss -a stylesheet=github.css -a stylesdir=../stylesheets foo.adoc

とすると、

1

<link rel="stylesheet" href="../stylesheets/github.css">

というHTMLが生成されますので、HTMLとCSSを分離することも可能です。