WordPress

GutenbergでEnlighter v4を使う

以前にWordPressでソースコード表示用のEnlighterを使う方法を紹介しましたが、利用するエディタをClassic EditorからGutenbergに切り替えたこともあり、EnlighterをGutenbergを前提とした環境に変更してみました。

要点

流れとしては、次の手順でWordPressにEnlighter 4.0-BETA1を導入します。

  1. GitHubからEnlighter 4.0-BETA1のtarファイルをダウンロード
  2. tarファイルをwp-content/plugins/enlighterに展開してアップロード
  3. EnlighterのOptionでExternal themesを有効にする(独自テーマを使う場合)
  4. 独自テーマは各テーマフォルダ配下のenlighterフォルダに格納する
    例:wp-content/themes/jin/enlighter/infohub.css

WordPress環境の前提

今回は以下の環境を前提にしています。

  • WordPress 5.3.2 + JIN
  • Enlighter 4.0-BETA1(2020年3月時点で最新のBETA版)

Enlighter 4.0-BETA1の制約など

将来のバージョンでは変わるかもしれませんが、Enlighter 4.0-BETA1ではGutenbergとの組み合わせで以下のような制約があります。

インラインコードが使えない

Gutenbergのビジュアルエディタを使っている場合は、文章の途中にインラインでコードを埋め込むことができなくなっています。(クラシックエディタなどを使えば可能)

仕方ないので、インラインコードについてはGutenbergのインラインコードを使うことにしました。Enlighterのようにハイライト表示などは行えませんが、それ以外はスタイルさえきちんと設定すれば、標準のインラインコードでもそれなりに使えると思います。

MS-DOSのフォーマッタが無い

これはGutenbergとは関係なく、Enlighter 4.0-BETA1に起因する内容ですが、MS-DOSのコードフォーマッタがなくなっています。PowerShell用のフォーマッタは用意されていますが、MS-DOSの内容とは異なるので期待したとおりのハイライト表示にはなりません。

旧バージョンのEnlighterでもMS-DOSのフォーマッタは後から追加されたようなので、Enlighter 4.0の正式版になれば、MS-DOSのスタイルも正式対応されるかもしれません。

テーマのカスタマイズ機能は未実装

Enlighter用のテーマカラーを独自に編集する機能は、Enlighter 4.0-BETA1では未実装のようです。プラグインの設定ページ自体は存在していますが、中身が未実装なので画面からのカスタマイズは現時点ではできません。(独自テーマのcssを作って、独自のスタイルを反映させることは可能)

Enlighter 4.0-BETA1の導入

2020年3月時点では、Enlighter 4.0-BETA1が最新バージョンになります。

最新バージョンはベータ版なので、WordPressのプラグイン検索からは導入できません。GitHubで公開してあるファイルを手動でダウンロードしてインストールする必要があります。

Enlighter 4.0-BETA1は開発途中のベータ版になります。
未実装の機能や不具合などが含まれている可能性もあるため、通常の利用であれば安定した旧バージョンでの使用をお勧めします。

WordPressようにパッケージされたEnlighter 4.0-BETA1はGitHubのReleaseページからダウンロードします。いくつかファイルがありますが、enlighter-beta.tarをダウンロードします。

ダウンロードしたtarファイルの内容を、WordPressのwp-content/plugins/enlighterフォルダ配下に展開してサーバにアップロードします。(旧バージョンのEnlighterを導入している場合は上書きせずに、新しくenlighterフォルダを作成し直すことをおすすめします)

これでWordPressのプラグインから、Enlighter 4.0-BETA1が認識されます。

独自スタイルの適用

Enlighterにはbuilid-inのスタイルが用意されていますが、独自にカスタマイズしたテーマを利用したい場合もあります。この場合、cssファイルを使って独自のテーマを作成できます。

Enlighterでは独自テーマのcssファイルを検索する機能が実装されているので、決められたフォルダ配下にcssファイルを格納すれば独自テーマとして認識させることができます。
独自テーマのcssファイルは、WordPressで利用しているテーマ(JINなど)フォルダ配下にあるenlighterフォルダから読み込むようになります。

