【Javascript】SyntaxHighlighter 3.0 の新機能と注意点

by
このエントリーをはてなブックマークに追加

ブログ等でコードをさらすときに必携のスクリプト“SyntaxHighlighter”がメジャーバージョンアップして 3.0 になっていた。2.0 系、2.1 系よりアップデートするときの新機能と注意点について書いてみる。

SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/
新機能について
http://alexgorbatchev.com/SyntaxHighlighter/whatsnew.html

1. コードのコピー方法

大きく変わったのがコードのコピー機能。2.1 系までは Flash を使ったツールバーが表示されていて、それを使ってコードをクリップボードにコピーしていた。昨今の Flash 嫌いの風潮（？）に併せてこれが改善。コードをダブルクリックするとシンタックスハイライトが解除され、コード全体を簡単にコピー可能になった。

コピーテスト
1
2
3
4
5
6
7
8
9
#!/usr/bin/perl
use utf8;
use 5.12.0;
use warnings;
binmode STDOUT => ":utf8";
say "コードをダブルクリックすると全体が反転します。";
say "その状態で Ctrl-C（Cmd-C） を押してコピーしてください。";
say "コードの外をクリックして選択を解除すると";
say "シンタックスハイライトが復活します。";

2. タイトルの設定

これも待望の機能。コードにタイトルを付けられるようになった。これは <caption> タグを使って実現されている。次のように書くと、

1
2
3
4
5
6
7
8
9
10
11
<script class="brush:js;html-script:true"
    title="これはテストスクリプトです"
    type="syntaxhighlighter">
<![CDATA[
<html>
    <body>
        <p>Hello, World!</p>
    </body>
</html>
]]>
</script>

このようにタイトル付きで表示される。

これはテストスクリプトです
1
2
3
4
5
<html>
    <body>
        <p>Hello, World!</p>
    </body>
</html>

3. ハイライト定義ファイルのオートロード機能

各言語用のハイライト定義ファイル（shBrushXXXX.js ）を動的にロードしてくれる機能が加わった。shAutoloader.js を別途読み込んだ上で、SyntaxHighlighter.autoloader() を呼び出すことで有効になる。

設定例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript" src="/sh/scripts/shCore.js"></script>
<script type="text/javascript" src="/sh/scripts/shAutoloader.js"></script>
<script type="text/javascript" src="/sh/scripts/shBrushXml.js"></script>
<script type="text/javascript">
SyntaxHighlighter.autoloader(
     "bash                      /sh/scripts/shBrushBash.js"
     ,"css                      /sh/scripts/shBrushCss.js"
     ,"diff                     /sh/scripts/shBrushDiff.js"
     ,"html xml xhtml           /sh/scripts/shBrushXml.js"
     ,"js jscript javascript    /sh/scripts/shBrushJScript.js"
     ,"perl pl                  /sh/scripts/shBrushPerl.js"
     ,"plain                    /sh/scripts/shBrushPlain.js"
     ,"python py                /sh/scripts/shBrushPython.js"
     ,"sql                      /sh/scripts/shBrushSql.js"
     ,"tt tt2                   /sh/scripts/shBrushTT2.js"
     ,"yaml yml                 /sh/scripts/shBrushYAML.js"
);
SyntaxHighlighter.all();
</script>

このように設定しておくと、各定義ファイルが必要になった時点でロードされる。余分なファイルを読んでおく必要がないので便利だ。

注意すべきは 3 行目の shBrushXml.js で、これは予め別個に読み込んでおいた方がよい。そうしないと html-script オプション(HTML に埋め込まれたスクリプト（Javascript + HTML な文書など）をハイライトするときに使うオプション。)が使えない。

4. 各種 Javascript ライブラリへの対応

サーバーサイドやデスクトップなどで使われる CommonJS に対応した……らしいけど、使ったこと無いのでよくわかんない。

CommonJS: JavaScript Standard Library
http://www.commonjs.org/
CommonJS Spec Wiki
http://wiki.commonjs.org/wiki/CommonJS

5. SASS への対応

CSS を簡易かつ系統的に記述できるメタ言語である SASS に対応した……これも使ったことないや……

Sass – Syntactically Awesome Stylesheets
http://sass-lang.com/

等々新機能が目白押し……だが、いいことばかりではなく、少し残念な変更点もある。長い行があった場合折り返して表示するオプション“wrap-lines”が無くなり、強制的にスクロールバーが表示されるようになってしまったのだ。

a long long long long long long long long long long long long long long long long long long long long long long line

そしてこの場合、標準のテーマを使っていると最終行が隠れて見えなくなってしまうという不具合がある（IE7、IE8 で確認）。これを解決するにはスタイルシートに次の行を加えればよい。

1
2
3
4
5
6
.syntaxhighlighter {
  overflow-y: hidden !important;
}
.syntaxhighlighter table {
  margin-bottom: 1em !important;
}

変更前

100720-0001.png

変更後

100720-0002.png

Firefox では逆に空行が増えてしまうがしょうがあるまい。そのうち解決されるだろう。

5 thoughts on “【Javascript】SyntaxHighlighter 3.0 の新機能と注意点”

  1. delphinus様。
    以前はBlogに書き込みをいただきありがとうございました。
    この度，SyntaxHighlighterに関する記事を追加しましたので，トラックバックを申請させていただきました。
    もしご迷惑でしたら，拒否してください。
    失礼します。

    返信

  4. Pingback: SyntaxHighlighterを導入してソースコードを見やすくしてみました

  5. Pingback: Blogger で SyntaxHighlighter 3.0 を使う | TEPS Notebook

コメントを残す