Tag Archives: ソースコード

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

WP SyntaxHighlighter バージョン1.2 リリース

WordPress用のプラグイン「WP SyntaxHighlighter バージョン1.2」をリリースした。 最新の「WP SyntaxHighlighter」をダウンロードする バージョン1.2では、「SyntaxHighlighter TinyMCE Button バージョン0.2.1」ベースの「SH TinyMCE Button」を搭載しており、「<pre>」タグの挿入や変更などの操作性が大幅に向上してる。 新しく追加された「CodeBox」では、インデントを維持したまま、ソースコードのペーストが出来る。 バージョン1.1から搭載されている「Select & Insert」も機能が向上しており、既に「<pre>」タグで囲まれているソースコードの言語やオプションを、後から変更出来るようになった。 必要な操作は、ビジュアルエディター上で完結できる設計になっており、もはやHTMLエディターを使う必要はないだろう。 「ビジュアルエディターで作業を完結する」ことが、このプラグインの開発の動機でもあり、目標でもあったので、一応の完成を達成できたバージョンと言える。 最初のリリースであるバージョン1.0から、細かな設定が行えるように設計しており、加えて、バージョン1.2では、操作性も大きく向上した。 バージョン1.2は、かなり使いやすいプラグインになったと考えている。 ぜひ、一度試して頂きたい。

Posted in WordPress, ネット・PC, 自作アプリ | Tagged , , , | Leave a comment

ソースコードを綺麗に表示するプラグイン

