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を使う方法について。