概要説明
ハイライト表示が便利なEnlighter – Customizable Syntax Highlighterですがファイル名の表示機能がないのでファイル名表示の対応を行ってみました。styleにてデザインは自由に変更が可能です。
コード – ファイル名表示用サンプル
functions.php
Enlighter – Customizable Syntax Highlighter プラグインにファイル名を表示
機能面での修正ではなくファイル名エリアを重ねて表示せています
// ファイル名エリア
<div class="file_name">functions.php</div>
// style
.file_name {
margin-bottom: -13px;
position: relative;
z-index: 99 !important;
font-size: 12px;
padding-left: 10px;
background: #ccc;
padding: 7px;
width: 95px;
text-align: center;
margin-left: 10px;
}
.enlighter-default {
padding: 20px 0 0 0 !important;
}
サンプル表示のソース
sample
<div class="file_name">functions.php</div> <pre class="EnlighterJSRAW" data-enlighter-language="php">Enlighter – Customizable Syntax Highlighter プラグインにファイル名を表示</pre>
最初はプラグインを変えるかカスタマイズをしようかと思っていたのですが機能面を調整せずに見た目だけでなんとかできないかなということで今回の改修を行いました。簡単に実装ができたのでこれでも良いかなと思っています。
