Home > blog > wordpressのSyntaxHighlighter系plugin “Syntax Highlighter for WordPress”

wordpressのSyntaxHighlighter系plugin “Syntax Highlighter for WordPress”

  • 2009-02-17 (火) 2:23
  • blog
  • | |
Google Adsense

Syntax Highlighter

前回の記事でSyntaxHighlighter系のwordpressのpluginとjavascriptのlibraryを可能な範囲で調べたが、pluginの作者の方に読んでいただき、書いた内容に対応した新ヴァージョンを出してもらえたので、新たにレビューしてみる。

Syntax Highlighter for WordPress

試したヴァージョン
2.0.0
対応するwordpressの最新バージョン表記
2.7.x
利用ライブラリ
SyntaxHighlighter
記述方式
ショートコード(ex.[hogehoge]~[/hogehoge])
plugin page
WordPress Plugins/JSeries » Syntax Highlighter for WordPress (ソース整形表示)
auther page
Syntax Highlighter for WordPress : 独断と偏見の何でもレビュー

前回の記事で調べたうちの1つ、SyntaxHighlighterというjavascriptのlibraryをベースに日本人のをかもとさんが開発したpluginの最新ヴァージョン。
最新ヴァージョンはSyntaxHighlighterの現時点での最新ヴァージョン2.0.287に対応し、さらにPHP4.xに対応してもらいました!

SyntaxHighlighter
SyntaxHighlighter – Alex Gorbatchev

対応言語

  • Bash/shell
  • C#
  • C++(cpp, C)
  • css
  • delphi
  • diff
  • groovy
  • javascript
  • java
  • php
  • plain text
  • python
  • ruby
  • sql
  • vb
  • xml(xml, xhtml, xslt, html, xhtml)

記述方法

ショートコードで、使用言語の略称でタグる。


phpの場合
[php]
…
[/php]

htmlの場合
[html]
…
[/html]

略称は“SyntaxHighlighter”の指定に順ずる、詳細は以下に記載されている。
SyntaxHighlighter:Brushes – Alex Gorbatchev

また、オプションで以下の内容を指定出来る

num
行番号の開始番号指定
例:[php num=10]~[/php]
highlight_lines
ハイライト表示したい行を指定
例:[php highlight_lines=[1, 2, 3]]~[/php]
gutter
false を指定すると行番号を表示しない
例:[php gutter=false]~[/php]
ruler
true を指定するとルーラーを表示する
例:[php ruler=true]~[/php]
toolbar
false を指定するとツールバー表示しない
例:[php toolbar=false]~[/php]
light
true を指定すると簡易表示になる
例:[php light=true]~[/php]
font_size
フォントのサイズを指定する
例:[php font_size=90%]~[/php]

結果図

[図]

書き出されるソース


<pre class="brush: php; auto-links: false;" style="margin:18px 0;">
/*---------------------------------------------------------
	test php code
---------------------------------------------------------*/
function hoge ($l='test') {
	for ($i=0;$l>=$i;$i++) {
		echo ($i);
	}
}
</pre>

ヘッダーには以下のcss呼び出しが挿入される。


<link href="プラグインまでのパス/syntax-highlighter/css/shCore.css?ver=2.0.287" type="text/css" rel="stylesheet" />
<link href="プラグインまでのパス/syntax-highlighter/css/shThemeDefault.css?ver=2.0.287" type="text/css" rel="stylesheet" />

フッターにはjavascript呼び出しが挿入される。(phpの場合)


<script type="text/javascript" src="プラグインまでのパス/syntax-highlighter/js/shCore.js?ver=2.0.287"></script>
<script type="text/javascript" src="プラグインまでのパス/syntax-highlighter/js/shBrushPhp.js?ver=2.0.287"></script>
<script type="text/javascript">//<![CDATA[
with(SyntaxHighlighter.config.strings){expandSource="+ ソースを表示";viewSource="プレインテキスト";copyToClipboard="クリップボードにコピー";copyToClipboardConfirmation="クリップボードにコピーされました";print="印刷";help="?";noBrush="Can't find brush for: ";brushNotHtmlScript="Brush wasn't made for html-script option: ";}SyntaxHighlighter.clipboardSwf="プラグインまでのパス/syntax-highlighter/js/clipboard.swf";
SyntaxHighlighter.all();
//]]></script>

実際に動的に書き出されるソースは以下の通り。


<div style="position: relative; top: 18px; margin-top: -18px;">
	<small>
		<strong>言語名</strong>
	</small>
