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

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

Enlighterの導入方法

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

Enlighterのスタイル設定

WordPressのテーマに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,

これで、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