Enlighter のコードにファイル名を表示する：CSS だけでラベルを重ねる方法（長い名前も 1 行）

こんな表示になります

コードを色分けして表示する WordPress のプラグイン「Enlighter – Customizable Syntax Highlighter」は、記事にコードを載せるのに便利です。ただ、コードの上にファイル名を出す機能がありません。

そこで、プラグインには手を加えず、HTML の div を 1 つ足して、CSS でコードの枠の上に重ねることにしました。下のコードの左上の灰色のラベルがそれです。

// ここにコードを書く
add_action( 'wp_head', function () {
	echo '<!-- sample -->';
} );

長いファイル名でも、ラベルの幅が文字の長さに合わせて広がり、1 行のまま出ます。

// 長いファイル名の見本

Enlighter – Customizable Syntax Highlighter – WordPress プラグイン

CSS（テーマの style.css などに足す）

次の CSS を、テーマの style.css か、管理画面の「外観 → カスタマイズ → 追加 CSS」に足します。

/* コードの上に重ねるファイル名のラベル */
.file_name {
	position: relative;
	z-index: 99;
	display: table;
	min-width: 95px;
	margin: 0 0 -13px 10px;
	padding: 7px 12px;
	background: #ccc;
	font-size: 12px;
	text-align: center;
	white-space: nowrap;
}

/* ラベルが重なる分、コードの 1 行目を下げる */
.enlighter-default {
	padding: 20px 0 0 0 !important;
}

前は width: 95px で幅を決めていたため、長いファイル名が 2 行になってラベルが崩れていました。display: table と white-space: nowrap に変えて、文字の長さに合わせるようにしました。

記事に書く HTML

記事では、コードの pre のすぐ上に、ファイル名の div を書きます。エディターは「テキスト」のタブ（HTML が見える方）で書きます。

<div class="file_name">functions.php</div>
<pre class="EnlighterJSRAW" data-enlighter-language="php">ここにコードを書く</pre>

ファイル名を出したくないコードは、div を書かなければ、いつもどおりの表示です。

プラグインを替えたり作り変えたりせず、見た目だけで済ませたので、プラグインを更新しても消えません。

ただし CSS はテーマの側にあるので、テーマを替えたときは、新しいテーマにも同じ CSS を足してください。