</div>
<div class="syntaxhighlighter" id="highlighter_232742">
	<div class="bar">
		<div class="toolbar">
			<a href="#viewSource" title="プレインテキスト" style="width: 16px; height: 16px;" class="item viewSource">プレインテキスト</a>
			<a href="#printSource" title="印刷" style="width: 16px; height: 16px;" class="item printSource">印刷</a>
			<a href="#about" title="?" style="width: 16px; height: 16px;" class="item about">?</a>
		</div>
	</div>

	<div class="lines">
		<div class="line alt1">
			<code class="number">行番号</code>
			<span class="content">
				<span style="margin-left: 0px;" class="block">
					<code class="内容に合わせた色を指定するクラス名">コード内容</code>
				</span>
			</span>
		</div>

(行数文繰り返し)

	</div>
</div>

感想

今回調べた中では“SyntaxHighlighter library”系のwordpress pluginをシンプルに使うなら、これが一番と言えるんじゃないかな。
その代わり“SyntaxHighlighter library”の全ての機能を簡単に使える、といった類のものではないので、色んな機能を使ってみたい人は自力でテーマを修正するか、海外のpluginを捜すほうがいいだろう。
このpluginが優れてると感じた点は以下の通り。

  • xhtml Strictでも問題ない出力結果
  • 言語表示に必要最低限なjsファイルしか読み込まない
  • 日本人作者ならではの完璧な日本語対応
  • 他のライブラリに依存しない
  • javascriptをフッターで読み込む

と、そうであってほしい点をきっちり押さえてあり、安定動作もし、更新もされている。
他のpluginは何かしら手落ちがあったり、不安定だったり、更新が長いこと停止しているものが多い。

非常に優秀な反面、好みの問題も大きいが個人的に気になる点もいくつかあった。

言語名の表記のon/offが出来ない
使用言語名を表示するのはpluginによる動作だと思われるが、これを表示したくないケースがある。例えばhtmlの中にphpのコードが含まれていたり、どちらの言語といいにくい場合だ。cssで非表示には出来るものの、これの表示切替が出来たら素敵だった。
言語名表記のタグにsmall使用
非推奨タグではないのでvalidatorは通るが、html及びxhtmlを装飾目的で使うこと自体を避けたい場合、このタグは無くてよかったと感じるかもしれない。
プリントやヘルプなどのツールバーを非表示にしても、フッターのjavascriptでの日本語への文字列置換指定が消えない
ツールバーを非表示に出来る事をちゃんと調べて今更知ったけど、これ出力しないように出来ないのかなぁ。
ショートコードによる記述方法
個人的にはこれが結構致命的だったりする。ショートコードで記述するのは非常に楽なんだけど、一瞬たりともpluginを止めてはいけなくなってしまう。止めた瞬間に過去利用した記事の全てにショートコードがそのまま表示され、最悪中のコードが実行される事になる。
JSeries pluginである
意欲的に活動してくれているJSeriesを悪く言うのは、何か凄く悪者な気分になるが、現時点では(wordpress公式登録pluginと比較し)デメリットもある事は確かだと思う。JSeries Notifierというすごいpluginをもってしてもまだ公式に登録されたpluginの更新告知には及ばないし、その“JSeries Notifier”がいつまでwordpressの更新を追いかけて対応してくれるかはわからない。また、まったくの初心者にとってplugin配布場所が二箇所あり、そのサイトデザインがまったく違うと恐らく混乱するか、怪しんでしまう気もする。1

またこれはpluginのせいではないが、元々のSyntaxHighlighterlibraryの不満点も含まれる。

  • 連続する英数字の長文を折り返さない、時がある(どういう状況で折り返さないかよくわかってない)
  • cssによるデザインの変更が少し難しい
  • IE6に未対応(ツールバーを表示しなければ問題ないようにも見えるが…)

まとめると、凄くいいpluginだが遠い将来テーマから作り直す予定なので、その際古い記事を手直しする事になりかねないショートコード利用のpluginは少し抵抗があるので導入は見送りに。
新しくしたテーマがこのpluginを無理なく使用出来そうなら、その際真っ先に検討する予定。
ただほとんどの人にとってこのpluginはベストプラクティスになるだろう、他を検討する可能性があるとしたら俺のように特殊な理由からか、もしくはSyntaxHighlighterのlibraryの機能をフルに使いたい人、どうしてもsmallタグが嫌な人、くらいじゃないかなぁ。

  1. 初心者はSyntaxHighlighterなんかに興味がないという説もあるし、多分それは本当だ [戻る]

Comments (Close):5

をかもと 09-02-17 (火) 9:47

ども、をかもとです。

言語名の表記のon/offが出来ない

これは確かにそうですね。私の趣味で出してますが、消せるようにしたほうが嬉しいですね。

