ファイル名表示機能風エリアを追加「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プラグインが英語表示になってしまった時に日本語にする方法 ( 日本語対応済みのプラグインの場合 )

  2. WordPress 予約投稿の失敗を解決 Scheduled Post Trigger

  3. WordPress Instagram埋め込みをSnapWidgetを使用してタイムライン表示させる ( プラグインなし )

サイドバー

よく使うカスタマイズ

最近の記事

アニメの名言集

人の偉さはわかりづらい
だからああやって着飾って
見た目でわかるようにするんだ

葬送のフリーレン
by フランメ

Profile

PAGE TOP
Amazon プライム対象