Daily Archives: 2011年8月4日

SyntaxHighlighterとWordPress用プラグイン

私も「SyntaxHighlighter」ライブラリを使って、ソースコードの強調表示を行うのプラグインを作成しているが、今回は「SyntaxHighlighter」ライブラリについての技術情報の簡単なまとめとライバル?との機能比較を兼ねた「SyntaxHighlighter」ベースのWordPress用プラグインの比較をしてみる。 参考:ソースコードを綺麗に表示するプラグイン 「SyntaxHighlighter」という言葉は、単にソースコードの強調表示を行う機能やアプリを指す場合も多いが、この記事で言うところの「SyntaxHighlighter」とは、Alex Gorbatchev氏がJavaスクリプトで記述して公開している強調表示用のライブラリを指す。 Alex Gorbatchev氏のSyntaxHighlighter 「SyntaxHighlighter」ライブラリの利点は、Javaスクリプトで記述されている点にある。 そのため多少のカスタマイズが可能なサイトであれば、比較的、簡単に導入できる。 しかし、Javaスクリプトであるが故にブラウザの種類、バージョン、設定によっては、上手く強調表示されない可能性がある。 また、サーバーから送信されるソース自体が強調表示されているわけではなく、ソースを受け取ったブラウザがJavaスクリプトで処理し、強調表示に変える仕組みであるため、ブラウザ上で強調表示になるまでにタイムラグが生まれる場合もある。 WordPress用のプラグインでは、「GeSHi」ライブラリをベースとしたプラグインも人気が高いが、こちらはPHPで記述されているため、(CSSの解釈は別として)ブラウザによる違いやタイムラグは起こり得ない。 「GeSHi」の場合は、PHPで記述されたサイトでなければ導入できないが、そのような制限がない「SyntaxHighlighter」の利点は大きい。 しかしながら、PHPで記述されたWordPressの場合、むしろ「GeSHi」の利点の恩恵の方が大きいと言えるかもしれない。 ちなみに私は、ソースコードの強調表示用プラグインを色々と試した結果、既存のプラグインで気に入ったものが見つからなかったため自作する道を選んだが、「GeSHi」ではなく「SyntaxHighlighter」をベースにした理由は、CSSにある。 「SyntaxHighlighter」に同梱されているCSSは、十分に使い物になると思われたが、「GeSHi」の場合は、CSSを自分で作り込む必要があり、その手間を敬遠したためである。 1.SyntaxHighlighterの導入 「SyntaxHighlighter」の導入は比較的簡単である。 「3.0.x」の場合は、ダウンロードファイル内の「scripts」と「styles」フォルダをサーバーにアップロードし、<head>・・・</head>の間に、以下のような記述を追加すれば良い。 <link href="styles/shCore.css" rel="stylesheet" type="text/css" /> <link href="styles/shCoreDefault.css" rel="stylesheet" type="text/css" /> <link href="styles/shThemeDefault.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="scripts/shCore.js"></script> <script type="text/javascript" src="scripts/shBrushXml.js"></script> <script type="text/javascript" src="scripts/shAutoloader.js"></script> <script type="text/javascript">//<![CDATA[ SyntaxHighlighter.autoloader( "applescript scripts/shBrushAppleScript.js" ,"as3 actionscript3 scripts/shBrushAS3.js" ,"bash shell scripts/shBrushBash.js" ,"cf coldfusion scripts/shBrushColdFusion.js" ,"cpp c scripts/shBrushCpp.js" ,"c# c-sharp csharp scripts/shBrushCSharp.js" ,"css scripts/shBrushCss.js" ,"delphi pas pascal scripts/shBrushDelphi.js" ,"diff patch scripts/shBrushDiff.js" ,"erl erlang scripts/shBrushErlang.js" ,"groovy scripts/shBrushGroovy.js" ,"java scripts/shBrushJava.js" ,"jfx javafx scripts/shBrushJavaFX.js" ,"js jscript javascript scripts/shBrushJScript.js" ,"perl pl scripts/shBrushPerl.js" ,"php scripts/shBrushPhp.js" ,"plain text scripts/shBrushPlain.js" ,"ps powershell scripts/shBrushPowerShell.js" ,"py python scripts/shBrushPython.js" ,"rails ror ruby rb scripts/shBrushRuby.js" ,"sass scss scripts/shBrushSass.js" ,"scala scripts/shBrushScala.js" … 続きを読む →

Posted in WordPress, ネット・PC | Tagged , , , , | Leave a comment