/ #asciidoc #asciidoctor 

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です。

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

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

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

とすると、

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

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

Edit(Admin)