Tag Archives: SyntaxHighlighter

CodeMirror for CodeEditor バージョン0.5 リリース

「CodeMirror for CodeEditor バージョン0.5」をリリースした。 最新の「CodeMirror for CodeEditor」をダウンロード バージョン0.5では内包する「CodeMirror」ライブラリをアップデートしている。 新機能としては、タブをマーカーで表示して、タブによるインデントを見えるようにする機能が追加された。 また、検索、置換機能が新しくなり、キー操作によって必要な時だけ表示するタイプに変わった。 そのためツールバーは、以前のバージョンに比べてすっきりしている。 例えば、検索機能は、CtrlとFキーの同時押しで起動する。(または、CmdとFキー) その他の操作は下記の通り。 下候補:CtrlとGキーを同時に押す。(または、CmdとGキー) 上候補:Shift、CtrlとGキーを同時に押す。(または、Shift、CmdとGキー) 置換:Shift、CtrlとFキーを同時に押す。(または、Cmd、OptionとFキー) 全置換:Shift、CtrlとRキーを同時に押す。(または、Shift、Cmd、OptionとFキー) ただし、フルスクリーンモードでは、検索、置換機能が使えなくなった。

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

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

「WP SyntaxHighlighter バージョン1.7」をリリースした。 最新の「WP SyntaxHighlighter」をダウンロード バージョン1.7は、1.6.7に続くリリースとなるが、中身は、バージョンの数字以上に変化している。 まず、bbPress 2.0以上をサポートし、フォーラムのトピック、リプライに含まれるコードを強調表示できるようになった。 bbPressの投稿フォームには、コメント欄と同様にテキスト形式のリンクボタンを挿入できるようになっており、簡単にソースコードを強調表示させることが出来る。 また、過去のバージョンでは、ソースコードのマークアップに<pre>タグのみを用いていたが、バージョン1.7では、ショートコードもサポートした。 書式はWordPress.comで使われているショートコードと互換性がある。 [sourcecode language="php" gutter="true" firstline="1" highlight="" htmlscript="false"]PHP コード[/sourcecode] [sourcecode lang="xhtml" gutter="true" firstline="1" highlight="" htmlscript="false"]XHTML コード[/sourcecode] language(lang)以外の属性は、省略しても良い。language(lang)を省略するとプレーンテキストとして強調表示される。 設定にもよるが、ショートコードは、投稿の作成/編集画面、固定ページの作成/編集画面、コメントの投稿欄、管理画面上のコメントの編集/返信画面、「WP SyntaxHighlighter Widget」で使うことができる他、bbPressのトピック/リプライの投稿フォーム、トピック/リプライの編集フォーム、管理画面のトピック/リプライの作成/編集画面でも使用できる。 実は、より簡略な下記の書式のショートコードもサポートしているのだが、事実上、これらの書式は使えない。 [source language="php" gutter="true" firstline="1" highlight="" htmlscript="false"]PHP コード[/source] [code lang="xhtml" gutter="true" firstline="1" highlight="" htmlscript="false"]XHTML コード[/code] なぜならば、この書式を適切に処理できるフィルターを実装していないからだ。そのため、これらの書式を使おうと思うと面倒になる。仮に自身でコードをエスケープしたとしても低い権限しか与えられていないユーザーが投稿した場合は、ソースコードが壊れる場合がある。 そもそも「WP SyntaxHighlighter Widget」の場合は、手入力でのマークアップは想定していないので、多少長くともWordPress.comとの互換性を優先した形になっている。 ショートコードを有効にした状態で、本文中にこれらのショートコードを書くと、表示の際にタグに展開されてしまうので注意が必要だ。 それを避けたい場合は、下記のようにショートコードを「[]」で囲んでエスケープすること。 [[sourcecode language="php" gutter="true" firstline="1" highlight="" htmlscript="false"]PHP コード[/sourcecode]] [[sourcecode lang="xhtml" gutter="true" firstline="1" highlight="" htmlscript="false"]XHTML コード[/sourcecode]] 例外として、<pre>タグで囲まれたショートコード(sourcecode、source、codeのみ)、つまり、ショートコードを含むソースコードを<pre>タグでマークアップした場合は、ショートコードをエスケープしなくとも、正常に処理されるようにしている。 ショートコードの導入に合わせて、コメント欄、WP SyntaxHighlighter Widget、bbPressの投稿フォームに追加されるテキスト形式のリンクボタンも強化され、<pre>タグだけでなく、ショートコードの挿入もサポートし、設定画面で切り替えることが出来るようになった。 過去のバージョンでは、投稿および固定ページにソースコードを記述することが許されたのは、「unfiltered_htm」権限を持つユーザー、つまりデフォルトのユーザーロールでは、管理者、編集者のみであったが、必要に応じて投稿者や寄稿者など、記事の投稿が許されているユーザー対して、ソースコードの記述を許可出来るようになった。 以上が目に見える機能面での主な新機能であるが、目に見えない部分でも変化している。 構成ファイルのうち、メインファイルが肥大して来たので、役割毎にファイルを分割し、処理を効率化している。 パフォーマンスを重視するなら、設定画面で不要な機能を無効化することをオススメする。 ただし、(過去のバージョンでも既に複雑であったが)設定画面は、我ながら、ここまで必要かと思うほど複雑になっているので、隅まで良く見た方が良い。 デフォルトでも、全てのユーザーが必要としていると思われない機能は、殆ど無効化されているが、設定の煩雑さを考慮して、敢えてデフォルトで有効になっている機能もある。 なお、デフォルトで有効になっている機能は、プラグインインストール時のWordPressのバージョンによっても異なる。 今後のリリースでも、設定画面に関しては、より複雑化する方向に向かうのではないかと思うわれるが、「設定しなくとも使え、設定することで、より幸せになれる」方向で開発を行うつもりであるため、頭が痛くなるようなら設定画面は見ない方が幸せかもしれない。 とは言え、以下の項目だけは、しっかり設定した方が良いだろう。 使用するライブラリ・・・2つのバージョンから選べるが、外観や機能も随分と異なったものになる。 テーマ・・・外観を変えたいなら。 ツールバー・・・強調表示されたソースコードの右上に表示される「?」やツールバーを消せる。 デフォルトの言語・・・必要な言語だけに絞りこめば、ボタンをクリックした時に表示される言語も減るので操作しやすくなる。 コメントやウィジェットの処理を除き、過去のバージョンでは、WordPressのデフォルトフィルターに依存し、独自のフィルターの適用は避けてきたが、必要性に迫られて投稿や固定表示の投稿/編集時、および表示時に適用されるフィルターも追加している。

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

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

