WordPressで、HTML・Java・PHPソースコードを表示させることがあると思いますが、ソースコードが表示されい場合や
ソースコードがブロックにコピー&ペーストができなく不便だったりします。
がこのプラグイン「Enlighter – Customizable Syntax Highlighter」を使用すると奇麗に表示できます。この記事ではこのプラグインの使い方について説明します。
※以降「Enlighter – Customizable Syntax Highlighter」を「Enlighter 」と記述します。
目次
Enlighterは、最近の更新があり、インストール数も多いです。
・最終更新: 1か月前
・有効インストール数: 20,000+
Enlighterは、HTML・Java・PHP・Pythonなどのあらゆるソースコードに対応したWordPress用の構文強調表示ツールです。ハイライトは、EnlighterJS javascriptライブラリを利用して、美しいコードの外観を提供します。
PHPやCSSのスキルが無くてもデザインを変更できます。
・一般的な使用言語のサポート
・テーマカスタマイザーでテーマを変更
1.プラグイン検索
「キーワード」に「Enlighter – Customizable Syntax Highlighter」と入力します。該当するプラグインが表示されます。
![Enlighter](https://yuzu-site.net/wp-content/uploads/2020/11/enli01.jpg)
2.インストール
こちらの画像に探し、「今すぐインストール」をクリックします。完了後、「有効化」を忘れずに実施します。
![Enlighter](https://yuzu-site.net/wp-content/uploads/2020/11/enli02.jpg)
1.ブロック追加
「+」をクリックし、ブロックを追加します。
![Enlighter](https://yuzu-site.net/wp-content/uploads/2020/11/enli20.jpg)
2.ブロックを選択
「Enlighter Sourcecode」をクリックします。
![Enlighter](https://yuzu-site.net/wp-content/uploads/2020/11/enli21.jpg)
3.Enlighterブロック
Enlighterのブロックが表示されます。
![Enlighter](https://yuzu-site.net/wp-content/uploads/2020/11/enli22.jpg)
4.コードを入力
ソースコードを入力します。もしくはコピー&ペーストします。
![Enlighter](https://yuzu-site.net/wp-content/uploads/2020/11/enli23.jpg)
5.外観を設定
ソースコードの言語、ライン番号、テーマを設定します。
![Enlighter](https://yuzu-site.net/wp-content/uploads/2020/11/enli24-248x600.jpg)
6.表示イメージ
例題では、Languageを「HTML」、Lineoffsetを「10」、Theme「MowTwo」としています。
![Enlighter](https://yuzu-site.net/wp-content/uploads/2020/11/enli26.jpg)
7.対応言語
C、CSS、HTML、Java、PHP、Python、SQL、XMLなど多くの言語に対応しています。
![Enlighter](https://yuzu-site.net/wp-content/uploads/2020/11/enli31-1.jpg)
![Enlighter](https://yuzu-site.net/wp-content/uploads/2020/11/enli31-2.jpg)
![Enlighter](https://yuzu-site.net/wp-content/uploads/2020/11/enli31-3.jpg)
Enlighterの設定はダッシュボードの下方にあり、設定メニューは以下の様になります。
- Appearance:外観
- Theme Customizer:カスタマイズ
- Editing:編集
- Compatibility:互換性
- Extensions:拡張機能
- Options:オプション
![Enlighter](https://yuzu-site.net/wp-content/uploads/2020/11/enli42-1.jpg)
Enlighter>Appearanceの「Appearance」タブになります。
![Enlighter](https://yuzu-site.net/wp-content/uploads/2020/11/enli40-585x600.jpg)
Line-numbering
行番号の有無を設定します。Disableにすると行番号が非表示になります。
(Disableの状態です。)
![Enlighter](https://yuzu-site.net/wp-content/uploads/2020/11/enli40-1.jpg)
![Enlighter](https://yuzu-site.net/wp-content/uploads/2020/11/enli40-2.jpg)
Text overflow
Break line / Add scrollberを選択します。
スクロールバーを使用する。もしくは折り返しする。(改行)
例題、右端を超える長さのソースコードを用意してAdd scrollber/Break lineの表示を確認します。
![Enlighter](https://yuzu-site.net/wp-content/uploads/2020/11/enli41-1.jpg)
Break lineを選択した場合
![Enlighter](https://yuzu-site.net/wp-content/uploads/2020/11/enli41-2-600x85.jpg)
ソースコードが右端まで伸びた場合は折り返し表示されます。
![Enlighter](https://yuzu-site.net/wp-content/uploads/2020/11/enli41-3.jpg)
Add scrollberを選択した場合
![Enlighter](https://yuzu-site.net/wp-content/uploads/2020/11/enli41-4.jpg)
スクロールバーが表示されバーを右に移動すると右の見えない部分が表示されます。
![Enlighter](https://yuzu-site.net/wp-content/uploads/2020/11/enli41-5.jpg)
![Enlighter](https://yuzu-site.net/wp-content/uploads/2020/11/enli42-2-600x256.jpg)
Enlighter>Editingの「Gutenberg Editor」タブになります。
Gutenberg Editorで使用する場合はEnableにします。
ディフォルトはです。
![Enlighter](https://yuzu-site.net/wp-content/uploads/2020/11/enli42-2-600x256.jpg)
・ソースコードのリテラル、コメント、予約語などが色分け、ハイライトされ見やすく表示される。1行が長い場合はスクロールバーで行末も見られる。
・「Crayon Syntax Highlighter」が有名なプラグインですが、5年の間更新が行われていないため、「Enlighter 」を使用してみました。