一般にプログラムのコードに色付け・整形して綺麗に表示する機能をシンタックスハイライトなどと呼びますが、こういった機能を提供しているプラグインやライブラリは探せば数多く用意されています。その中からWordpressプラグインの「SyntaxHighlighter Evolved」を当記事では採用しています、実績数と取っつきやすさが採用を決めた大きな理由です。(あれこれ試すのが面倒だったのもあります..😓)
ですが、しばらく使ってきて配色が気になってきました。
「SyntaxHighlighter Evolved」ではあらかじめ７種類のカラーテーマからお好みのテーマを選ぶことができ(2020/2時点)、その中からDark系統の「Midnight」がいいかなと選択してたのですが、青みがかっている表示色を変えたい欲求が沸々と沸き上がってきました💨
テーマ「Midnight」は落ち着いた良い配色だと思います。しかし、普段使っているSublimeText エディタの「Monokari」という名前のカラースキーマで表示される配色に慣れてしまっているからなのでしょう、他に用意されているテーマカラーもしっくりこなかったので、ならば自分でテーマをカスタマイズしてやろうと思い立ちその時調べた方法を投稿します。
自作のテーマファイルの作成
カスタマイズと言ってますが、今回は新しく自分好みのテーマを作成してみることにします。まずはどういう配色にしたいのかを設定したテーマファイルを作成しましょう。ここでは、/子テーマフォルダ/my-syntaxhighlighter/styles/ フォルダを作成しファイル名を my_theme1.css にしました(名前、ディレクトリ構成は任意で構いません)。何もないところから設定を起こすもの大変なので、プラグインにあらかじめ用意されている以下のテーマファイルをひな型としました。
/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shThemeMidnight.css
ひな型とするテーマファイルの内容をすべて自作のテーマファイルにコピーしてから編集を行います。
色の確認・調整は「TmTheme Editor」というWebアプリが便利です。
Galleryからベースとなるテーマを選ぶとそのテーマで使われている配色が表示されるのでテーマファイルで使われている箇所に一致する色を合わせていきます。
使われている箇所がテーマファイルのどこに対応しているのかあやふやなところもありましたが、見よう見まねで作成したテーマファイルは次のような内容になりました(一部個人的な好みが含まれています)。
/**
* SyntaxHighlighter カスタムテーマ
* shThemeMidnight.css テーマファイルをベースとし
* Monokai カラーテーマに近いものを再現しています。
*/
/** 背景 */
.syntaxhighlighter {
background-color: #272822 !important;
}
/** 背景奇数行 */
.syntaxhighlighter .line.alt1 {
background-color: #272822 !important;
}
/** 背景偶数行 */
.syntaxhighlighter .line.alt2 {
background-color: #272822 !important;
}
/** ハイライト背景 (Monokaiなら#3E3D32だが若干明るめに変更) */
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
/* background-color: #3E3D32 !important; */
background-color: #3D3A14 !important;
}
/** ハイライト行番号 */
.syntaxhighlighter .line.highlighted.number {
color: #75715E !important;
}
/** タイトル */
.syntaxhighlighter table caption {
color: #F92672 !important;
}
/** 行番号 */
.syntaxhighlighter .gutter {
color: #75715E !important;
}
/** 行番号右の縦線 */
.syntaxhighlighter .gutter .line {
border-right: 3px solid #75715E !important;
}
/** 行番号ハイライト (ハイライトと同じ配色) */
.syntaxhighlighter .gutter .line.highlighted {
background-color: #3D3A14 !important;
color: #75715E !important;
}
.syntaxhighlighter.printing .line .content {
border: none !important;
}
/** 折りたたんだ状態 */
.syntaxhighlighter.collapsed {
overflow: visible !important;
}
/** ver2 のツールバー */
.syntaxhighlighter.collapsed .toolbar {
color: #428bdd !important;
background: black !important;
border: 1px solid #435a5f !important;
}
.syntaxhighlighter.collapsed .toolbar a {
color: #428bdd !important;
}
.syntaxhighlighter.collapsed .toolbar a:hover {
color: #1dc116 !important;
}
.syntaxhighlighter .toolbar {
color: #d1edff !important;
background: #435a5f !important;
border: none !important;
}
.syntaxhighlighter .toolbar a {
color: #d1edff !important;
}
.syntaxhighlighter .toolbar a:hover {
color: #8aa6c1 !important;
}
/** 一般文字 */
.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
color: #F8F8F2 !important;
}
/** コメント文字 (Monokaiなら#75715Eだが若干明るめに変更) */
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
/* color: #75715E !important; */
color: #9C9B8B !important;
}
/** string文字 */
.syntaxhighlighter .string, .syntaxhighlighter .string a {
color: #E6DB74 !important;
}
/** keyword文字 */
.syntaxhighlighter .keyword {
color: #F92672 !important;
}
/** preprocessor文字 (keywordと同じ配色) */
.syntaxhighlighter .preprocessor {
color: #8aa6c1 !important;
}
/** variable文字 */
.syntaxhighlighter .variable {
color: #F8F8F2 !important;
}
/** value文字 (stringと同じ配色) */
.syntaxhighlighter .value {
color: #E6DB74 !important;
}
/** functions文字 */
.syntaxhighlighter .functions {
color: #66D9EF !important;
}
/** constants文字 */
.syntaxhighlighter .constants {
color: #66D9EF !important;
}
/** script文字 */
.syntaxhighlighter .script {
font-weight: bold !important;
color: #F8F8F2 !important;
background-color: none !important;
}
/** propertyなどの文字 */
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
color: #A6E22E !important;
}
.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
color: white !important;
}
.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
color: #ffaa3e !important;
}
functions.phpの修正
子テーマのfunctions.phpに、以下のコードを追記します。
/*-------------------------------------------*/
/* SyntaxHighlighter Evolved プラグイン
/* カスタムテーマ追加
/*-------------------------------------------*/
add_action( 'wp_enqueue_scripts', 'add_syntaxhighlighter_my_theme1');
add_action( 'admin_enqueue_scripts', 'add_syntaxhighlighter_my_theme1');
function add_syntaxhighlighter_my_theme1(){
wp_register_style(
'syntaxhighlighter-theme-my_theme1',
get_stylesheet_directory_uri() . '/my-syntaxhighlighter/styles/my_theme1.css' ,
array( 'syntaxhighlighter-core' ),
'1.0.1'
);
}
add_filter( 'syntaxhighlighter_themes', function( $themes ) {
$themes['my_theme1'] = 'マイテーマ１';
return $themes;
});
コード内の２カ所
- syntaxhighlighter-theme-自作テーマ名
- $themes[‘自作テーマ名’]
にある自作テーマ名(ここではmy_theme1)は一致させてください。
ディレクトリのパスは環境に合わせます。
‘マイテーマ１’ のところは管理画面でテーマ選択のリストに表示される名前になります。
追記
SyntaxHighlighter開発者さんのブログ記事
参考にさせていただきましたコードでは、WordPress 5.2, SyntaxHighlighter Evolved 3.5.1 では以下のNoticeが発生しました。
「PHP Notice: wp_register_style が誤って呼び出されました。スクリプトおよびスタイルはwp_enqueue_scripts、admin_enqueue_scripts、login_enqueue_scripts フック以降のみに登録・キュー追加できます。」
Noticeを回避するため wp_enqueue_scripts, admin_enqueue_scripts をフックするよう修正しています。尚、wp_enqueue_scripts だけで投稿記事にテーマを適用できますが、admin_enqueue_scripts は管理画面のプレビュー表示にテーマを適用させるために必要です。
「SyntaxHighlighter」設定画面
管理画面メニュー「設定」-「SyntaxHighlighter」ページを開くと
作成したテーマが選択できるようになっているのでそれを選んで「変更を保存」をクリックします。
ではプレビューで表示がどう変化したか確認してみましょう。
おぉ！馴染みのある表示に近い仕上がりになりました。素晴らしい✨
えっ、(元)のほうが良かった？いえいえ、満足しているので水を差さないでください💧。これ以上は手間暇かける気にはなりませんが、こだわりある方なら独創的なテーマも作れるのではないでしょうか。
- ABOUT ME
