WordPress

WordPress JINでEnlighterを使ってソースコードを表示する方法

WordPressのテーマにJINを使用している場合に、Enlighterでソースコードを綺麗に表示する設定を載せておきます。

WordPressでソースコードを表示するプラグインとしてはSyntaxHilighterが有名ですが、WordPressのテーマにJINを使用しているとSyntaxHilighterが正しく動作しません。

JINでSyntaxHilighterを使えるようにする方法や、JINに内蔵されているSyntaxHilighterを利用する方法などもありますが、子テーマを使うとカスタマイズ設定がリセットされたり、内蔵のSyntaxHilighterは最低限の機能しか備えていない事などから、Enlighterを使う事にしました。

Enlighterの導入方法

WordPressの「プラグイン」から「新規追加」を選択して、「Enlighter」で検索すると「Enlighter – Customizable Syntax Highlighter」というプラグインが見つかると思うので、このプラグインを導入します。

Enlighter

Enlighterのスタイル設定

WordPressのテーマにJINを使用している場合、Enlighterの表示が以下のように崩れる場合があります。

JINでEnlighterを使ったときのデフォルト表示

Enlighter用の追加CSS

Enlighterの表示が崩れるのはJINで設定してあるスタイルの影響を受けている事が原因なので、以下のスタイルを「追加CSS」で追加することで解決できます。

スタイルを追加する機能は最初から用意されているので、WordPressの「外観 > カスタマイズ > 追加CSS」から追加CSSの編集画面を開き、以下のスタイルを追加します。スタイルを編集した後は、上部にある「公開」ボタンをクリックして、設定を反映させてください。

/* Enlighter 行番号表示 */
.EnlighterJS li {
    display: list-item !important;
}

/* Enlighter ソースの装飾を抑止(li) */
.EnlighterJSTabPane li:before,
.EnlighterJSTabPane li:after,
.EnlighterJS li:before,
.EnlighterJS li:after {
    content: initial !important;
}

Enlighterを正しく表示するためには上記の設定だけで良いのですが、私の場合は次のCSSを追加して、Enlighterの表示を更にカスタマイズしています。以下の追加設定は任意なので、好みに応じて設定してみてください。

/* Enlighter ソースコードの微調整 */
.EnlighterJS span {
    letter-spacing: 0.0em;
    font-size: 13px;
    /* font-sizeはEnlighterの設定からも変更可能 */
}

/* Enlighter TabPaneの枠 */
.EnlighterJSTabPane {
    border-radius: 6px 6px 0px 0px;
    border-color: #78909C;
}

/* Enlighter TabPaneの枠 */
.EnlighterJSTabPane .controls {
    border-radius: 6px 6px 0px 0px;
    border-color: #78909C;
}

.wpcustomEnlighterJSTabPane .wpcustomEnlighterJS {
    border-top-color: #B0BEC5;
}

/* Enlighter TabPaneのTab項目(未選択) */
.EnlighterJSTabPane .controls li {
    border-radius: 13px;
    border-color: #B0BEC5;
    margin: 0px 8px 0px 0px;
    color: #999999;
    background-color: #FFFFFF;
}

/* Enlighter TabPaneのTab項目(未選択:hover) */
.EnlighterJSTabPane .controls li:hover {
    border-color: #4FC3F7;
    color: #000000;
    background-color: #E7FBFF;
}

/* Enlighter TabPaneのTab項目(選択) */
.EnlighterJSTabPane .controls .selected {
    border-radius: 13px;
    border-color: #4FC3F7;
    margin: 0px 8px 0px 0px;
    color: #000000;
    background-color: #E1F5FE;
}

/* Enlighter TabPaneのTab項目(選択:hover) */
.EnlighterJSTabPane .controls .selected:hover {
    border-color: #29B6F6;
    background-color: #B3E5FC;
}

/* Enlighterコードの枠 */
ol.EnlighterJS {
    border-radius: 6px;
    border-color: #78909C;
}

これで、テーマにJINを使っていても、Enlighterが正しく表示されるようになります。

Enlighterのサンプル

いくつか、Enlighterのサンプルを載せておきます。また、Enlighterに用意されているテーマも本家ページで確認できます。(独自のテーマを追加することも可能)

Enlighterは、文章中に#include <memory>のような形でコードを埋め込むインライン方式と、以下のようにコードブロックとして埋め込む方式があります。

auto GetAddress() noexcept -> BYTE*
{
    Ptr address = nullptr;
    Point posZero{ 0,0 };

    auto bmpSvc = std::make_unique<BmpService>(bmp_);
    bmpSvc->getAddress(&address, &posZero);

    return static_cast<BYTE*>(address);
}

 

対応している言語も幅広く、複数のソースコードをタブ表示のような形で表示することも可能です。また、個別にスタイルを変えたり、行番号のスタートを変えたり、任意の行をハイライト表示することも可能です。

auto GetAddress() noexcept -> BYTE*
{
    Ptr address = nullptr;
    Point posZero{ 0,0 };

    auto bmpSvc = std::make_unique<BmpService>(bmp_);
    bmpSvc->getAddress(&address, &posZero);

    return static_cast<BYTE*>(address);
}
@echo off
@cls

cd /d w:\test
%SAMPLE_APP% > %LOG_FILE%
select
  t1.id,
  t1.name,
  t2.price,
  t3.note
from
  m_item t1
  inner join m_price t2
  on t1.id = t2.id
  left outer join m_note t3
  on t1.id = t3.id
where
  t2.price >= :price_condition
fetch first 100 rows only
with ur;

 

Enlighterの不具合修正

Enlighterを使う上ではあまり影響はありませんが、一部の動作でEnlighterの不具合を見つけました。

MS-DOSではremを使ってコメントを記載するのですが、Enlighterでは1行目に書いたremだけがキーワードとして扱われ、それ以外のremはコメントとして扱われます。(そのため、言語にMS-DOSを選択し、1行目にremを書いた場合にのみ、コメントとして扱われない…という事象が発生します)

クリティカルでは無いので、このままでも良いのですが、対象のスクリプト/wp-content/plugins/enlighter/resources/EnlighterJS.min.jsのmsdosに定義してあるkeywordsを次のように修正すれば、1行目のremもコメントとして扱われるようになります。

// 修正前(ソースコードの一部を抜粋)
promt, rd, recover, rem, rename, replace, restore,

// 修正後(ソースコードの一部を抜粋)
// remをmsdosのkeywordsから削除する
promt, rd, recover, rename, replace, restore,

EnlighterJS.min.jsは余分なスペースや改行コードが削られた状態なので、読みづらいコードになっていると思います。修正箇所を見つけるには「promt, rd, recover, rem, rename, replace, restore,」の文字列で検索すると、対象箇所を1回で特定できると思います。

これで、MS-DOSの1行目のremもコメントとして扱われるようになります。

rem 1行目のコメント
rem Enlighterをそのまま使うと、1行目のremはコメントにならない
echo This is sample

rem 1行目で無ければそのままでも問題なし
title Test Prompt
dir %AppData% | find "Studio" | sort /r

JavaScriptを修正しても結果が反映されない場合、ブラウザにキャッシュされた内容が表示されている可能性があります。この場合は、ブラウザのCtrl+F5などで、キャッシュを利用せずに最新の情報を取得してみてください。