WPのSyntaxHighlighterプラグインをEvolvedからCrayonへ変更しました

2016/06/17
Web
WordPress

長らく使っていたSyntaxHighlighterの変更に踏み切りました。できるだけ過去記事に影響の少ない作業で移行したくて、あれこれやったメモです。プラグインの名称が長いので、以下「SyntaxHighlighter Evolved」を「SHEvolved」、「Crayon Syntax Highlighter」を「CrayonSH」と表記します。

SHEvolvedの不具合現象

過去記事を見ていたら、一部のコードが正常に表示されていないことに気がつきました。

こんな感じにコード+文章+コードがひとつのコードになっていたり。

[と]がエスケープされていたり。

ソースを見てみると、[を表す[が&#91;となっていたので、SHEvolvedが出力するときに2重にエスケープしちゃってるのかな、と、なんとなく。

公開時には綺麗に出力されているのですが、私、過去記事を何回も何回もしつこく更新する人間なので、そもそも合わなかったのかもしれないなー。

CrayonSHなら引き継げそう！

コードハイライターのプラグインを変更か…、ほぼブログ歴=SHEvolved歴で、コードが多すぎてとてもじゃないけどひとつずつ直すのはキツすぎる…！　今更変えるなんてできるのだろうかと調べてみたら、

CrayonSHはショートコード使えるんですね！！！

これなら[＊＊＊]～[/＊＊＊]で書いてある今まで通りのコードをそのまま使えるかもしれない…！　希望が見えてきた…！！

強調表示の書き方が、SHEvolvedは[＊＊＊ highlight="＊"]だったのが、CrayonSHは[＊＊＊ mark="＊"]になるみたいだけど、これならDBを置換してやればいけそう。その他のオプションは使ってなかったので未検証ですが、titleなんかはそのままいけるんじゃないかなという印象。

CrayonSHをインストール&ショートコード有効化

Crayon Syntax Highlighter — WordPress Plugins

プラグイン検索からインストールしてみる。コンフリクトを起こしちゃうと思うので、SHEvolvedを停止してからCrayonSHを有効化させます。

まずは[＊＊＊]～[/＊＊＊]で書いてある従来のコードがちゃんと表示されるように。とりあえずここだけチェック入れとけばコード表示できました！

強調部分の文字列を置換

強調設定を含むコードに関してはhighlight="＊"が認識されないので、コードとして表示はされているけど全て黒文字の状態です。

Search Regex — WordPress Plugins

こちらのプラグインを使ってhighlightをmarkへ変換します。

highlightという文字列が他で使われていたら危ないので、図のように頭に空白とイコール、ダブルクォーテーションまで含めたほうが安心です。その場合は置換するmarkに同じものを付加するのも忘れずに。

動作を軽く

CrayonSHは機能てんこもり！　そのため読み込みが遅いというデメリットも…。このブログではコードをメインコンテンツにしているつもりなので、コードが読みやすければ多少重くても致し方無いかな…、と思っているのですが、それでも出来るだけ軽くしたいところです。

さて、デフォルトだとマウスがちょっと触れただけでにょこっと現れる、このツールバー（と、スクロールバー）。

（個人的な感想です！）

このツールバー、すごいんですけどね。プレーンテキストで表示してくれたり、行番号をON/OFFしてくれたり、別窓で開いたりetc…！　ただ、SHEvolvedの頃からコードを直接選択&手動コピーで来たので、そのスタイルを貫こうと思いまして。というか、わたしのブログのようにひとつの記事に細かいコードがたくさんあるようなページだと、ウザいことこの上ないので…。。純粋にコードのみを読みやすく、それ以外の機能は極力削る形でいきたいと思います。

あと、投稿画面から使えるこの機能。

わたしはこれを使わない予定でして、今後も従来通りショートコードでゴリゴリ書いていきたいのです。<pre>タグも使わないでいけそうなので、このへんの機能もばっさりカットしていきたいと思います。

以下、個人的な設定メモ。

ツールバー

ツールバーは表示しない設定に。タイトルもつけてないのでここのチェックもそのうち外すかも。

行

好みの問題ですが、長いコードは折り返さずにスクロールバーが出たほうが好きなので、デフォルトで長いコードを折り返す（Wrap lines by default）チェックは外しました。

Enable line wrap togglingは、折り返しのON/OFFをツールバーからできるようにする設定だと思うのですが、ツールバーを非表示にしちゃうので、ここも外しました。

コード

必要最低限そうなものだけに。さわると動いちゃうのは気持ち悪いので、スクロールバーは常に表示で。

テーマを自分好みに

CrayonSHのテーマの多さもまたスゴイ。でも、こんなに用意されているのにも関わらず自分のブログに合わせてカスタマイズしたいというワガママw

ベーステーマを別名保存

一番シンプルそうな、Arduino Ideというテーマをベースにさせていただきます！　「Duplicate（複製）」ボタンを押して、

任意の名前をつけます。

すると、「Edit（編集）」ボタンが押せるようになりますので、ここからカスタマイズしていきます。

テーマエディタ

こんなテーマにしてみました！　以下、個人的な設定メモです。

Classicというテーマのフォント色を参考に、VB系出身なのでコメントアウトは緑系がいいなー、ステートメントは青系がいいなー、などなど変更。個人的な好みですが。

コードの大枠の部分。

コード部分の奇数・偶数行の背景色と、強調時の色。強調色も2色設定できてすごい。ブログに合わせて明るい黄緑系に。SHEvolvedの時もこんな感じの色でした。

わたしはnoneにしちゃいましたが、強調行を線で囲むこともできます。そういうテーマもありますね。

行数部分の背景&フォント色。背景色はコード部分と同じ色にしました。せっかく設定できるので、強調行のフォント色は他よりちょっと濃い目に。あとは一番上、行数とコードを分けるためにボーダーを入れました。

こんな感じです。一番右のスパナマークのところはツールバーに関する設定で、非表示にしてるので特に設定してません。

テーマエディタで手が届かないところ

ここまで来たらもうOKだと思うんですけど…！　もうちょっと気になる…！

このコードの大枠の中に、もうちょっとゆとりが欲しいのです…！　1行だけの時とか、けっこう窮屈に感じてしまうのです。でもここはもうテーマエディタでどうにもできそうになかったからなー、と思っていたら。

(*°ω°*)✧

＊＊＊/wp-contesnt/uploads/crayon-syntax-highlighter/themes/＊＊＊/＊＊＊.css という、新しく作成したテーマのCSSファイルが保存されてました。こいつをダウンロードして、

.crayon-theme-ateitexe {
	border-width: 1px !important;
	text-shadow: none !important;
	background: #fdfdfd !important;
	border-color: #ddd !important;
	border-style: solid !important;
	padding: 3px !important;
}

このようにテーマの大枠部分にpaddingを入れて上書きすると、