ショートコードによる記述方法

ご指摘の件も分かりますが、ショートコードによる記述は仕様変更がしやすいという利点もあります。
私は、以前 iG:Syntax Hiliter を使っていたのですが、気に入らなかったため同じショートコード構成を持つ別のプラグインを作ってしまったのがこれです。
今回も SyntaxHighlighter library が 1.5.x → 2.0.x にバージョンアップした際に
<pre name="code" class="言語名"> から <pre class="brush: 言語名;"> に書き換える必要があったんですが、過去記事の修正が不要でした。

JSeries pluginである

このプラグインに関しては JSeries に置いておく必要は無いのは確かです。
JSeries は、日本特有の文化に乗ったものや日本語化されていない海外のプラグインの日本語化ってのが大前提なので….
ただ、私が英語に堪能ではないので、他言語圏の方からサポートを求められても対応が遅くなってしまうというだけの理由で JSeries に置いてます。
もうちょっとキチンと仕上げたら、公式に登録するつもりはあるんですが、なかなか (^^;;;

私のように語学に堪能でない日本のプラグイン作者が気軽にプラグインを発表できる場として JSeries が貴重な場であることは確かなのです。

今回は、色々と要望ありがとうございました。
とても参考になります。

daruman 09-02-17 (火) 15:03

ショートコードの件はデメリットは記事に書いたとおりですが、をかもとさんのケースは特殊で、ほとんどのplugin乗り換えのケースでは記述書式は変わるかと思います。(前回調べたSyntaxHighlighter系pluginでは厳密に同じ記述書式のものは1つもありませんでした)
現時点では、plugin無しでも問題ないタグでの記述で、plugin側はclass名をトリガーにタグを捜し、適切なコードに置換する方法がいいのかなぁと考えてます。
これなら上記のケースでも古い記事の書き換えは発生しないかと思いますが、実装の手間・動作速度ともに考慮してない妄想です。

とりあえず既に大量の記事がある状態でショートコードを使ったpluginを停止するケースでは、自作pluginもしくはfunction.phpを停止するpluginと同じショートコードで呼び出し、なんらかのタグに置き換えると一応対応にはなるかなと。
その辺を自動化するpluginがあったら面白いのかもしれない、停止したpluginのショートコードと置換タグを管理画面で指定するだけのものとか…個人で作って使うレベルのものな気がしてきた。

ショートコードは個人的にはfunction.phpでの使用しか経験してませんが、あまりに使いやすいので全部これでやってしまいたい衝動に駆られる一方、自力で上記対策が出来ない人の利用も想定するpluginではやはり結構危ない気がしてます。

JSeries pluginに関しては完全に書き方を間違えてました。
そもそもユーザーにとってはpluginが公開されているのが公式じゃない以上、個人サイトだろうがJSeriesだろうが関係ない話で、むしろ一箇所に日本語で簡単に使えるpluginが集まっているのは利点なんだという、ごく当たり前の事に気付きました。
またplugin作者側の意見も参考になりました、俺も英語さっぱりなので日本語化されてないpluginをいじるには一定の気合が必要になりますし、なにより公式でしか公開が難しい場合plugin開発のハードルが高くなりすぎるか…。

これはむしろwordpress公式の問題がしてきた、クオリティコントロールしてる訳じゃないんだから自動アップデート機能をAPIか何かで公開してくれたらいいのに。

JSeriesに関しておおむね考えを改めましたが、唯一デザインだけはやはり本家に似たものがいいんじゃないかなぁと思ってたりします。

ゆりこ 09-02-21 (土) 22:44

わたしも JSeries でプラグインを公開しています。WordPress 2.7 で公式プラグインディレクトリーが重視されてしまって、それ以外の「勝手配布サイト」がないがしろにされたこと、個人的には危機感を持っています。現状では公式プラグインディレクトリーが多言語対応していない (複数言語での表示ができない/登録承認者が英語しか分からない) ため、「それはないやろーー」というのが本音です (WordPress 開発チームが国際化対応をないがしろにしているのはいつものこと)。

とりあえず、WordPress 日本語版では、管理パネルに JSeries ウェブサイトへのリンクを入れてもらう等、「あやしいものではない」ように見える努力はされています。

あと、現状の JSeries ウェブサイトを更新する計画はあるので、そのときにデザインをどうするかは検討してみます。ただし、wordpress.org 配下のサイトじゃないので、本家のデザインそっくりにするのは、かえってよくないと思います。それをするならば、http://plugins.ja.wordpress.org/ のような wordpress.org 配下のサイトにする方がよいでしょう。

なお、JSeries Notifier は SourceForge.jp の画面表示からバージョン番号を解析しているので、SourceForge.jp のデザインが変わってしまうと動作しなくなる問題があります (過去リニューアルで更新ができなくなった事例あり)。今後は、SF.JP に API を置いて、そこにアクセスするような方向にすることを検討しています。もしくは、JSeries Notifier 自体は本家に置いてしまうか。

daruman 09-02-22 (日) 11:34

はじめまして!

公式プラグインディレクトリーが多言語対応していない

完全に推測ですが、一応オープンソースなので多言語対応してほしかったら自分で機能を追加してよ、と英語圏の開発者は思っているのかもしれませんね。
しかし多言語対応してほしいのは英語での技術的な話が難しい層だったり、それが可能な開発者は自分では英語を読めるため他の機能やデバックに注力してしまうような…まぁ実際どうかわかりませんが。

wordpress.org 配下のサイトじゃないので、本家のデザインそっくりにするのは、かえってよくないと思います。

確かにそうですね、逆に怪しくなってしまうか。
個人的に思っていたのは、昔からいくつかあった日本のwordpress向けサイトは、好意で開設したサイトゆえサイトデザインにオフィシャル感が希薄なため、自分が初心者だった頃ここのpluginを使おうと踏み切るのに若干勇気が要ったのが気にかかっていたのです。
特にwordpressのpluginは似たような機能のものが多数あり、何度も更新放置したものに序盤でぶち当たるため、余計に警戒してしまう事がありました。(当時日本語のplugin情報もかなり少なかったのもありますが)
しかしオフィシャルじゃないのに類似したデザインは確かに問題ですね。

やはり公式pluginのようにwordpress自体から更新をかけれるとその辺の懸念もだいぶ解消されるという意味では、JSeries Notifier は今後に向けてという意味でもいいpluginだなーと、最初に見た時凄く関心したのを覚えてます。

余談ですがちょいちょいこういった話をwordpress関係の記事に俺が書くのは、昔から(少なくとも日本では)wordpressは開発者やそれに順ずる技術力を持った人の方に偏った雰囲気を感じていたからです。(名前と概要だけ紹介、後は調べてね→リンクから飛ぶと全部英語サイト、という形は素人に導入を諦めさせるのに十分な威力をもっていると思います)
wordpress信者ではないですが、ちょうど今色んな要因で日本での普及が進みそうな雰囲気なので、英語力のない俺も様々な情報を得られやすい環境になるには是非もっと普及して欲しいと思う反面、初心者に優しいとは言えないよなぁとジレンマを感じているのです。
個人的に最も初心者が導入しにくい原因はwordpressのヴァージョンアップが早すぎる上に、そのたびに大幅にインターフェイスが変わりすぎるんで、折角増えてきた書籍も最新ヴァージョン対応となると数限られてしまう状況がある気がしてますが。(1年前まで2.5程度だった気がするのに、いつの間にか2.8の話題が出てきてるような…。)

Rabia 10-05-20 (木) 4:43

Thank you for sharing your response, and offering some solutions.,lucy

Trackbacks (Close):5

pingback from ソースを色分けして見やすくするSyntax Highlighterの選択 - atl*weblog 09-02-17 (火) 2:25

[...] Newer [...]

pingback from 《Wp》Syntax Highlighter for WordPress « BrainEgg 10-01-29 (金) 11:37

[...] 参考:atl*weblog [...]

pingback from BLOOOOG» Blog Archive » ソースコードを色付きで表示する 11-02-10 (木) 19:21

[...] ると思います。 http://weblog.atl-r.net/blog/syntax-highlighter-for-wordpress/ [...]

pingback from 人によっては役に立つWordPressプラグイン | Irrelevant Space 11-04-18 (月) 0:29

[...] WordPress Plugins/JSeries Syntax Highlighter for WordPress (ソース整形表示) wordpressのSyntaxHighlighter系plugin “Syntax Highlighter for WordPress” – atl*we… [...]

pingback from w-x-w » Syntax Highlighter for WordPressをこのブログに導入してみた。 11-07-03 (日) 13:25

[...] ▼wordpressのSyntaxHighlighter系plugin “Syntax Highlighter for WordPress” http://weblog.atl-r.net/blog/syntax-highlighter-for-wordpress/ この記事への返信 2011-07-03 (日) 13:25 | Posted in 未分類 | [...]

Home > blog > wordpressのSyntaxHighlighter系plugin “Syntax Highlighter for WordPress”

Calendar
« 2017 年 3月 »
M T W T F S S
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    
Search
ABM | AnotherBookmark™
heteml
heteml
amadana
amadana(アマダナ)
feed
Meta

Return to page top