MS Access Tips/Sample and VBA and Blog customize etc...

SyntaxHighlighter 2.0 の代替スクリプトを検討する

タイトル画像

当プログでは、SyntaxHighlighter2.0 を使っていたのだが、IEとの相性が悪くうまくコピー出来ないという問題がありました。

時間ができたので、代替のスクリプトを調べてみました。

候補スクリプト

候補にあがったのは下記の3つ。

google-code-prettify

google-code-prettify

highlight.js

highlight.js

SyntaxHighlighter3.0

SyntaxHighlighter3.0

SyntaxHighlighter3.0 は 2.0 の後継バージョンで、新しいIEでの不具合も対策しているらしいのだが、最新バージョンの3.0.83 は2010年に出たものでそれから更新していないのがちょっと気がかり。機能は豊富だかやや重いという評判のようです。

google-code-prettif、highlight.js はどちらも軽いらしいです。機能的には、SyntaxHighlighter よりは劣るようです。どちらも対象言語の自動判別機能があり、設置も比較的カンタンらしいです。highlight.js は行番号表示はできないです。

highlight.js は 2015-07-28 に更新されています。比較的頻繁に更新されているようです。

「らしい」とか「ようです」と、伝聞情報ばかりですみません。下記が、比較的に上手にまとめているますので参考にしてください。

JavaScript - コードのハイライト表示 JS ライブラリ 3種 - Qiita

とりあえず、上記の3つのスクリプトをダウンロードしてみましたが、ファイルサイズはどれもそれほど差はないです。ファイルサイズを見る限りは、動作速度もそれほど差がないように思えます。

当プログに導入する場合の問題点

自分のプログに設置する場合、問題になるのは、既に投稿済みの記事のコードをどうするかということです。

google-code-prettify や highlight.js は preタグ内にコードを記述することになります。また、HTMLのタグである「<」は「<」に置き換える必要があります。SyntaxHighlighter はpreタグ以外に、scriptタグ内にコードを記述できて、そうすればタグの置換は必要ないとのことです。

当プログは、textarea にコードを記述しているので、上記の2つのスクリプトだと過去記事を書き換える必要があります。前に紹介したUWSCで自動書き換えスクリプトを作成しようとまで考えました。また、SyntaxHighlighter3.0 の解説ページを見てみても、textarea でもできるという記述はみつからなかったのですが、ひょっとしたら書き換える必要がないかも、だめもとでやってみよう、と思い立ちました。

もうひとつ、SyntaxHighlighter3.0で気にいらなかったのが、長いコードが折り返しされず、スクロールしない見えないということです。2.0では折り返されていたのですが。調べているうちに、解決法を見つけたのも決心した要因です。ただ、折り返しすると行番号表示はできないことになりますが、もともと行番号は非表示にしていたので問題無いです。

まとめ

すでにお気づきかもしれませんが、SyntaxHighlighter3.0 の導入は成功しました。導入自体は意外なほど簡単でした。こんなことなら、もっと早くしておけばよかったです。

ということで次回は、導入の手順とカスタマイズについて投稿します。

拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/471-9025ba23
該当の記事は見つかりませんでした。