コードのハイライトには、SyntaxHighlighterプラグインが使える。

• SyntaxHighlighter3
  • crazy-max/dokuwiki-plugin-syntaxhighlighter3: 📝 SyntaxHighlighter3 plugin for DokuWiki
• SyntaxHighlighter4
  • crazy-max/dokuwiki-plugin-syntaxhighlighter4: 📝 SyntaxHighlighter4 plugin for DokuWiki

最新は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

<sxh></sxh>で囲う。

sxhの後にスペースを空けて言語を指定。<sxh php>や<sxh java>など。

その後にセミコロンで区切ってオプションを追加。(言語指定が無くてもよい)
[設定項目名]:[設定値]のように、コロンで区切る。オプション同士の間にもセミコロンが必要。
ここに詳しい。

デフォルトのままだと、少し文字が小さかったり上下が窮屈だったりするので、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>

sample.php

<?php
    echo "hello world!";
?>

行番号の表示や、特定の行をハイライトで目立たせるなどの機能はないので、その辺をカバーするには code3プラグインを使って<code>の働きを上書きする方法がある。

ただし、これを入れると従来の方法で記述できなくなり、詳しいドキュメントの場所もよくわからなかった。更新が2008年で止まっているので、諦めてデフォルトのままの方がいい気がする。