ついにCrayon Syntax Highlighterプラグイン利用とハイライト表示をやめる

　ようやくプラグインCrayon Syntax Highlighterの利用をやめる踏ん切りがつきました。代替プラグインは無しでハイライト表示もやめることにしました。

　新しいエディターのGutenbergを使って記事を書くことにだいぶ慣れてきて（この記事もGutenbergで書いています。）、今後できるだけクラシックブロックは使わないようにしていこうと思っています。私の使い方では、脱クラシックブロックの最大の障壁が、このプラグインでした。

　プラグインを停止するにあたって、過去のハイライト表示させていたpreタグをどうするかという部分の方針が決まったら、あっさりとプラグイン停止⇒削除ができてスッキリしました

ハイライト表示不要論

　そもそも、なぜハイライト表示系のプラグインを利用しているのかという自問に行きつきました。WordPressを使い始めたときから、必須プラグイン〇個とかいう記事を見たままインストールして利用を続けていました。ハイライト表示系のプラグインには表示トラブルや他プラグインとの競合などに悩まされながらも、やめるにやめられず現在まで利用していました。

　私の場合は、それほど高度なことをやるわけでもなく、たまにコードやコマンドを含んだ記事を書きたいというだけです。表示が崩れず、改行やスペースがそのまま表示されて、ぱっと見で文章と区別がつくアクセントがある表示であれば十分なのです。ハイライトさせたいという欲求は最初からなかったのです。

　それだったらGutenbergのブロックにコードブロックがあるし（いままでのエディタでもありましたが）それを使えばいいのではと考えるようになりました。ただしCrayon Syntax Highlighterが有効になっていたら、コードブロックはpreタグなのでCrayon表示になってしまうので、プラグイン停止を考えるようになりました。

　もう3年近く更新されていないプラグインなので、クラッシックブロックで<>ボタンを押しても反応しなくなっていたというのも止める理由の後押しになりました。

Crayonのpreタグだけ装飾

過去記事のCrayonのpreタグだけを、cssで装飾することにしました。

　以下のcssをテーマカスタマイザーの追加CSSに保存するか、子テーマのstyle.cssに追記します。私は、カスタマイザーの追加CSSに一旦貼り付けてライブビューで確認してから子テーマのstyle.cssに保存しています。

　私の場合は、LanguageをDefaultでしか選んでいませんでしたが、例えばapacheやMySQLなどLanguageで選んだことがある例を出しています。Languageで選択した分だけセレクターの数を増やします。

　背景は薄い色を指定して、周りをグレーの枠線、フォントはCrayonでデフォルトだったmonacoにしました。

pre.lang\:default,
pre.lang\:apache,
pre.lang\:mysql {
    font-family: monaco;
    background-color:#f5f5dc;
    color:#000;
    padding:1em;
    border: 1px solid #808080;
}

　コマンドなどの場合は、Themeを Dark Terminal にして背景を黒にすることが多かったです。そこだけは同じように背景が黒で文字が白にしました。

pre.lang\:default.theme\:dark-terminal,
pre.lang\:apache.theme\:dark-terminal,
pre.lang\:mysql.theme\:dark-terminal {
    background-color:#000;
    color:#fff;
}

　私はinlineにチェックを入れて、文章中に一行のCrayonのタグを挿入することが多かったです。このinlineにチェックを入れた場合はpreタグじゃなくspanタグが挿入されていました。なんとなく文字装飾用として多用していただけなので、丸角の文字背景になる装飾にしました。（この段落にわざとそれを入れています。）

span.crayon-inline {
    font-family:monaco;
    background-color:#f5f5dc;
    border-radius: 6px;
    padding: 0 0.5em;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

ショートコードの場合だけ手動修正

　上記cssで過去記事をひとつずつ修正することなく行けそうでしたが、Crayonタグでショートコードを囲っていた箇所だけは、そのショートコードが機能しだしてしまい表示がおかしくなっていました。

　これは、ショートコードの [shortcode]を、[[shortcode]] というように括弧を2重にすることで記事中に文字として表示できるようになりました。

　だいたい前後に「ショートコード」という単語を使っているはずなのでサイト内検索でショートコードという文字で検索すると2記事ほどあり、手入力で修正しました。

プラグイン削除

　以上で、 Crayon Syntax Highlighter プラグインを停止して削除することができました。行数表示やタイトル表示などの設定が消えてしまいましたが大した問題ではありません。ページの表示速度がなんとなく早くなった気がします。

　今後は、ブロックエディタでコードブロックを選んでいきますが、それにはこの記事のcssは反映されないので安心です。コードブロックは現在テーマデフォルトのcssになっていますので、それはまた別にcssで装飾すればよいだけです。