ファイル名表示機能風エリアを追加「Enlighter – Customizable Syntax Highlighter」プラグイン

概要説明

ハイライト表示が便利な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>

最初はプラグインを変えるかカスタマイズをしようかと思っていたのですが機能面を調整せずに見た目だけでなんとかできないかなということで今回の改修を行いました。簡単に実装ができたのでこれでも良いかなと思っています。

関連機能

  1. WordPress現在表示しているページのプログラムファイルを表示させるプラグイン Show Current Template

  2. 表示前にフックして出力テキストを置換する

  3. bodyタグに任意のclassを追加

サイドバー

よく使うカスタマイズ

最近の記事

アニメの名言集

ホントに大事なモンってのは
もってる奴よりもってねー奴の方が
しってるもんさ

銀魂
by 坂田銀時

Profile

PAGE TOP
Amazon プライム対象