「WP SyntaxHighlighter バージョン1.6」をリリースした。 最新の「WP SyntaxHighlighter」をダウンロード 「WP SyntaxHighlighter」は、基本的に標準のビジュアルエディターの使用を想定したものであり、HTMLエディターを主に利用しているユーザーにとっては使い易いとは言えなかった。 バージョン1.6では、ソースコードをエースケープし、<pre>でマークアップして強調表示の対象とできるQuicktag(ボタン)「SH pre」をHTMLエディターに追加した。 これにより、HTMLエディターでのソースコード記述が大幅に楽になっている。 「SH pre」ボタンの基本的な操作は、TinyMCEの「pre」ボタンを同じである。 ただし、タグの編集が出来るHTMLエディターのボタンであることもあり、「pre」ボタンと異なり、設定値の変更機能は備えていない。 また、一度「SH pre」ボタンで処理したソースコードは、特殊な文字がエスケープされて表示されるため、見かけ上、元々のソースコードとは、異なった表示となってしまう。

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

CodeMirror for CodeEditor バージョン0.4 リリース

「CodeMirror for CodeEditor バージョン0.4」をリリースした。 バージョン0.4 2011/10/30 最新の「CodeMirror for CodeEditor」をダウンロード バージョン0.4では、新しい機能の追加はないが、内包する「CodeMirror」ライブラリをアップデートしている。 このバージョンで採用した「CodeMirror」ライブラリは、正式リリースのものではなく、開発中のものであり、バージョン2.16の修正版(2.16-22)に当たる。 開発中のバージョンを採用した事には理由がある。 以前のバージョンでは、IEで参照するとタブがスペースに変換され、インデントが正しく反映されない問題が発生しており、以前から気になっていた。 この問題は、バージョン2.16で解消しており、このプラグインでもバージョン2.16を新たに採用するつもりであったが、テストした結果、新たに別の問題が発生していることが分かり、これら全ての問題を解消するために開発中のバージョンを採用した。 なお「CodeMirror」の開発チームは、仕事に熱心で、レスポンスが良く、バグとして報告すれば、直ぐに対応して貰える。 マイナーな用途のライブラリではあるが、こう言った点からも、今後、この手のライブラリの主流の1つになることが予想される。 バグを報告したり、パッチを提供したりするユーザーも増えて来ているようなので、開発自体も更に盛り上がって行きそうだ。

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

CodeMirror for CodeEditor バージョン0.3 リリース

「CodeMirror for CodeEditor バージョン0.3」をリリースした。 最新の「CodeMirror for CodeEditor」をダウンロード バージョン0.3では、設定画面を設け、各パラメーターの設定が可能になった。 これによって、デフォルトのテーマの選択、行番号の表示/非表示、インデントの設定などが可能になっている。

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

CodeMirror for CodeEditor バージョン0.2 リリース

