highlight.jsのスタイルを変更してAsciiDoctorで使う

:highlightjs-theme:属性をAsciiDocに追加することで。

成果物

AsciiDoctor.Hello.Highlightjs.201705081834

開発環境

• LinuxMint 17.3 MATE 32bit
  • rbenv
    • Ruby 2.4.0
      • AsciiDoctor
  • Firefox
    • AsciiDoc ビューア
  • pluma
    • AsciiDoc ハイライト

前回まで

highlight.jsでハイライトする言語を増やしてAsciiDoctorで使う

今回はstyleを変更する。

highlight.jsのスタイルDemo

highlight.js demo

何のスタイルを使うか選びやすい。

ファイル構成

• highlight/
  • highlight.min.js
  • style/
    • github.min.css
• test.asc

設定

1. 使いたいcssファイルを探す(./highlight/styles/atom-one-dark.css)
2. *.min.cssの名前に変更する
   • ./highlight/styles/atom-one-dark.cssを./highlight/styles/atom-one-dark.min.cssにリネームする
3. test.ascに:highlightjs-theme: atom-one-darkを追記する

test.ascファイルをつくる

test.asc

= test.asc
:source-highlighter: highlightjs
:highlightjsdir: highlight
:highlightjs-theme: atom-one-dark

highlight.jsで {highlightjs-theme} のテーマ(スタイル)を使っている。

.test.py
[source, python]
----
print('Hello Python !!')
----

.test.asc
[source, asciidoc]
----
= test.asc
:source-highlighter: highlightjs
:highlightjsdir: highlight
:highlightjs-theme: atom-one-dark

.test.py
[source, python]
 ----
print('Hello Python !!')
 ----
----

HTML出力する

$ rbenv exec asciidoctor test.asc 

ブラウザ表示

なにこれカッコイイ！

規則

以下の規則さえ把握すれば好きなようにcssを使える。

AsciiDoctorではhighlight.jsのcssファイル名とasciidocファイルの属性値が以下の規則にしたがっている必要がある。

./highlight/styles/*.min.css

:highlightjs-theme: *

• 上記の*を属性値として使う
  • github, atom-one-darkなどがある
• cssファイル名はダウンロード時.min.が付与されていないためリネームする必要がある
  • *.min.cssの名前のみ読み込むのはAsciiDoctor独自の仕様と思われる

所感

これで各言語、各cssを自由に使えるようになった。highlight.jsによるシンタックスハイライトについては大体使いこなせるはず。