WordPressのテーマにJINを利用している場合には、wp-content/themes/jin/フォルダにJIN用のテーマが格納されているので、enlighter用の独自cssはwp-content/themes/jin/enligter/配下に格納します。(最初はenlighterフォルダは存在しないと思うので、手動で作成してください)

スタイル名はcssファイル名が使われるので、例えばinfohub.cssというファイルを格納すれば、Enlighterのテーマ名はinfohubとなります。

独自スタイルを読み込むための設定

独自cssファイルを格納してもデフォルトでは読み込まれない設定になっているため、WordPressのEnlighter設定のOptionから、External themesを選択して外部テーマを読み込むようにします。

独自スタイルにつけられるクラス名

Enlighterで生成されるHTMLコードには、テーマ名の入ったクラス名が設定されます。クラス名の命名ルールはenlighter-t-テーマ名になります。

例えば、infohub.cssという独自テーマを作成した場合、Enlighterのテーマ名はinfohubとなり、作成されたHTMLのスタイルにはenlighter-t-infohubというクラスが指定されます。
そのため、独自テーマのcssファイルにも、このクラス名を指定するようにします。

独自テーマのサンプル

独自に作成したEnlighter用のテーマファイルinfohub.cssをサンプルとして載せておきます。細かいスタイルについては未調整ですが、独自スタイルのサンプルとして参考にしてみてください。

/*----------------------------------------------------------------*/
/* Enlighter Custom Theme - By infohub.cc */
/*----------------------------------------------------------------*/

/* Google Fonts から "Source Code Pro" を読み込み */
/* 400, 600, 700 */
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

/* 変数定義 */
:root {

  /* Button */
  --btn-font-size: 12px;
  --btn-foreground: #ccc;
  --btn-background: rgba(255, 255, 255, 0.2);
  --btn-hover-foreground: #fff;
  --btn-hover-background: #00acc1;

  --line-number-font-size: 12px;
  --line-number-foreground: #999;
  --line-number-background: transparent;
  --line-number-border: 1px solid #888;

  --group-btn-font-size: 13px;
  --group-btn-foreground: #fff;
  --group-btn-background: rgba(255,255,255,0.3);
  --group-btn-active-foreground: #000;
  --group-btn-active-background: #eceff1;

  /* Source code */
  --code-font-family: "Source Code Pro", "Ricty", "Noto Sans Japanese", "Meiryo", "Courier New", Courier, monospace;
  --code-font-size: 13px;
  
  --code-foreground: #eee;
  --code-background: #282c34;
  --code-hover: rgba(255, 255, 255, 0.05);
  --code-highlight: rgba(255,255,255,0.1);
  --code-highlight-hover: rgba(255,255,255,0.15);
  
  /* 鮮やかさ220 前後*/
  --code-bracket: #fff;
  --code-comment: #27ad27;
  --code-keyword: #f48a93;
  --code-class: #5ce0f8;
  --code-include: #5caaf8;
  --code-string: #efaf50;
  --code-number: #bfb;

  --code-method: #fff0bb;
  --code-kw-for: #fbf;
  
  /* Material color (400) */
  --mc-red: #ef5350;
  --mc-pink: #EC407A;
  --mc-purple: #8E24AA;
  --mc-deep-purple: #7E57C2;
  --mc-indigo: #5C6BC0;
  --mc-blue: #42A5F5;
  --mc-light-blue: #29B6F6;
  --mc-cyan: #26C6DA;
  --mc-teal: #26A69A;
  --mc-green: #66BB6A;
  --mc-light-green: #9CCC65;
  --mc-lime: #D4E157;
  --mc-yellow: #FFEE58;
  --mc-amber: #FFCA28;
  --mc-orange: #FFA726;
  --mc-deep-orange: #FF7043;
  --mc-brown: #8D6E63;
  --mc-grey: #BDBDBD;
  --mc-blue-grey: #78909C;
  
}



