Syntax Highlighter for WordPress

今までは、ソースコードのハイライト表示を iG:Syntax Hiliter を使用していたのだが、思う所あってsyntax highlighter で表示するようにした。
で、この JavaScript を WordPress に導入する際に良いプラグインが無いか探したのだが、いまいちなものばかりだったので自作。
といっても、要件は iG:Syntax Hiliter と同様に指定できるものって事だけだったので、あっさりとできあがり。

対応言語は、c, cpp, csharp, java, javascript, delphi, pascal, php, python, ruby, vb, vbnet, sql, css, xml, html, xhtml, xslt。

ブログエントリ内への記述方法は iG:Syntax Hiliter と同様にして以下のように記述.

[言語名 num="10"]hogehoge();
fugafuga():[/言語名]

のように記述すると、指定した言語に合わせてハイライト表示します。
# 実際には [] 内の言語名は c, javascript などの対応言語名を記述してください。
# num="?" で数値指定すると行番号のカウントを指定された番号から開始します。

ソースコード部分は勝手に実態参照文字列に変換しますので、ソースをそのまま書いておっけです。

メニュー部分とかを日本語化したら WordPress Plugins/JSeries で正式リリースしようと思いますが、機能に満足してしまったので、ここで開発を止めてしまうかも。

2008/10/29 追記
メニュー部分を多言語対応して JSeries でリリースしました。
ダウンロードと詳細な説明は下記を参照してください。
WordPress Plugins/JSeries » Syntax Highlighter for WordPress

