highlight.js限定の方法。
開発環境
AsciiDoctorにおけるhighlight.jsの利用
On the other hand, if you’re using a client-side syntax highlighting library like highlight.js or prettify, there’s no need to install additional libraries. The generated HTML will load the required source files from a CDN (or custom URL or file path).
AsciiDoctorはJS製のハイライタをCDNで取得するためインストール不要。ただ、CDNでハイライトできる言語は限られている。ほかの言語も使いたい場合、ダウンロードする必要がある。
ハイライト言語を増やす方法
AsciiDoctorユーザーズマニュアルによると以下の手順が必要。
- highlightjs.orgにて使用言語を選ぶ
highlight.zipファイルとしてダウンロードする
- AsciiDoctorで参照できるようにする
- 方法A: AsciiDocファイルの属性でパス指定する
- 方法B: AsciiDoctorコマンド実行時にパス指定する
1. highlight.zipを入手する
以下の言語を選んで入手した。
要らない言語を外した。そしてCDNに入っていないであろうAsciiDocを追加した。
highlight.zipファイル(217.2KB)をダウンロードした。
2. 解凍しておく
highlightディレクトリとして展開される。
3. AsciiDoctorが読めるようリネームする
./highlight/highlight.pack.jsを./highlight/highlight.min.jsにリネームする./highlight/styles/github.cssを./highlight/styles/github.min.cssにリネームする
デフォルトで使うのがgithub.min.cssである。ほかにも沢山cssがあるが、AsciiDoctorで使うならすべて*.min.cssのファイル名にリネームする必要がある。
4. AsciiDoctorで参照する
方法A: AsciiDocファイルの属性でパス指定する
- AsciiDocファイルの属性を
:highlightjsdir: highlightとする
:highlightjsdir: ../highlightなど相対パスでも参照できる。
test.ascファイルをつくる
= test.asc
:source-highlighter: highlightjs
:highlightjsdir: highlight
.test.asc
[source, asciidoc]
----
= test.asc
:source-highlighter: highlightjs
:highlightjsdir: highlighthighlight
* list1
. number1
.test.py
[source, python]
----
print('Hello Python !!')
----
----
HTML出力する
$ rbenv exec asciidoctor test.asc
ブラウザ表示
| before | after |
|---|---|
 |
 |
方法B: AsciiDoctorコマンド実行時にパス指定する
$ rbenv exec asciidoc -a highlightjsdir=(some_path)
この方法の場合、AsciiDocファイル内に属性:highlightjsdir: highlightを指定しなくてもよい。
ファイル構成まとめ
課題
AsciiDoc内でAsciiDocコード文字列を書くときにメタ文字とかぶって書けない。
----がコード用メタ文字とかぶってしまい書けなかったのでスペースを入れておいた。\でエスケープできるかと思ったがそのまま出力されてしまった。<code>タグだからそのまま出力されて正解なのだが、一体どうすれば書けるのか。
所感
highlight.jsでハイライトする言語を増やす方法はわかった。次回は別のCSSを使う方法について。