/* 基本設定 */
.enlighter-t-infohub {
  font-family: var(--code-font-family)!important;
  font-size: var(--code-font-size)!important;
  /* font-weight: 400; */ /**400だと日本語フォントが太くなるので200*/
  letter-spacing: normal;
  color: var(--code-foreground);
  background-color: var(--code-background);
  padding: 16px 0px 16px 0px!important;
  /*border: 1px solid #999;*/
  border-radius: 8px;
  margin: 0px 0px 32px 0px!important;
}


/*----------------------------------------------------------------*/
/* ツールバー設定 */
/*----------------------------------------------------------------*/
.enlighter-t-infohub .enlighter-toolbar {
  top: 10px;
  right: 10px
}
.enlighter-t-infohub .enlighter-btn {
  background-image: none;
  background-color: transparent;
  /* color: #818a91; */
  font-family: var(--code-font-family)!important;
  font-size: var(--btn-font-size)!important;
  padding: 2px 16px 2px 16px!important;
  margin: 0 3px 0 3px!important;
  border: none;
  border-radius: 16px;
}
/* ツールバーのボタンのMouseOver */
.enlighter-t-infohub .enlighter-btn:hover {
  color: var(--btn-hover-foreground)!important;
  background-color: var(--btn-hover-background)!important;
}
/* Raw button. */
.enlighter-t-infohub .enlighter-toolbar .enlighter-btn-raw {
  background-image: none!important;
  background-color: var(--btn-background); /* #e7e7e7; */
  color: var(--btn-foreground);
  border: 0px;
  display: none;
}
.enlighter-t-infohub .enlighter-toolbar .enlighter-btn-raw:after {
  content: 'Raw'
}
/* Copy button. */
.enlighter-t-infohub .enlighter-toolbar .enlighter-btn-copy {
  background-image: none!important;
  background-color: var(--btn-background); /* #e7e7e7; */
  color: var(--btn-foreground);
  border: 0px;
}
.enlighter-t-infohub .enlighter-toolbar .enlighter-btn-copy:after {
  content: 'Copy'
}
/* Window button. */
.enlighter-t-infohub .enlighter-toolbar .enlighter-btn-window {
  background-image: none!important;
  background-color: var(--btn-background); /* #e7e7e7; */
  color: var(--btn-foreground);
  border: 0px;
}
.enlighter-t-infohub .enlighter-toolbar .enlighter-btn-window:after {
  content: 'Open'
}
/* EnlighterJS button. */
.enlighter-t-infohub .enlighter-toolbar .enlighter-btn-website {
  background-image: none!important;
  background-color: var(--btn-background); /* #e7e7e7; */
  color: var(--btn-foreground);
  border: 0px;
  display: none;
}
.enlighter-t-infohub .enlighter-toolbar .enlighter-btn-website:after {
  content: 'EnlighterJS'
}


/*----------------------------------------------------------------*/
/* インライン */
/*----------------------------------------------------------------*/
.enlighter-t-infohub.enlighter-v-inline {
  background-color: var(--code-background);
  border: none;
  border-radius: 5px;
  padding: 2px 4px!important;
  margin: 0px 1px!important;
}



/*----------------------------------------------------------------*/
/* コードグループ */
/*----------------------------------------------------------------*/

