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

SyntaxHighlighter TinyMCE Button バージョン0.7 リリース

「SyntaxHighlighter TinyMCE Button バージョン0.7」を公開した。 最新の「SyntaxHighlighter TinyMCE Button」をダウンロードする バージョン0.7では、ボタンをクリックした時に表示されるポップアップウィンドウの入力オプションのデフォルト値を設定できるようになった。 これは、あるユーザーさんからのリクエストに応えて実装した機能である。 例えば、言語を選択するドロップダウンリストから使わない言語を除外して、リストを自分好みにカスタマイズ出来る。 デフォルトのドロップダウンリストには、かなり沢山の言語が登録されているが、実際に必要な言語は限られるているはずなので、必要ないものを無効にすることでリストをスッキリと整理できる。 また、行番号が必要ないなら、予め行番号を表示しない設定にしておくことで、ボタンでの余計な操作を省くことが出来る。 なお、「使用中のプラグイン」で、特定のプラグインを選択している場合は、そのプラグインの設定に従いデフォルト値を決定しているため、この機能をフルに生かすためには「その他」を選択すると良い。 バージョン0.7では、設定項目が一気に増えたため、設定をリセットするボタンも追加した。 巷では「WordPress 3.2」がリリースされ、既にバージョンアップを済まされている方も少なくないと思うが、「WordPress 3.2」では、ビジュアルエディターのフルスクリーンモードが変更され、フルスクリーンモードでは「SyntaxHighlighter TinyMCE Button」のボタンが表示されなくなってしまった。 フルスクリーンモードへのボタンの追加方法が分かり次第、この点は改善したいと考えているが、まだ情報収集の段階である。 /wp-admin/includes/post.php を見たところ、 「wp_fullscreen_buttons」フックを使えば、何とかなりそうな気がするが・・・。

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

SyntaxHighlighter TinyMCE Button バージョン0.6 リリース

「SyntaxHighlighter TinyMCE Button バージョン0.6」を公開した。 最新の「SyntaxHighlighter TinyMCE Button」をダウンロードする バージョン0.6では、ポップアップウィンドウのサイズを変更するためのオプションが追加された。 また、特殊なインストール環境でも動作するように、プラグインディレクトリの取得方法を変更した。 これに伴い、「セーフモード」は廃止した。

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

SyntaxHighlighter TinyMCE Button バージョン0.5 リリース

「SyntaxHighlighter TinyMCE Button バージョン0.5」を公開した。 最新の「SyntaxHighlighter TinyMCE Button」をダウンロードする バージョン0.5では、ボタンを追加する行が選択できるようになっている。 ツールバー上の1行目から4行目までの選択が可能で、比較的ボタンの少ない行を選択することで、以前のバージョンよりも見やすくボタンを配置できる。 加えて「SyntaxHighlighter Evolved」に最適化された動作モードを搭載した。 ただし、「SyntaxHighlighter Evolved」を使用する場合は、「SyntaxHighlighter Evolved」の設定画面で「すべてのブラシを読み込む」を有効にする必要がある。 また、バージョン0.4.1で、環境によっては「SyntaxHighlighter TinyMCE Button」を有効にするとTinyMCEのツールバーが表示されなくなると言う不具合の報告を受けているが、その対処として「セーフモード」を搭載した。 このモードを選択すると、通常とは異なる方法で、TinyMCEプラグインの追加を行う。 「安全なモード」と言うより、「第二のモード」と言った方が適切だろう。 もし、正常にボタンが表示されないなどの不具合が出る場合は、この「セーフモード」を試して欲しい。 バージョン0.5では、コードの書き直しを行っており、中身は、過去のバージョンとは随分と異なるものになっている。

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

SyntaxHighlighter TinyMCE Button バージョン0.4 リリース

「SyntaxHighlighter TinyMCE Button バージョン0.4」を公開した。 最新の「SyntaxHighlighter TinyMCE Button」をダウンロードする バージョン0.4では、新しいオプションが追加されており、強調表示したい行を指定できるようになっている。 また、新機能として「WP SyntaxHighlighter」および「Syntax Highlighter Compress」に最適化された動作モードを設定画面から選択できるようになっている。 最適化されたモードを選択した場合、データベースからこれらのプラグインの設定値の読み取り、ボタンをクリックしたときに表示されるオプションのデフォルト値に反映する。 その他のプラグインを使う場合、最適化されたモードで動作させたくない場合は「その他」を選択すれば良い。 バグフックスとしては、TinyMCEのフルスクリーンモードで「CODE」ボタンが機能しない問題を解消した。 「pre」ボタンも同様の問題を抱えているが、こちらは解消出来ていない。 しかし、フルスクリーンモードでも、言語、オプションの更新は実行可能だ。

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

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

ソースコードをハイライト表示するWordPress用プラグイン「WP SyntaxHighlighter Ver. 1.1」をリリースした。 ちょっとしたメジャーバージョンアップである。 追記:バージョン1.1は、ファイルのパッケージミスがあったため、再度パッケージ。同時にバグフックスを行い、バージョン1.1.1として公開。 最新の「WP SyntaxHighlighter」をダウンロード バージョン1.1では、2つの新機能を追加している。 ビジュアルエディターからソースコードをマークアップ出来るようになった。 設定画面でテーマのプレビューが可能になった。 このバージョンでは、ビジュアルエディターからソースコードをマークアップさせるために「SH TinyMCE Button」と勝手に命名したボタンを搭載している。 「SH TinyMCE Button」は、「SyntaxHighlighter TinyMCE Button」を焼き直した機能ボタンで、基本的な機能は「SyntaxHighlighter TinyMCE Button Ver. 0.1.1」と同等である。 ビジュアルエディターで表示されるアイコンもよく似ているので注意、「SH TinyMCE Button」の方は、大文字になっている。 ボタンをクリックするとポップアップウインドウが表示される。ボタンを押す前に、ハイライト表示されるソースコードを選択し反転表示させておく必要がある。 上の写真では、英語表示になっているが、日本語環境では、日本語で表示される。オプションは、言語と行番号の表示のみ。 最後に「Insert(挿入)」ボタンをクリックすれば、属性付きで「<pre>」タグが挿入され、ソースコードが無事マークアップされる。 「SyntaxHighlighter TinyMCE Button」との違いは「WP SyntaxHighlighter」の設定画面の設定値を参照し、「SH TinyMCE Button」で表示されるオプションにも反映する点で、例えば「WP SyntaxHighlighter」の設定で行番号が非表示なっていれば、「SH TinyMCE Button」で表示される行番号のオプションもチェックが外れた状態になる。 つまり「WP SyntaxHighlighter」の設定のままでよければ、言語だけを選択すれば良く、手間が省ける。 勿論、今まで通り「SyntaxHighlighter TinyMCE Button」も使用できるが、「SH TinyMCE Button」に移行することをお勧めする。 ちなみに「SH TinyMCE Button」は、設定画面でON/OFFが出来るようになっている。 バージョン1.1は、バグフィックスも含んでおり、アンインストール時に、データベース上の設定値の大部分が削除されないバグを修正している。 過去のバージョンをインストールし、現在は、アンインストールしている方は、バージョン1.1を再度インストールし、再度、アンインストールすると、データベースは綺麗になる。 さて、リリースしたばかりにも関わらず「WP SyntaxHighlighter」を補佐するという本来の役割を失った「SyntaxHighlighter TinyMCE Button」だが、今後は、汎用性を高め、更に高機能化する方向で開発を継続しようと思っている。

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