WordPress で Syntaxhighlighter を使う

この記事は「初めての WordPress」の続きです。前回に続き、プラグインの設定を行っていきます。

今回は以前から利用している Syntaxhighlighter を WordPress 上で使ってみます。

WordPress でこれを利用するプラグインはいろいろあるのですが、前回導入した Markdown 記法と共存できるものとなると結構少ないです。

WP Syntaxhighlighter プラグイン

今回導入したのは以下のプラグインです。

WP SyntaxHighlighter | モノについてのモノ語り
http://www.near-mint.com/blog/software/wp-syntaxhighlighter

Markdown 記法と共存する上で、いくつか試して一番問題がなかったのがこのプラグインです。いくつか気になるところがあったので修正して使っています。

以下、修正した差分です。

`wp-sh-shortcode.php` の差分

diff -u wp-syntaxhighlighter.orig/wp-sh-shortcode.php wp-syntaxhighlighter/wp-sh-shortcode.php
--- wp-syntaxhighlighter.orig/wp-sh-shortcode.php   2012-02-29 11:03:16.000000000 +0900
+++ wp-syntaxhighlighter/wp-sh-shortcode.php    2013-01-05 17:20:45.000000000 +0900
@@ -45,6 +45,7 @@
        'padlinenumbers' => $wp_sh_setting_opt['padding_line'],
        'toolbar' => $wp_sh_setting_opt['toolbar'],
        'wraplines' => $wp_sh_setting_opt['wrap'],
+       'title' => '',
    ), $atts));
 
    $language = esc_attr($language);
@@ -61,18 +62,21 @@
    $padlinenumbers = esc_attr($padlinenumbers);
    $toolbar = esc_attr($toolbar);
    $wraplines = esc_attr($wraplines);
+   $title = esc_attr($title);
+
+   if (strlen($title) > 0) $title = 'title="' . $title . '"';
 
    if ($lang == "") {
        if ($wp_sh_setting_opt['lib_version'] == "2.1") {
            return '<pre class="brush: '.$language.'; auto-links: '.$autolinks.'; collapse: '.$collapse.'; gutter: '.$gutter.'; first-line: '.$firstline.'; highlight: ['.$highlight.']; html-script: '.$htmlscript.'; light: '.$light.'; pad-line-numbers: '.$padlinenumbers.'; toolbar: '.$toolbar.'; wrap-lines: '.$wraplines.'">'.$content.'</pre>';
        } else {
-           return '<pre class="brush: '.$language.'; auto-links: '.$autolinks.'; collapse: '.$collapse.'; gutter: '.$gutter.'; first-line: '.$firstline.'; highlight: ['.$highlight.']; html-script: '.$htmlscript.'; light: '.$light.'; pad-line-numbers: '.$padlinenumbers.'; toolbar: '.$toolbar.'\'">'.$content.'</pre>';
+           return '<pre class="brush: '.$language.'; auto-links: '.$autolinks.'; collapse: '.$collapse.'; gutter: '.$gutter.'; first-line: '.$firstline.'; highlight: ['.$highlight.']; html-script: '.$htmlscript.'; light: '.$light.'; pad-line-numbers: '.$padlinenumbers.'; toolbar: '.$toolbar.'" '.$title.'>'.$content.'</pre>';
        }
    } else {
        if ($wp_sh_setting_opt['lib_version'] == "2.1") {
            return '<pre class="brush: '.$lang.'; auto-links: '.$autolinks.'; collapse: '.$collapse.'; gutter: '.$gutter.'; first-line: '.$firstline.'; highlight: ['.$highlight.']; html-script: '.$htmlscript.'; light: '.$light.'; pad-line-numbers: '.$padlinenumbers.'; toolbar: '.$toolbar.'; wrap-lines: '.$wraplines.'">'.$content.'</pre>';
        } else {
-           return '<pre class="brush: '.$lang.'; auto-links: '.$autolinks.'; collapse: '.$collapse.'; gutter: '.$gutter.'; first-line: '.$firstline.'; highlight: ['.$highlight.']; html-script: '.$htmlscript.'; light: '.$light.'; pad-line-numbers: '.$padlinenumbers.'; toolbar: '.$toolbar.'\'">'.$content.'</pre>';
+           return '<pre class="brush: '.$lang.'; auto-links: '.$autolinks.'; collapse: '.$collapse.'; gutter: '.$gutter.'; first-line: '.$firstline.'; highlight: ['.$highlight.']; html-script: '.$htmlscript.'; light: '.$light.'; pad-line-numbers: '.$padlinenumbers.'; toolbar: '.$toolbar.'" '.$title.'>'.$content.'</pre>';
        }
    }
 }