53 thoughts on “Syntax Highlighter for WordPress

  1. tokkonoPapa

    作者様ではない者がコメントするのも何なのですが…
    <!–more–> 以降に整形表示したいコードがある場合は機能しないように(必要なCSSやJavascriptを読み込まないように)してもらった張本人なので。

    をかもとさんのプラグインは、記事で使われている言語を自動判別して必要なファイルをヘッダーで読み込む仕様となっています。この仕様により、必要なHTTPリクエスト数を最小限に出来ます。

    つまり、動的に記事を読み込む Infinite Scroll を使った場合、をかもとさんのプラグインも必要なファイルを動的に読み込まなければならない、ということになります。をかもとさんが対応してくださるというのであれば、それに越したことはないのですが、予め全ての言語用ファイルを読み込むタイプのSyntax Highlighter系プラグインを使われるのも手かと思います。

    その場合、マークアップの記述方法が変わることもあるので、ご注意を。

    返信
    1. tokkonoPapa

      朱桜さんへのコメントのつもりが、「引用」で書いてしまいました。ごめんなさい 😆

      今日は、また1つ、修正のお願いをしに来ました。

      上のコメントにも関連するのですが、<!–more–> 以降にしかコードがない場合でも、headでCSSが読み込まれてしまう事があります。

      具体的には画像を添付しかつキャプションを付けた場合で、[caption]のショートコードが挿入されるため、C言語用のショートコード判定に引っかかるのが原因です。

      とりあえず、haveShortCode()中の正規表現を $pattern .= ')(\s[^\]]*)?\]/im'; に変えてしのいでいますが、願わくば正式にご対応いただけると助かります(正規表現が正しいかどうかも怪しいので 😉 )。

      その際、前のスレッドの朱桜さんの様に、<!–more–> 以降であっても機能するようにしておきたい方もいらっしゃるようなので、デフォルトは元の仕様で、どこかのコメントを外すと仕様が変わる、とかでもOKです(朱桜さんがご指摘の様に、Javascriptの呼び出し口は別途作って頂かなくてはなりませんが…)。

      色々とわがままを言い、ご面倒をおかけしますが、ご検討のほど、よろしくお願いします。

      返信
      1. をかもと 投稿作成者

        tokkonoPapa さん、どもです。

        具体的には画像を添付しかつキャプションを付けた場合で、[caption]のショートコードが挿入されるため、C言語用のショートコード判定に引っかかるのが原因です。

        とりあえず、haveShortCode()中の正規表現を $pattern .= ‘)(\s[^\]]*)?\]/im’; に変えてしのいでいますが、願わくば正式にご対応いただけると助かります(正規表現が正しいかどうかも怪しいので 😉 )。

        これはバグですね。修正します。

        とりあえず、こんな感じかな?

        		$pattern = '/\[(code';
        foreach ($this->target as $val) {
        $pattern .= '|' . strtolower($val);
        }
        $pattern .= ')([\s]+[^\]]*\]|\])/im';

        検証後に ver.2.1.364.3 としてリリースしておきます。
        ご指摘、ありがとうございました。

        返信
  2. 朱桜

    こんにちは。
    現在、Syntax Highlighter for WordPressをExpand More Link、Infinite Scrollというプラグインと併用しながら使用させて頂いております。

    さて。
    Expand More LinkやInfinite Scrollを使って、「続きを読む」や「次のページ」などを改ページせずに読み込むようにしているのですが、その際どうしても新たに読み込まれた記事に記述されたコードが整形表示されません。

    「続きを読む」以降のコード整形表示については、syntax_highlighter.phpの384〜387行の構文をコメントアウトすることでなんとか対応出来ました。
    しかし、「次のページ」を新たに読み込んで表示する際のコード整形表示が思うように出来ないのです。
    Infinite Scrollのオプション設定画面の「Javascript to be called after the next posts are fetched:」でSyntaxHighlighter.highlight();を追加してみたのですが、時々「Can’t find brush for: ○○○」(○○○にはコード名が入っています)というエラーが表示されてしまいます。
    「SyntaxHighlighter.highlight();」じゃない別の指定の仕方をした方が良いのでしょうか?
    それともどこか根本的にプログラムを弄った方が宜しいでしょうか?

    大変恐縮ですが、ご教授頂けると有り難いです。
    宜しくお願い致します。

    返信
    1. をかもと 投稿作成者

      朱桜さん、はじめまして。
      連絡遅くなり、申し訳有りません。

      Expand More LinkやInfinite Scrollを使って、「続きを読む」や「次のページ」などを改ページせずに読み込むようにしているのですが、その際どうしても新たに読み込まれた記事に記述されたコードが整形表示されません。

      tokkonoPapa さんがおっしゃるように、このプラグインでは指定された言語用の JavaScript (shBrush○○○.js) しか読み込みません。
      Expand More Link や Infinite Scroll 等 Ajax を使用して、別のページを取得してきた場合、そのページに書いてあるコード用の JavaScript が読み込まれていないため、「Can’t find brush for: ○○○」というエラーが発生します。
      これに対応するためにすべてのコード用の JavaScript を取り込むことは、このプラグインの目指す方向とは異なりますので対応することはできません。
      SyntaxHighlighter を適用するプラグインは他にも何種類かありますので、他のプラグインを試してみてください。

      WordPress 公式プラグインディレクトリ – “Syntax Highlighter” での検索結果

      返信
  3. tokkonoPapa

    をかもとさん、初めまして。

    1. clipboard.swf の設定不具合をご確認ください。

    Version: 2.1.364 / syntax_highlighter.php 298行目
    誤:SyntaxHighlighter.clipboardSwf=…
    正:SyntaxHighlighter.config.clipboardSwf=…

    これにより、toolbar上にクリップボードのアイコンがもう1つ現れるはずです。

    ご参考:http://alexgorbatchev.com/wiki/SyntaxHighlighter:Configuration

    2. 要望なのですが…

    例えばTOPページにおいて、 以下に Syntax Highlighter のショートコードを記述している場合、headで shCore.cssやテーマcssがリクエストされてしまいます。フッタではshCore.jsなどのスクリプトは呼び出されません。無駄なリクエストは避けたいのです。

    ご検討をお願いします。(ちなみに某 Syntax Highlighter はこのようなことはありません 😉 )

    返信
    1. をかもと 投稿作成者

      tokkonoPapa さん、はじめまして。

      ご指摘の2点を修正した Ver. 2.1.364.1 をリリースしました。
      アップデートしてくださいませ。

      返信
  4. ピンバック: 《Wp》Syntax Highlighter for WordPress « BrainEgg

  5. MuRa

    Ver.2.0.2をありがたく使わせていただいてます。

    ビジュアルエディタだと二重にエスケープされるので、
    エスケープされないように改造して使ってます。

    また、do_shortcode関数のプライオリティを変更されているようで、
    そのため他のショートコードに影響することがあります。

    詳しくは自分のサイトで紹介させていただいてますが、
    改善していただけるとうれしいです。

    返信
      1. MuRa

        修正早すぎw
        さっそく入れてみたところ、ばっちしです!JavaScriptも新しくなって見やすくなってますね。
        ありがとうございます。

        タブやスペースが編集中に変換されてしまうのはTinyMCEを直さないとなりませんね。
        ぐぐったらTinyMCEのおせっかい変換機能をオフにする方法が色々あるみたいなので試してみます。

        ちなみに、ここのコメント送信、IE8だとコメントが空ですって出て送信できなかったです。

        返信
        1. をかもと 投稿作成者

          気になってたけど、手抜きしていた所を指摘されたので修正しました。
          TinyMCEのお節介変換機能は、残念ながら対応する予定はありません。
          これをオフにしちゃうと、影響範囲が大きそうなので。

          返信
  6. ピンバック: ソースコードを整形表示するプラグインSyntax Highlighterをビジュアルエディタに対応させてみた | WordPress | むらQ

  7. ピンバック: Syntax Highlighter定義ファイルforHSPとか « スーパーカジキレーシング

    1. torham

      をかもと様、早速新バージョン試してみました。

      CSSばっちりでした!

      お忙しいところ、どうもありがとうございました!
      今後とも宜しくお願いします。

      返信
      1. をかもと 投稿作成者

        torham さん、どもです。

        今回は、不具合報告ありがとうございました。
        テストしきれていない所が多々あるので、こういった報告は非常に助かります。

        返信
  8. torham

    私も使わせていただいておりますが、同じように[css]〜[/css]が利きません。
    環境は以下です。

    【WordPress】 2.8.3
    【プラグイン】 Akismet、WP Multibyte Patch、Syntax Highlighter for WordPress
    【テーマ】 monochrome 1.2

    公開中のblogなので、夜中にでもテーマ変更などして見ます。
    取り急ぎ報告まで。

    どうぞ宜しくお願いいたします。

    返信
    1. をかもと 投稿作成者

      torham さん、はじめまして。

      私も使わせていただいておりますが、同じように[css]〜[/css]が利きません。

      お二方から報告があったってことは、私のテスト環境でたまたまうまくいってるだけなのかも知れませんね。
      時間のあるときに確認します。
      ご迷惑をおかけしますが、少々お待ちください m(_ _)m

      返信
  9. scorpion

    初めまして
    最近バージョンアップしたWordPress2.82(ja)でSyntax Highlighter2.01を使用させていただいております。
    プラグインの有効化は出来たのですが、スタイルシート[css]〜[/css]が整形されないようです。
    [html]は整形されます。
    以上ご報告まで 😉

    返信
    1. をかもと 投稿作成者

      scorpion さん、はじめまして。

      最近バージョンアップしたWordPress2.82(ja)でSyntax Highlighter2.01を使用させていただいております。
      プラグインの有効化は出来たのですが、スタイルシート[css]〜[/css]が整形されないようです。
      [html]は整形されます。

      うーん、私の環境も WordPress 2.8.2(ja) + Syntax Highlighter 2.01 なんですが、問題なく整形されます。
      ひょっとして、そちらでお使いの他のプラグインで [css] というショートタグを使用するものがあるのでは無いでしょうか?

      Syntax Highlighter 以外のすべてのプラグインを停止した状態でも整形されないでしょうか?
      整形されるようだったら、一つ一つプラグインを有効にしていって、どのプラグインと競合しているか確かめてみてください。

      返信
      1. scorpion

        をかもと様
        返信有難うございます。
        テーマを2.8.2のdefaultに戻してプラグインをこのHighLighterだけ有効にして試してみましたが[css]〜[/css]は整形されませんでした。
         う〜ん、何ででしょ?? 🙁
         ちなみに前POSTの時に使用していたテーマは「iNove」です 😉
         

        返信
  10. ピンバック: ADST.JP » Blog Archive » Syntax Highlighter for Wordpressの修正

  11. ピンバック: おじさんの備忘録-番外編-

  12. ピンバック: ソースコードをブログなどに載せる « パソコン めも

  13. GW28

    をかもとさん、ご返答頂いてありがとうございます。
    やはりプラグインに使用している他のライブラリやコードのライセンスは継承されるのですね。
    ありがとうございました。

    返信
  14. をかもと 投稿作成者

    GW28 さん、はじめまして。

    このプラグインのライセンスは GPL のみ適用させてもらっています。
    ただし Syntax Highlighter 2.0 については Donationware ですので、もし良ければ開発者に寄付してあげてください。

    返信
  15. GW28

    ライセンスについての基本的な質問になってしまうかも知れませんが、
    Syntax Highlighter2.0がDonationwareということは、
    このプラグインを使用する際にもそれが適用されるということなのでしょうか?

    返信
  16. をかもと 投稿作成者

    daruman さん、どもです。

    highlight-linesがどうも効いてないです、複数ラインを指定する際[1,2…]で記述すると閉じ括弧がショートコードの閉じと誤認される形になってました。
    またhighlight-linesの呼び出しのスペルも違うのかもしれません。

    おぉ!本当だ 😳 これは、不具合ですね、修正します。
    修正方法は、ご指摘のとおりです。

    返信
  17. daruman

    先日は修正ありがとうございます、折角なので別立てでレビューしてみました。
    と、宣伝じゃなく報告を。

    highlight-linesがどうも効いてないです、複数ラインを指定する際[1,2…]で記述すると閉じ括弧がショートコードの閉じと誤認される形になってました。
    またhighlight-linesの呼び出しのスペルも違うのかもしれません。
    修正点ですが恐らくsyntax_heghlighter.phpの264行目
    (!empty($highlight_lines) ? ” highlight-lines: {$highlight_lines};” : ”)

    (!empty($highlight_lines) ? ” highlight: [$highlight_lines];” : ”)
    と修正すると、こちらの環境ではうまく表示されました。
    また、この際複数行指定する時の記述は
    highlight_lines=[1, 2, 3]
    ではなく
    highlight_lines=1, 2, 3
    もしくは
    highlight_lines=”1, 2, 3″
    だと通るようです。

    合ってるか少し不安ですが、一応報告まで。

    返信
  18. ピンバック: ソースを色分けして見やすくするSyntax Highlighterの選択 - atl*weblog

  19. をかもと 投稿作成者

    daruman さん、どもです。

    ちなみにJSeriesにアップされていたVer.2.0.0をテスト環境にインストールしてみたところ、エラーが出てインストールできなかったのでご報告を。
    エラーはincludes/common-controller.phpの67行目でsyntax error, unexpected ‘)’ との事です。

    あわわ、本当だ 😳

    不具合報告ありがとうございます。
    早速 JSeries の方、修正しておきました。

    返信
  20. daruman

    先日はコメントありがとうございます、早速のSyntaxHighlighter2.0への対応お疲れ様です^^
    ちなみにJSeriesにアップされていたVer.2.0.0をテスト環境にインストールしてみたところ、エラーが出てインストールできなかったのでご報告を。
    エラーはincludes/common-controller.phpの67行目でsyntax error, unexpected ‘)’ との事です。
    67行目のifが抜けていたからのようなので
    file_exists(trailingslashit(ABSPATH . $this->plugins_dir . $this->plugin_dir). ‘includes/js/jquery-1.3.1.min.js’)) {

    if(file_exists(trailingslashit(ABSPATH . $this->plugins_dir . $this->plugin_dir) . ‘includes/js/jquery-1.3.1.min.js’)) {
    とすると無事動きました。
    php4でも動作確認しました、ありがとうございます^^

    返信
  21. ピンバック: 怒涛のめもめもリンク集 » Blog Archive » WordPressプラグイン:iG:Syntax Hiliter,PHP Hilight String

  22. MNN

    をかもとさま。

    修正ありがとうございます。無事”Syntax Highlighter for WordPress”を有効化する事が出来ました。”Quick Comments”共々使わせていただきます。
    便利なプラグインの公開ありがとうございました。

    返信
  23. をかもと 投稿作成者

    MNN さん、はじめまして。

    プラグインを有効化しようとすると、syntax_highlighter.php:34でwokCommonController classが無いとのエラーでプラグインを有効化する事が出来ません。
    includes/common-controller.php内でwokController classの定義がされているため、syntax_highlighter.phpの記述をwokControllerに変更したところとりあえずプラグインの有効化は出来たようです(まだソースコードは記述していないためこれ以上の動作は確認できていないのですが…)。

    あわわ、本当だ。
    私のプラグインで共通で使っている Class の名前を変更したんですが、その修正漏れでした 😳
    修正して、JSeries の配布物を入れ替えておきました。
    ご報告ありがとうございます。

    返信
  24. MNN

    おかもとさま。

    初めまして。MNNと申します。
    “Syntax Highlighter for WordPress” を使わせていただこうとしたのですが、
    プラグインを有効化しようとすると、syntax_highlighter.php:34でwokCommonController classが無いとのエラーでプラグインを有効化する事が出来ません。
    includes/common-controller.php内でwokController classの定義がされているため、syntax_highlighter.phpの記述をwokControllerに変更したところとりあえずプラグインの有効化は出来たようです(まだソースコードは記述していないためこれ以上の動作は確認できていないのですが…)。
    お手数ですが、JSeriesでリリースされている “Syntax Highlighter for WordPress” をご確認いただけますでしょうか。

    返信

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください