自動整形機能のイライラを軽減するGoogle Syntax Highlighterプラグイン

WordPressのSyntax Highlighterプラグインを作成してみた。

他の様々なプラグインを使用してみたのが、WordPressの標準エディタのTinyMCEは余計なことばかりしてくれて、編集画面に行ったり、ビジュアルとHTMLモードを行き来していると折角載せたソースコードをぐちゃぐちゃにしてしまう。またビジュアルモードにしたまま編集画面に遷移するとやはりソースコードがぐちゃぐちゃになり、やり直しだ。みんなどうしているのだろう？

そのためWordPressとTinyMCEの整形機能を強引に潜り抜けれるよう手を加えたプラグインを作ってみた。

動作について

Google Syntax Highlighter for WordPress HF Edition(長い！)プラグインは以下のような動作をします。

A)ソースコードを新規に投稿。

ソースコードを新規投稿

B)投稿記事の保存後のキャプチャ。ソースコードがWordPressの整形機能を潜り抜けるようにエンティティ化されています。

投稿記事保存後

C)ビジュアルとHTMLモードを往復した後のキャプチャ。ビジュアルモードにすると<が再び<に、>が再び>に変換されています。この状態で再び保存するとB)の状態になります。

ビジュアルとHTMLモードを往復

また、編集画面に移動した時にはB)の状態で表示されます。

Google Syntax Highlighter for WordPress HF Editionのプラグイン仕様(?)としては

  1. preタグ内の<を&#60;に変更
  2. preタグ内の>を&#62;に変更
  3. preタグ内の&lt:を&#60;に変更
  4. preタグ内の&gt:を&#62;に変更
  5. preタグ内の[を&#91;に変更
  6. preタグ内の]を&#93;に変更
  7. preタグが対で数が一致していればpreタグの入れ子OK
  8. Google Syntax Highlighter 2.0.287を使用
  9. jsとcssが多すぎるので一まとめにして最小化
  10. wp_footer()で出力されます
  11. 通常のHTMLレンタリングを優先させるためdefer=”defer”属性が付いています

といったことをしています。

使い方

Google Syntax Highlighter for WordPress HF Editionのプラグインの使い方は以下です。詳しくはGoogle Syntax HighlighterのUsage GuideやConfigurationを参考にしてください。

例えばphpのソースコードを掲載する場合には以下のようにします。

<pre class="brush:php;">
function removePrePost($post_content = '') {
	$preStart = '<pre>\n<pre class="syntax-highlight:';
	$preEnd = addcslashes('</pre>\n</pre>', '/');
	$post_content = preg_replace("/$preStart/i", '<pre class="syntax-highlight:', $post_content);
	return preg_replace("/$preEnd/i", '</pre>', $post_content);
}
</pre>

preタグのクラス属性をclass=”brush:php;”のように記述したらphpのソースコード表示になります。

サポート言語とタグ

Bash/shell
bash, shell
C#
c-sharp, csharp
C++
cpp, c
CSS
css
Delphi
delphi, pas, pascal
Diff
diff, patch
Groovy
groovy
JavaScript
js, jscript, javascript
Java
java
Perl
perl, pl
PHP
php
Plain Text
plain, text
Python
py, python
Ruby
rails, ror, ruby
Scala
scala
SQL
sql
Visual Basic
vb, vbnet
XML
xml, xhtml, xslt, html, xhtml

注意点

  • エディタのHTMLモードでソースコードを記述したら一旦保存してください。保存する前にビジュアルモードにするとソースコードが崩れます。
  • preタグを使用している場合、編集画面に遷移すると必ず「このページから移動します。よろしいですか？」とメッセージが表示されるようになります。(データベースからの読み込み時にも変換をしているため)
  • preの入れ子をしている場合、preタグの中のpreタグが対になっていない場合、記事の最後までエンティティ化されます。

メリット

  • ソースコードをわざわざエンティティ化して保存しなくても自動的にしてくれる
  • HTMLモードとビジュアルモードを行き来しても大丈夫
  • ビジュアルモードにしたままで編集画面に行っても大丈夫
  • ソースコードを記事に投稿・編集するときのストレスが軽減される(かも？)

ダウンロード

改定履歴

  • v0.5.1 -> v0.6.1 : [ と ]の対応を追加

ライセンス

記述するほども無くGPL。

投稿日: 2009 年 3 月 3 日 – 6:57 PM

カテゴリ: plugin

Tags: ,

ページトップ

ブックマーク！