/* コードグループのボタンを配置する行 */
.enlighter-t-infohub.enlighter-v-codegroup .enlighter-codegroup-switch {
  padding: 0px 16px 20px 16px;
}
/* コードグループ(未選択) */
.enlighter-t-infohub.enlighter-v-codegroup .enlighter-codegroup-switch .enlighter-btn {
  color: var(--group-btn-foreground)!important;
  background-color: var(--group-btn-background);
  font-size: var(--group-btn-font-size);
  font-weight: 400;
  border: none;
  border-radius: 16px;
  padding: 3px 8px 3px 8px;
}
.enlighter-t-infohub.enlighter-v-codegroup .enlighter-codegroup-switch .enlighter-btn:hover{
  color: inherit; /*#000;*/
}
/* コードグループ(選択) */
.enlighter-t-infohub.enlighter-v-codegroup .enlighter-codegroup-switch .enlighter-btn.enlighter-active {
  color: var(--group-btn-active-foreground)!important;
  background-color: var(--group-btn-active-background);
}
.enlighter-t-infohub.enlighter-v-codegroup .enlighter-codegroup-switch .enlighter-btn.enlighter-active:hover{
  color: inherit; /*#000;*/
}




/*----------------------------------------------------------------*/

/* マウスを載せたときのハイライト */
.enlighter-t-infohub.enlighter-hover div.enlighter > div:hover {
  background-color: var(--code-hover);
}

.enlighter-t-infohub .enlighter-raw {
  font-size: var(--code-font-size)!important;
  color: var(--code-foreground);
  background-color: var(--code-background);
  line-height: 20px;
  padding: 28px 25px 30px 79px
}

/* 行番号 */
.enlighter-t-infohub div.enlighter > div {
  padding: 1px 5px 1px 8px;
  line-height: 16px;
  color: var(--line-number-foreground);
  background-color: var(--line-number-background);
}
.enlighter-t-infohub div.enlighter > div:FIRST-CHILD {
  padding-top: 5px
}
.enlighter-t-infohub div.enlighter > div:LAST-CHILD {
  padding-bottom: 5px
}
.enlighter-t-infohub div.enlighter > div:AFTER {
  content: ' '
}
/* 強調表示の行 */
.enlighter-t-infohub div.enlighter > div.enlighter-special {
  background-color: var(--code-highlight);
}
.enlighter-t-infohub div.enlighter > div.enlighter-special:hover {
  background-color: var(--code-highlight-hover);
}


/* 各行番号 */
.enlighter-t-infohub.enlighter-linenumbers div.enlighter > div::before {
  font-size: var(--line-number-font-size);
  padding: 1px 5px 1px 0;
  content: counter(enlighter,decimal) "";
  min-width: 40px;
  width: 40px;
  border-right: var(--line-number-border);
  background-color: var(--line-number-background);
}
.enlighter-t-infohub .enlighter span {
  font-size: var(--code-font-size)!important;
}
.enlighter-t-infohub .enlighter-text {
  color: var(--code-foreground)
}

/* Comments */
.enlighter-t-infohub .enlighter-c0 {
  color: var(--code-comment);
}
.enlighter-t-infohub .enlighter-c1 {
  color: var(--code-comment);
}
.enlighter-t-infohub .enlighter-c2 {
  color: var(--code-comment);
}
.enlighter-t-infohub .enlighter-c9 {
  color: var(--code-comment);
}

/* Keywords */
.enlighter-t-infohub .enlighter-k0 { /* classなど */
  color: var(--code-class);
}
.enlighter-t-infohub .enlighter-k1 { /* for,elseなど */
  color: var(--code-kw-for);
}
.enlighter-t-infohub .enlighter-k2 {
  color: var(--code-class);
}
.enlighter-t-infohub .enlighter-k3 {
  color: var(--code-class);
}
.enlighter-t-infohub .enlighter-k4 { /* #includeなど */
  color: var(--code-include);
}
.enlighter-t-infohub .enlighter-k5 {
  color: var(--code-class);
}
.enlighter-t-infohub .enlighter-k6 {
  color: var(--code-class);
}
.enlighter-t-infohub .enlighter-k7 { /* PHPの変数など */
  color: var(--code-class);
  font-style: italic;
}
.enlighter-t-infohub .enlighter-k8 {
  color: var(--code-class);
}
.enlighter-t-infohub .enlighter-k9 {
  color: var(--code-class);
}
.enlighter-t-infohub .enlighter-k10 {
  color: var(--code-class);
}