ソースコードが下の例のように綺麗にハイライト表示されているサイトを見たことがあるのではないかと思う。 function add_attrib($content){//Add attribute global $id, $attribute, $attribute_value, $prefix, $suffix; $attrib = “$attribute=\”$attribute_value$gallery\”"; if ($id == null) { $gallery = “”; } else { $gallery = $prefix.$id.$suffix; } return preg_replace(“/<a(?![^>]*?rel=['\"].*)[^>]*?(href=['\"][^'\"] ?\/[^\/] ?\.(bmp|gif|jpg|jpeg|png)['\"])(?![^>]*?rel=['\"].*)[^\>]*>(<img[^>]*?title=(['\"][^'\"] ?['\"])[^>]*\/>)/i”, “<a $1 $attrib title=$4>$3″, $content); } 実は、上記のようにソースコードをハイライト表示させる事は、それ程、難しい事ではない。 ソースコードのハイライト表示を実現するライブラリがいくつか公開されているので、それらを使えば良い。 これらのライブラリの中でも「SyntaxHighlighter」、「GeSHi」の2つが有名である。 WordPressの場合は、それらのライブラリをプラグイン化したものが公開されているので、導入は非常に簡単だ。 1.主なライブラリ ・SyntaxHighlighter 「SyntaxHighlighter」は、Javaスクリプトで記述されたライブラリで、サーバーではなく、クライアント(ブラウザ)側で処理させてハイライト表示を実現している。 そのためサーバーへの余計な負荷はない。 欠点は、ハイライト表示されるまでタイムラグが生じることだ。 サーバー側の処理に割り込んでいるわけではないので、最初は、記事として記述したとおりに表示される。つまりハイライト表示ではない。 読み込みが完了し、ブラウザでの処理が完了して、初めてハイライト表示になる。 そのため、長い短いは別として、普通に表示される不恰好な時間が必ず生まれる。 「SyntaxHighlighter」は、ページが本文表示された後に読み込まれなければ、正しく本文のハイライト表示を処理できないため、これもタイムラグの一因となっている。 実際に「SyntaxHighlighter」ベースのプラグインを試したところ、このブログは、様々なJavaスクリプトを読み込んでいるため、更に遅延が生じだ。 これは極端な例だが、このブログを参照したときに実行されるスクリプトの1つが、ツイッターの情報にアクセスしているため、中国の自宅からアクセスした場合、中国からはツイッターには接続できないためタイムアウトするまで待つことになり、タイムアウト後にようやく「SyntaxHighlighter」が実行され、もはやタイムラグとは呼び難い程の酷い遅延となった。 環境によっては予想外の遅延が生じる可能性があることに注意して置かなければならない。 「SyntaxHighlighter」の実行部分は、本文の後ろかつ、他のスクリプトより上位の位置で読まれたほうが、如何なる環境でもストレスが少ないと思われる。しかし、遅延の問題は完全には避けられないだろう。 ちなみに上の例も「SyntaxHighlighter」を使用しているが、プラグインは自作した。多少タイムラグが軽減できたように思う。 2011/5/3 「WP SyntaxHighlighter」を公開。 ・GeSHi 「GeSHi」は、PHPで記述されたライブラリで、「SyntaxHighlighter」とは異なり、サーバ側で実行される。 そのため「SyntaxHighlighter」のようなタイムラグはなく、いきなりハイライトされた形で表示される。 私のサーバー環境では、サーバーへの負荷によって、ページの表示に遅延が生じるなどのストレスも感じられなかった。 ベージ上で呼び出すだけで動作し、予めハイライト表示用のCSSが用意されてる「SyntaxHighlighter」と比較すると、ややページへの実装が面倒な印象がある。 2.WordPressへの実装 「SyntaxHighlighter」や「GeSHi」をベースとしたプラグインが公開されているので、それらを使えば簡単に導入が可能である。 主なプラグインを紹介する。 ・SyntaxHighlighter Evolved 「SyntaxHighlighter Evolved 3.1.1」は、「SyntaxHighlighter」ライブラリを利用したプラグインで、バージョン3.0系と2.0系の2つのライブラリが組み込まれており、切り替えて使用出来る。 こちらは、バージョン3での表示。 行番号は非表示に出来る。(バージョン2も。) 一行が長すぎる場合は、自動的にスクロールバーが表示される。 表示部をダブルクリックすると、コピーモードのになるので、ソースをコピー出来る。 続いて、こちらがバージョン2での表示となる。バージョン2の方が、ハイライト表示までのタイムラグが少ないように思う。タイムラグについては、プラグインの実装方法によっても異なり、一概に言えなさそうである。 バージョン2では、長い行の折り返しが可能な他、Flashベースのツールバーが表示できる。 このツールバーでは、ソースのコピー機能などが提供されている。 基本的にバージョン3の方が操作性に優れていると思うが、ソースのコピー方法などは、バージョン2の方が直感的に分かり易く、ビジターに親切かと思われる。 上記の表示は、シンプルに見えるが、デフォルトのテーマでの表示例だ。 複数のテーマが用意されているので、テーマを切り替えることによってデザインを変えることが出来る。 もっとも、テーマ自体は「SyntaxHighlighter」ライブラリに含まれているので、これは「SyntaxHighlighter」ライブラリベースのプラグインに共通の機能である。 設定画面は充実しており、日本語表示にも対応している。 この設定画面で、かなり細かい設定変更が行える。 「SyntaxHighlighter」ライブラリでは、ハイライト表示の指定は、<pre>タグでマークアップして行うのが基本だが、このプラグインでは、[php]といった様な簡略化されたショートコードを採用している。 ・Syntax Highlighter for WordPress 「Syntax Highlighter for WordPress 3.0.83.2」も、「SyntaxHighlighter」ライブラリベースで、バージョン3.0系と2.0系の2つのライブラリが組み込まれている。 開発者は、日本人の方。 こちらがバージョン3での表示。 こちらがバージョン2での表示となる。 「SyntaxHighlighter」ベースなら基本的に表示は同じ。微妙な差は、初期設定値の違いによるものだ。 設定画面は非常にシンプルで、バージョンとテーマの切り替えのみ。 「SyntaxHighlighter Evolved」同様に、ソースコードのマークアップにショートコードを使う。 設定画面がシンプルな事を除けば、基本的に 「SyntaxHighlighter Evolved」と大差はない。 ・CodeColorer 「CodeColorer 0.9.9」は、「GeSHi」ライブラリをベースとしている。 そのため、ハイライト表示に切り替わるまでのタイムラグはない。 表示は下記の通り。「preg_replace」がリンクされているが、クリックすると、関数のリファレンスに飛ぶ。 複数のテーマが用意されているので、テーマの切り替えで、レイアウトを変えることが出来る。 … 続きを読む →

Posted in WordPress, ネット・PC | Tagged , , , , , | 2 Comments