コードのハイライトには、SyntaxHighlighterプラグインが使える。
最新はVer.4だが、言語毎の設定ファイルであるBrushを外部から指定できず、プラグイン作者に依頼して取り込んでもらう形となり、拡張性がややなくなってしまった。（多分ソースを追って改変すればできなくはないのだろうが……）
Ver.3も一応まだ使え、そちらではBrushを用意すれば言語追加が可能なので、対応してない言語をハイライトしたいならVer.3を使う。
Ver.4はその分、jsをひとまとめにして通信量を減らすなど細かな改善がされているので、用意されているメジャー言語で足りる場合はそちらを使ってよい。
Ver.3と4の切り替えは、Dokuwiki上でプラグインの有効無効を切り替えると概ね大丈夫だが、使えるオプションが一部変わっていたり、ケバブケースからキャメルケースに変わっている点に注意。
以下の説明は、Ver.3をベースに行う。
<sxh php; first-line: 70; highlight: [71,73]; title: helloworld.php>
<?php
$msg = 'hello';
$msg .= ' ';
$msg .= 'world!';
echo $msg;
?>
</sxh>
<?php
$msg = 'hello';
$msg .= ' ';
$msg .= 'world!';
echo $msg;
?>
luaやbatchなど個人的に欲しい言語がデフォルトで入ってないので、shBrushスクリプトを探してsyntaxhighlighter3/sxh3/pkg/scriptsに入れる必要がある。
WordPress用のWP SyntaxHighlighterをダウンロードすると、sample/lang-pack-for-wp-syntaxhighlighterの中にまとまって入っているので利用できる。
次に、dokuwikiの管理画面→サイト管理から「Syntaxhighlighter3 プラグイン設定」に行き、エイリアスとスクリプトの関連づけを行う。
<alias1> <alias2> <alias3> ... <aliasX> <shBrushxxx.js>
一つ一つの言語の設定は上のように書く。言語同士の区切りは「,」なのでluaとbatchを追加するときは、以下の内容を末尾に追記する。
,lua shBrushLua.js,batch shBrushDosBatch-V3.js
| 言語 | Brush配布URL |
|---|---|
| AppleScript, AS3, Bash, ColdFusion, C++, CSharp, CSS, Delphi, Diff, Erlang, Groovy, Haxe, Java, JavaFX, JavaScript, Perl, Php, Plain, PowerShell, Python, Ruby, SASS, Scala, Sql, Swift, Tap, TypeScript, VB, XML | 初期から入ってるスクリプト Brushes and Themes · syntaxhighlighter/syntaxhighlighter Wiki |
| Biferno, Clojure, DosBatch, F#, Lisp, Lua, Mel, Objective-C, PowerCli, Processing, R, Tcl, Verilog, Vim, Yaml | WP SyntaxHighlighter sample/lang-pack-for-wp-syntaxhighlighter内 |
| Kotlin | MasuqaT-NET/SyntaxHighlighterEvolved-KotlinBrush |
| Go | xeonx/shBrushGo |
| Rust | shBrushRust.jsの配布 - しらいとブログ |
<sxh></sxh>で囲う。
sxhの後にスペースを空けて言語を指定。<sxh php>や<sxh java>など。
その後にセミコロンで区切ってオプションを追加。(言語指定が無くてもよい)
[設定項目名]:[設定値]のように、コロンで区切る。オプション同士の間にもセミコロンが必要。
ここに詳しい。
| 設定項目名 | 初期値 | 説明 |
|---|---|---|
| auto-links | true | URLっぽい文字列にリンクを設定 |
| class-name | 空文字 | 任意のclassを指定できる |
| collapse | false | trueにすると、最初は折りたたんで表示（※Ver.4では廃止） |
| first-line | 1 | 行番号の開始位置 |
| gutter | true | 行番号の表示の有無 |
| highlight | null | 特定行を目立たせるためにハイライトを設定。 highlight:2 または highlight:[1,2,3] のように指定。 |
| html-script | false | よくわからん |
| smart-tabs | true | タブが半角スペース4つから2つになる |
| tab-size | 4 | タブを半角スペースいくつ分にするかを指定 |
| title | なし | ボックスの冒頭にタイトルを表記 |
| toolbar | true | 右上に出る「？」の表示の有無 |
デフォルトのままだと、少し文字が小さかったり上下が窮屈だったりするので、cssをいじって好みに合わせる。
いじるファイルは「syntaxhighlighter3/sxh3/styles/shCore.css」。
もし特定のスタイルのみ変更するなら「shThemeXXX.css」で、「shCoreXXX.css」の方は読まれないので注意。
.syntaxhighlighter {
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow: auto !important;
font-size: 1em !important;
border-radius: 8px;/*add*/
box-shadow: 8px 8px 8px rgba(0,0,0,0.4);/*add*/
}
.syntaxhighlighter table {
width: 100% !important;
font-size: 1.125em !important;/*add*/
}
/* captionをつけたコードは下だけ、無いコードは上下に間を空ける */
.syntaxhighlighter table tr > td {
padding: .8em 0 !important;/*add*/
}
.syntaxhighlighter table > caption + tbody > tr > td {
padding: 0 0 .8em !important;/*add*/
}
/* 行番号をつけないコードは左詰めされると窮屈なので、間を空けてラインを追加 */
.syntaxhighlighter.nogutter td.code .container textarea,
.syntaxhighlighter.nogutter td.code .line {
margin-left: .5em !important;/*add*/
padding-left: .5em !important;/*rewrite*/
border-left: 3px solid #435A5F !important;/*add*/
}
DokuWikiは<code>や<file>を使うことでデフォルトでもハイライトをサポートしてくれてる。
しかも対応言語が豊富だったりコードをそのままダウンロードできたりとSyntaxHighlighterより使いやすそうな面もある。
こちらは GeSHi - Generic Syntax Highlighter を使用しているらしい。
<file php sample.php>
<?php
echo "hello world!";
?>
</file>
<?php echo "hello world!"; ?>
行番号の表示や、特定の行をハイライトで目立たせるなどの機能はないので、その辺をカバーするには code3プラグインを使って<code>の働きを上書きする方法がある。
ただし、これを入れると従来の方法で記述できなくなり、詳しいドキュメントの場所もよくわからなかった。更新が2008年で止まっているので、諦めてデフォルトのままの方がいい気がする。