/* Expression */
.enlighter-t-infohub .enlighter-e0 {
  color: var(--mc-blue);
}
.enlighter-t-infohub .enlighter-e1 {
  color: var(--mc-blue);
}
.enlighter-t-infohub .enlighter-e2 {
  color: var(--mc-cyan);
}
.enlighter-t-infohub .enlighter-e3 {
  color: var(--mc-blue);
}
.enlighter-t-infohub .enlighter-e4 {
  color: var(--mc-blue);
}

/* Strings */
.enlighter-t-infohub .enlighter-s0 {
  color: var(--code-string);
}
.enlighter-t-infohub .enlighter-s1 {
  color: var(--code-string);
}
.enlighter-t-infohub .enlighter-s2 {
  color: var(--code-string);
}
.enlighter-t-infohub .enlighter-s3 {
  color: var(--code-string);
}
.enlighter-t-infohub .enlighter-s4 {
  color: var(--code-string);
}
.enlighter-t-infohub .enlighter-s5 {
  color: var(--code-string);
}

/* Number */
.enlighter-t-infohub .enlighter-n0 {
  color: var(--code-number);
}
.enlighter-t-infohub .enlighter-n1 {
  color: var(--code-number);
}
.enlighter-t-infohub .enlighter-n2 {
  color: var(--code-number);
}
.enlighter-t-infohub .enlighter-n3 {
  color: var(--code-number);
}
.enlighter-t-infohub .enlighter-n4 {
  color: var(--code-number);
}
.enlighter-t-infohub .enlighter-n5 {
  color: var(--code-number);
}

/* Methods and commands */
.enlighter-t-infohub .enlighter-m0 { /* 引数無しメソッド? */
  color: var(--code-method);
}
.enlighter-t-infohub .enlighter-m1 {
  color: var(--code-keyword);
}
.enlighter-t-infohub .enlighter-m2 {
  color: var(--code-keyword);
}
.enlighter-t-infohub .enlighter-m3 { /* 引数ありメソッド? */
  color: var(--code-method);
}

/* Symbols */
.enlighter-t-infohub .enlighter-g0 {
  color: var(--code-class);
}
.enlighter-t-infohub .enlighter-g1 {
  color: var(--code-bracket);
}

/* Markdown */
.enlighter-t-infohub .enlighter-t0 {
  color: var(--mc-grey);
}
.enlighter-t-infohub .enlighter-t1 {
  color: var(--mc-red);
  font-weight: 600
}
.enlighter-t-infohub .enlighter-t2 {
  color: var(--mc-red);
  font-weight: 600
}
.enlighter-t-infohub .enlighter-t3 {
  color: var(--mc-blue);
}
.enlighter-t-infohub .enlighter-t4 {
  color: var(--mc-teal);
}
.enlighter-t-infohub .enlighter-t5 {
  color: var(--mc-teal);
}
.enlighter-t-infohub .enlighter-t6 {
  color: var(--mc-orange);
}
.enlighter-t-infohub .enlighter-t7 {
  color: var(--mc-grey);
  font-weight: 600
}
.enlighter-t-infohub .enlighter-t8 {
  color: var(--mc-grey);
}

/* XML */
.enlighter-t-infohub .enlighter-x1 {
  color: var(--mc-blue);
}
.enlighter-t-infohub .enlighter-x2 {
  color: var(--mc-light-blue);
}
.enlighter-t-infohub .enlighter-x10 {
  color: var(--mc-teal);
}
.enlighter-t-infohub .enlighter-x11 {
  color: var(--mc-teal);
}
.enlighter-t-infohub .enlighter-x12 { /* CSSの項目 */
  color: var(--mc-blue);
}
.enlighter-t-infohub .enlighter-x13 { /* CSSの値 */
  color: var(--mc-cyan);
}
.enlighter-t-infohub .enlighter-x14 { /* CSSの値 #rrggbb */
  color: var(--mc-cyan);
}
.enlighter-t-infohub .enlighter-x15 {
  color: var(--mc-cyan);
}