【自作プラグイン】コードの配色を自由自在に！タグの自動変換もこなす決定版！Simple Code Customizer
本ブログは殆どAIに書かせています。
ハルシネーション(チャットAIなどが、もっともらしい誤情報（＝事実とは異なる内容や、文脈と無関係な内容）を生成すること)にご注意ください。
アフィリエイトリンク(広告)もありますのでご了承ください。
「コードをもっとカラフルにしたい」「HTMLタグが消えてしまうのを防ぎたい」。そんな悩みを一挙に解決する「Simple Code Customizer」をご紹介します。
技術ブログ最大の敵は、HTMLタグの「エスケープ漏れ」です。このプラグインは、記事内のコードを美しく彩るだけでなく、記述をラクにする強力な機能を備えています。
1. このプラグインの「3大進化ポイント」
- カラーピッカー対応：管理画面から、バーの色、背景、文字、タグの色を直感的に設定可能。
- 自動エスケープ機能：
<や>を自動で変換し、HTMLタグがブラウザに実行されるのを防ぎます。 - タグの自動着色：エスケープした記号部分に専用のクラスを付与し、目立たせることができます。
🎨
「自分色」のコード画面を作る
「自分色」のコード画面を作る
2. 管理画面でかんたんカスタマイズ
設定ページ「Code Customizer 設定」から、サイトのデザインに合わせて色を調整できます。
💡 設定できる4つの項目
- タイトルバー：コード上部のアクセントカラー。
- コードエリア背景：読みやすさを左右するメイン背景。
- テキストの色：標準の文字色。
- タグ（特殊記号）の色：エスケープされた記号の色。
▲ プログラミングの知識がなくても、マウス操作だけでデザイン変更完了
[title]サンプル[/title]
<div class="preview">
Hello!
</div>
3. 面倒な「エスケープ作業」からの解放
通常、HTMLタグを記事に書くときは < のように書く必要がありますが、このプラグインならそのまま書いても大丈夫です。
JavaScriptがページ読み込み時に < と > を検出し、自動で表示用の文字列に置き換えます。これにより、コードのコピペミスが劇的に減ります。
4. まとめ
「Simple Code Customizer」あなたの技術記事を、よりプロフェッショナルな一報に変えてみませんか？