WordPress 「SyntaxHighlighter Evolved」プラグインのテーマの作成

配色が気になる

一般にプログラムのコードに色付け・整形して綺麗に表示する機能をシンタックスハイライトなどと呼びますが、こういった機能を提供しているプラグインやライブラリは探せば数多く用意されています。その中からWordpressプラグインの「SyntaxHighlighter Evolved」を当記事では採用しています、実績数と取っつきやすさが採用を決めた大きな理由です。(あれこれ試すのが面倒だったのもあります..😓)

ですが、しばらく使ってきて配色が気になってきました。

「SyntaxHighlighter Evolved」ではあらかじめ７種類のカラーテーマからお好みのテーマを選ぶことができ(2020/2時点)、その中からDark系統の「Midnight」がいいかなと選択してたのですが、青みがかっている表示色を変えたい欲求が沸々と沸き上がってきました💨

テーマ「Midnight」は落ち着いた良い配色だと思います。しかし、普段使っているSublimeText エディタの「Monokari」という名前のカラースキーマで表示される配色に慣れてしまっているからなのでしょう、他に用意されているテーマカラーもしっくりこなかったので、ならば自分でテーマをカスタマイズしてやろうと思い立ちその時調べた方法を投稿します。

How To

自作のテーマファイルの作成

カスタマイズと言ってますが、今回は新しく自分好みのテーマを作成してみることにします。まずはどういう配色にしたいのかを設定したテーマファイルを作成しましょう。ここでは、/子テーマフォルダ/my-syntaxhighlighter/styles/ フォルダを作成しファイル名を my_theme1.css にしました(名前、ディレクトリ構成は任意で構いません)。何もないところから設定を起こすもの大変なので、プラグインにあらかじめ用意されている以下のテーマファイルをひな型としました。
/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shThemeMidnight.css

ひな型とするテーマファイルの内容をすべて自作のテーマファイルにコピーしてから編集を行います。

色の確認・調整は「TmTheme Editor」というWebアプリが便利です。

tmtheme-editor.herokuapp.com

TmThemeEditor

https://tmtheme-editor.herokuapp.com

TmTheme Editor is the a visual color-scheme/theme editor for Sublime Text and Textmate editors.

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開発者さんのブログ記事

Alex's Blog

Adding A New Theme

https://alex.blog/wordpress-plugins/syntaxhighlighter/adding-a-new-theme/

To add a new theme to SyntaxHighlighter Evolved, you must first register the stylesheet with WordPress: Note we’re using wp_register_style() and not wp_enqueue_style(). Parameters details: Ch…

参考にさせていただきましたコードでは、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 は管理画面のプレビュー表示にテーマを適用させるために必要です。