ファイル名表示機能風エリアを追加「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 6.5 にバージョンアップした際に行った対応手順まとめ (プラグインも合わせてバージョンアップ)

  2. WordPressの記事を自動的にX(Twitter)に連携投稿できるプラグイン Autopost for X ( APIを使用した連携 )

  3. WordPress 特定のページでプラグインの有効・無効の制御ができるプラグイン Plugin Load Filter

サイドバー

よく使うカスタマイズ

最近の記事

アニメの名言集

人はどうでもいいことに命を懸けない。

葬送のフリーレン
by ヒンメル

Profile

PAGE TOP
Amazon プライム対象