ファイル名表示機能風エリアを追加「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 静的htmlをSimply Staticプラグインにて一括作成 & 静的htmlが存在すればキャッシュファイルとして使用する( .htaccessリダイレクト )

  2. WordPress アスキーアートや隠しメッセージをhtmlソースに追加する

  3. WordPress 拡大画像をポップアップで表示させるプラグイン Easy FancyBox

サイドバー

よく使うカスタマイズ

最近の記事

アニメの名言集

ぶつからなきゃ
伝わらないことだってあるよ
例えば、自分がどれくらい
真剣なのか
とかね

ソードアート・オンライン
by ユウキ

Profile

PAGE TOP
Amazon プライム対象