「CodeMirror for CodeEditor バージョン0.2」をリリースした。 最新の「CodeMirror for CodeEditor」をダウンロード バージョン0.2では、「テーマエディター」、「プラグインエディター」に、検索、置換機能を付加するツールバーが追加された。 また、関数などの入力を補完する「オートコンプリート」を搭載した。 これによって、標準の「テーマエディター」、「プラグインエディター」が、コードエディターとして、より使い易いものになっている。 テーマに関しても、フルスクリーンモード切替時の制限を無くし、フルスクリーンモードでの切り替えもサポートした。

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

テーマ、プラグインエディターを強調表示するプラグイン「CodeMirror for CodeEditor」リリース

WordPress用プラグイン、「CodeMirror for CodeEditor バージョン0.1」を新たにリリースした。 最新の「CodeMirror for CodeEditor」をダウンロード 「CodeMirror for CodeEditor」は、WordPressの管理画面上のテーマエディター、プラグインエディターに表示されるソースコードを強調表示する。 下手に強調表示しない方が見やすいのではないかと言う話もあるが、そこは、気にしないで欲しい。 加えて「テーマエディター」、「プラグインエディター」を活用している人間がどれだけいるのかと言う問題もあるが・・・。 なお、このプラグインは、ソースコードの強調表示のためにJavaスクリプトライブラリの「CodeMirror」を利用している。

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

SyntaxHighlighter用のBrushファイル「DOS バッチファイル」

ソースコードを強調表示するWordPress用プラグイン「WP SyntaxHighlighter」は、同梱のサンプルプラグインで、対応言語を拡張出来る仕組みを採用しているが、バージョン1.5からは、新たに「DOS バッチファイル」が対応言語に加わった。 実は、この「DOS バッチファイル」用のBrushファイルは、ドイツのAndreas Breitschopp氏から提供されたものであるが、けして「WP SyntaxHighlighter」専用というわけではない。 「WP SyntaxHighlighter」もベースとしている、Alex Gorbatchev氏の「SyntaxHighlighter」ライブラリのバージョン2.0系、3.0系に対応しており、つまり、「SyntaxHighlighter」を利用して強調表示を行っている環境なら使用することが出来る。 WordPress用のプラグインに限れば、「SyntaxHighlighter Evolved」も言語を追加する仕組みを実装しているので、比較的、簡単に追加できる筈である。 参考:Adding A New Brush (Language) しかし、Andreas Breitschopp氏の方では、今のところ公開されていないようなので、必要な場合は「WP SyntaxHighlighter」バージョン1.5以上から抜き出して使って欲しい。 ダウンロードファイルを展開すると「wp-syntaxhighlighter」フォルダが出来るが、その中の /sample/lang-pack-for-wp-syntaxhighlighter/dos-batch/ 以下にある2つのファイルが「DOS バッチファイル」用のBrushファイルである。 shBrushDosBatch-V2.js・・・バージョン2.0系用 shBrushDosBatch-V3.js・・・バージョン3.0系用 ライセンスは、MITとGPLのデュアルライセンスになっている。 「DOS バッチファイル」用のBrushファイル自体は、以前から存在していたが、Andreas Breitschopp氏のものは、バージョン2.0系用とバージョン3.0系用を分けて作られている点が特徴だ。 バージョン3.0系に限って言えば、Breitschopp氏のものが初めてかもしれない。 バージョン2.0系用のBrushファイルは、「SyntaxHighlighter」バージョン3.0系でも使えることもあり、意外に公開されているバージョン3.0系形式のBrushファイルは少ない。 最後に改めてAndreas Breitschopp氏に感謝の言葉を述べさせて頂く。 Andreas Breitschopp氏は、様々なアプリケーションを開発し、無償または有償で公開されているので、興味があれば、「AB-Tools.com」を覗いて欲しい。

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

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

「WP SyntaxHighlighter バージョン1.5」をリリースした。 最新の「WP SyntaxHighlighter」をダウンロード バージョン1.5では、「WP SyntaxHighlighter Widget」というウィジェットを追加している。 このウィジェットは、標準のテキストウィジェットに近いが、テキストエリア内のソースコードの強調表示が可能である。 また、バージョン1.4からは、コメント欄に入力されたソースコードの強調表示が可能となっていたが、ソースコードを強調表示するためには、<pre>タグを手入力してソースコードをマークアップする必要があり、けして使い易いものではなかった。 そこでバージョン1.5では、必要に応じて、コメント欄にソースコードを<pre>でマークアップするためのテキストリンクボタンを追加出来るようになっている。 コメント欄にペーストしたソースコードを選択、反転表示した状態で、対応する言語のテキストリンクをクリックすると<pre>タグでマークアップされる仕組みになっている。 ただし、このボタンを追加できるのは、WordPress 3.0以上の標準のコメント欄に限る。 なお、同様のテキストリンクボタンを「WP SyntaxHighlighter Widget」にも採用しているが、こちらはWordPress 2.8以上で動作する。 同梱のサンプルプラグインで追加できる言語の数も増え、「DOSバッチファイル」と「Objective-C」を新たに追加した。

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

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