@@ -174,4 +178,4 @@
    return $m[1] . $m[6];
 }
 
-?>
\ No newline at end of file
+?>

タイトルを自由に設定できるようにする: Syntaxhighlighter にはソースコードごとにタイトルを表示する機能があるのですが、WP Syntaxhighlighter プラグインではこれが自由に設定できません。元の機能そのままに、title="..." を付け足すようにしました。

`wp-syntaxhighlighter.php` の差分

diff -u wp-syntaxhighlighter.orig/wp-syntaxhighlighter.php wp-syntaxhighlighter/wp-syntaxhighlighter.php
--- wp-syntaxhighlighter.orig/wp-syntaxhighlighter.php  2012-02-29 11:03:16.000000000 +0900
+++ wp-syntaxhighlighter/wp-syntaxhighlighter.php   2013-01-05 17:20:45.000000000 +0900
@@ -568,12 +568,15 @@
        return $matches[1].$replaced_code.$matches[3];
    }
    if (strpos($code, "<") !== false || strpos($code, ">") !== false || strpos($code, '"') !== false || strpos($code, "'") !== false || preg_match('/&(?!lt;)(?!gt;)(?!amp;)(?!quot;)(?!#039;)/i', $code)) {
-       if (strpos($code, "<") === false && strpos($code, ">") === false && !preg_match('/&(?!lt;)(?!gt;)(?!amp;)(?!quot;)(?!#039;)/i', $code)) {
-           $pre_replaced_code = str_replace('"', '"', $code);
-           $replaced_code = $matches[1].str_replace("'", ''', $pre_replaced_code).$matches[3];
-       } else {
-           $replaced_code = $matches[1].htmlspecialchars($code, ENT_QUOTES, 'UTF-8').$matches[3];
-       }
+       #if (strpos($code, "<") === false && strpos($code, ">") === false && !preg_match('/&(?!lt;)(?!gt;)(?!amp;)(?!quot;)(?!#039;)/i', $code)) {
+           #$pre_replaced_code = str_replace('"', '"', $code);
+           #$replaced_code = $matches[1].str_replace("'", ''', $pre_replaced_code).$matches[3];
+       #} else {
+           $replaced_code = preg_replace('/&(#x?[0-9a-fA-F]+|[a-zA-Z]+);/', '[!--{{{$1}}}--]', $code);
+           $replaced_code = htmlspecialchars($replaced_code, ENT_QUOTES, 'UTF-8');
+           $replaced_code = preg_replace('/\[!--{{{(#x?[0-9a-fA-F]+|[a-zA-Z]+)}}}--\]/', '\&$1;', $replaced_code);
+           $replaced_code = $matches[1].$replaced_code.$matches[3];
+       #}
    } else {
        $replaced_code = $matches[1].$code.$matches[3];
    }
@@ -901,7 +904,7 @@
                    }
                }
            }
