- 2010年7月20日 23:22
- Movable Type | javascript
- Tweet
ブログ等でコードをさらすときに必携のスクリプト“SyntaxHighlighter”がメジャーバージョンアップして 3.0 になっていた。2.0 系、2.1 系よりアップデートするときの新機能と注意点について書いてみる。
SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/新機能について
http://alexgorbatchev.com/SyntaxHighlighter/whatsnew.html
1. コードのコピー方法
大きく変わったのがコードのコピー機能。2.1 系までは Flash を使ったツールバーが表示されていて、それを使ってコードをクリップボードにコピーしていた。昨今の Flash 嫌いの風潮（？）に併せてこれが改善。コードをダブルクリックするとシンタックスハイライトが解除され、コード全体を簡単にコピー可能になった。
#!/usr/bin/perl use utf8; use 5.12.0; use warnings; binmode STDOUT => ":utf8"; say "コードをダブルクリックすると全体が反転します。"; say "その状態で Ctrl-C（Cmd-C） を押してコピーしてください。"; say "コードの外をクリックして選択を解除すると"; say "シンタックスハイライトが復活します。";
2. タイトルの設定
これも待望の機能。コードにタイトルを付けられるようになった。これは <caption> タグを使って実現されている。次のように書くと、
<script class="code:js;html-script:true"
title="これはテストスクリプトです"
type="syntaxhighlighter">
<![CDATA[
<p>Hello, World!</p>
<script type="text/javascript">
alert( "これはアラートです。" );
</script>
]]>
</script>
このようにタイトル付きで表示される。
<p>Hello, World!</p> <script type="text/javascript"> alert( "これはアラートです。" ); </script>
3. ハイライト定義ファイルのオートロード機能
各言語用のハイライト定義ファイル（shBrushXXXX.js ）を動的にロードしてくれる機能が加わった。shAutoloader.js を別途読み込んだ上で、SyntaxHighlighter.autoloader() を呼び出すことで有効になる。
<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 オプション
*1
が使えない。
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 で確認）。これを解決するにはスタイルシートに次の行を加えればよい。
.syntaxhighlighter {
overflow-y: hidden !important;
}
.syntaxhighlighter table {
margin-bottom: 1em !important;
}
変更前
変更後
Firefox では逆に空行が増えてしまうがしょうがあるまい。そのうち解決されるだろう。
*1
: HTML に埋め込まれたスクリプト（Javascript + HTML な文書など）をハイライトするときに使うオプション。
- Newer: 【Javascript】SyntaxHighlighter 3.0 を Movable Type で使う
- Older: 【MovableType, MySQL】記事中に BMP 外の文字を使う
Comments:0
Trackbacks:0
- TrackBack URL for this entry
- http://blog.remora.cx/mt/mt-tb.fcgi/643
- Listed below are links to weblogs that reference
- 【Javascript】SyntaxHighlighter 3.0 の新機能と注意点 from blog.remora.cx