6件のコメント

  1. でむ
    コメント日時 2009 年 6 月 12 日 at 11:34 PM

    ありがとうございます．

    これで幸せになれました．

    ただ，細かいですが，だけでもこれにひっかかり影響を少しだけ受けました．

    これは仕様ですか？

  2. でむ
    コメント日時 2009 年 6 月 12 日 at 11:37 PM

    コメントを見ましたが　＜ｐｒｅ＞と半角を入力したところが何故か消えています．

    プレは鬼門ですか？

    私は金沢なので北陸のよしみでがんばりましょう！

  3. torisan
    コメント日時 2009 年 6 月 13 日 at 9:31 AM

    最初に＜ｐｒｅ＞を記述した時、ビジュアルモードに切り替えると、TinyMCEが消してしまいます。
    なので、HTMLモードのまま、一旦、保存してください。

    もしこの場合に適応しない場合、問題の記事をメールで送信してくれるとデバッグ出来てうれしいです（汗

    メールアドレスはfuku@fpso.jpです。

  4. torisan
    コメント日時 2009 年 6 月 13 日 at 9:35 AM

    ,で影響ですか。。。

    ごめんなさい。自分どこが悪いか分かっていません。。。（汗

    区切りのところでちゃんと空白を入れないと、Syntax Highlighterが自動改行してくれないので、見にくくなることは分かっているのですが。。。これはSyntax Highlighterの仕様と考え、気にしていませんでした。

    ソースコードの改行のことでしょうか？

    同じ北陸ならば、なんかのイベントや交流会であったことあるかもしれませんね＾＾

  5. hirokawaz
    コメント日時 2009 年 10 月 27 日 at 6:51 PM

    右上に表示されるツールバーをマウスがpreタグの上に来た時だけ表示させるようにしたいのですが、どうすればいいのでしょうか？

  6. torisan
    コメント日時 2009 年 10 月 28 日 at 12:15 PM

    申し訳ありませんが、状況が良く分かりません（汗

11件のトラックバック

  1. フォーラムサイトの最近の投稿を取得 | XPressME Integration Kit
    トラックバック日時 2009 年 6 月 11 日 at 4:17 PM

    [...] Google Syntax Highlighter for WordPress HF Edition でのコード挿入実験保存後、ビジュアルエディタ側でこの文章を追加 [...]

  2. ソースファイルをきれいに表示させるには - いってみよー
    トラックバック日時 2009 年 7 月 7 日 at 12:31 AM

    [...] 自動整形機能のイライラを軽減するGoogle Syntax Highlighterプラグイン | とりさんのソフト屋さん via kwout 各プラグインの詳細は、↓ で確認してみてください。 [...]

  3. Web scratch
    トラックバック日時 2009 年 8 月 3 日 at 9:10 PM

    SyntaxHighlighter Plusから別のソースコードハイライトプラグインへ乗り換える

    SyntaxHighlighter Plusは便利なのですが、ビジュアルエディタとの行き来で壊れるので、とても不便です。そこで別のソースコードハイライトプラグインを探したところいい感じのものがあっ…

  4. Wordpressプラグイン | Web scratch
    トラックバック日時 2009 年 8 月 13 日 at 10:18 AM

    [...] 自動整形機能のイライラを軽減するGoogle Syntax Highlighterプラグイン | とりさんのソフト屋さん [...]

  5. 翻弄されるblog » wordpressにソースコードを貼り付ける
    トラックバック日時 2009 年 8 月 22 日 at 9:23 AM

    [...] ラグイン | とりさんのソフト屋さん http://soft.fpso.jp/develop/wordpress/plugin/entry_1219.html [...]

  6. WordPressにインストールすべきプラグインのまとめ | B-BLOG
    トラックバック日時 2009 年 9 月 22 日 at 3:56 AM

    [...] Google Syntax Highlighter for WordPress HF Edition [...]

  7. pc.casey.jp » WordPressでソースコードを綺麗に機能的に表示するプラグイン
    トラックバック日時 2009 年 11 月 17 日 at 12:40 AM

    [...] terプラグイン | とりさんのソフト屋さん : http://soft.fpso.jp/develop/wordpress/plugin/entry_1219.html [...]

  8. Google Syntax Highlighter でcshellを表示させるには。 – Misaki’s Notepad
    トラックバック日時 2009 年 12 月 12 日 at 8:41 AM

    [...] このblogにもSyntax Highlighterを入れようと思い 調べていたら、 自動整形機能のイライラを軽減するGoogle Syntax Highlighterプラグインという記事を見つけたので、今回はGoogle Syntax Highlighterを入 [...]

  9. Defocus Web» ブログアーカイブ » Syntax Highlighter
    トラックバック日時 2009 年 12 月 21 日 at 8:38 PM

    [...] Google Syntax Highlighter for WordPress HF Edition プログラムには縁がないので不要だと思うんですが、 ビューティフルなので試してみます。 変換速度にやや難がありますが、対応言語も多く記述 [...]

  10. プログラムとデザインの狭間 » Blog Archive » ソースコード整形【Google Syntax Highlighter for WordPress HF Edition】
    トラックバック日時 2009 年 12 月 21 日 at 8:44 PM

    [...] http://soft.fpso.jp/develop/wordpress/plugin/entry_1219.htmlからダウンロード [...]

  11. qumk.net » Blog Archive » wordpress:syntaxhighlighter
    トラックバック日時 2009 年 12 月 28 日 at 5:43 PM

    [...] google-syntax-highlighter-hf SyntaxHighlighter Evolved syntax-highlighter.2.0.2-1 syntax-highlighter-for-wordpress syntaxhighlighter-plus [...]

コメント投稿

* は必須項目です。入力したメールアドレスは公開されません。

*
*


AccessやExcel、.NETソフトウェア開発、WordPress等を使用したWebのシステム化、PCサポート、コンサルなどを行っています。全国対応可能です。お問い合わせください。
TEL (0776)56-8539