-       } else {
+       } elseif ($theme !== 'None') {
            if ($wp_sh_lib_ver == "2.1" && $theme == "MDUltra") {
                wp_enqueue_style('core-'.$theme.$wp_sh_lib_ver, $wp_sh_plugin_url.$lib_dir.'/styles/shThemeDefault.css', false, $wp_sh_lib_ver);
            } else {
@@ -999,7 +1002,7 @@
        $quick_code = $wp_sh_setting_opt['quick_code'];
        $title = str_replace("'", "'", get_option('wp_sh_code_title'));
        $class_name = get_option('wp_sh_class_name');
-       if (strpos($wp_sh_class_name, "\"") || strpos($wp_sh_class_name, "'")) {
+       if (strpos($class_name, "\"") || strpos($class_name, "'")) {
            $class_name = "";
        }
        $collapse = $wp_sh_setting_opt['collapse'];
@@ -1045,7 +1048,7 @@
        $wp_sh_brush_files = get_option('wp_sh_brush_files');
        if ($wp_sh_lib_ver == "3.0" && $legacy_enable == 0) {
            echo "<script type=\"text/javascript\" src=\"".$wp_sh_plugin_url.$lib_dir."/scripts/shAutoloader.js?ver=".$wp_sh_lib_ver."\"></script>\n";
-           if ($wp_sh_brush_files[XML][3] == "true" || is_admin()) {
+           if ($wp_sh_brush_files['XML'][3] == "true" || is_admin()) {
                echo "<script type=\"text/javascript\" src=\"".$wp_sh_plugin_url.$lib_dir."/scripts/shBrushXml.js?ver=".$wp_sh_lib_ver."\"></script>\n";
            }
        } elseif ($wp_sh_lib_ver == "3.0" && $legacy_enable == 1) {
@@ -1060,7 +1063,7 @@
                    echo "<script type=\"text/javascript\" src=\"".$brush_file."?ver=".$wp_sh_lib_ver."\"></script>\n";
                }
            }
-           if (is_admin() && $wp_sh_brush_files[XML][3] == "false") {
+           if (is_admin() && $wp_sh_brush_files['XML'][3] == "false") {
                echo "<script type=\"text/javascript\" src=\"".$wp_sh_plugin_url.$lib_dir."/scripts/shBrushXml.js?ver=".$wp_sh_lib_ver."\"></script>\n";
            }
        } elseif ($wp_sh_lib_ver == "2.1") {
@@ -1075,10 +1078,10 @@
                    echo "<script type=\"text/javascript\" src=\"".$brush_file."?ver=".$wp_sh_lib_ver."\"></script>\n";
                }
            }
-           if (is_admin() && $wp_sh_brush_files[PHP][3] == "false") {
+           if (is_admin() && $wp_sh_brush_files['PHP'][3] == "false") {
                echo "<script type=\"text/javascript\" src=\"".$wp_sh_plugin_url.$lib_dir."/scripts/shBrushPhp.js?ver=".$wp_sh_lib_ver."\"></script>\n";
            }
-           if (is_admin() && $wp_sh_brush_files[XML][3] == "false") {
+           if (is_admin() && $wp_sh_brush_files['XML'][3] == "false") {
                echo "<script type=\"text/javascript\" src=\"".$wp_sh_plugin_url.$lib_dir."/scripts/shBrushXml.js?ver=".$wp_sh_lib_ver."\"></script>\n";
            }
            do_action('wpsh_brush_for_2'); // Action hook for developers
@@ -1261,4 +1264,4 @@
    include_once('wp-syntaxhighlighter-admin.php');
 }
 
-?>
\ No newline at end of file
+?>

HTML の実体参照を使えるようにする（568 行目）

標準ではソースコード中に & や 𠮷¹ といった表記があった場合、これをエスケープしてしまいます。

追加面の漢字を使うときにこれでは困るので、このエスケープを行わないようにしました。ちょっとここの実装は自信がありません。

テーマが ‘None’ のときにデフォルトのテーマを使わない（901 行目）

設定画面でテーマを ‘None’ に設定しているのにデフォルトテーマの CSS が読み込まれてしまうバグ？仕様？があったので修正しました。

その他

変数が未定義だったりして（？）エラーを吐いていたので修正しました。

Synatxhighlighter にも Solarized を

以前記事にも書きましたが、僕は Solarized が大好きです。Syntaxhighlighter にもこれを実装してみました。

これは直接 WordPress と関係ないので、別記事にまとめました。

Syntaxhighlighter にも Solarized を！（あと Gist も） | blog.delphinus.dev
https://blog.delphinus.dev/2013/01/solarized-on-syntaxhighlighter.html

Solarized 化も含め、ブログの引っ越しにはこの辺りが一番時間を食ったかも……。あんまり生産的じゃないですね……。

「𠮷」いわゆる「つちよし」 ↩

blog.delphinus.dev

WordPress で Syntaxhighlighter を使う

WP Syntaxhighlighter プラグイン

`wp-sh-shortcode.php` の差分

`wp-syntaxhighlighter.php` の差分

Synatxhighlighter にも Solarized を

関連

コメントを残すコメントをキャンセル

WP Syntaxhighlighter プラグイン

wp-sh-shortcode.php の差分

wp-syntaxhighlighter.php の差分

Synatxhighlighter にも Solarized を

関連

コメントを残す コメントをキャンセル

`wp-sh-shortcode.php` の差分

`wp-syntaxhighlighter.php` の差分

コメントを残すコメントをキャンセル