今回はプログラムのコードをかっこ良く見やすく表示できるプラグインEnlighterを紹介します。
プラグインEnlighterを使うことで、記事内のコードが見やすくなりとても便利です。
もくじ
プラグインEnlighterとは
ソースコードを見やすくハイライト表示してくれるプラグイン。
プラグインEnlighterの特徴
プラグインEnlighterの主な特徴は、
- テーマで外観を変更できる
- 表示方法もカスタマイズできる
- サポート言語は多数
サポートされている言語はpython、C言語、JavaScript、Rubyなど多数。
外部サイト言語一覧 github.com/EnlighterJS/
プラグインEnlighterのインストール方法
WordPress管理画面の「プラグイン」→「新しいプラグインの追加」を選択。
①キーワードで「Enlighter」を検索
②Enlighterを「今すぐインストール」をクリック
③そのまま、「有効化」をクリックして有効化したら、完了です。
プラグインEnlighterの使い方
1.ブロックの選択から「Enlighter Sourcecode」を選択。
2.追加されたブロックの「Insert Sourcecode..」にコードを記入します。
3.ブロックの設定で個別にコードの種類や外観テーマなどを変更することができます。
設定 | 説明 |
---|---|
LANGUAGE | プログラミング言語の選択ができます |
SPECIALLINES | 指定した行を強調してくれます |
LINEOFFSET | 行数の表示をオフセットします |
THEME | テーマの変更ができます |
LINENUMBERS | 行数を表示するか隠すかを選択できます |
Codegroup | 複数のコードブロックをグループにできます |
プラグインEnlighterの全体の設定
設定のApppearanceで簡単に設定ができます。
項目 | 概要 |
---|---|
Theme | 外観のテーマ |
Code indentation | 行頭のインデント設定 |
Text overflow | テキストの折り返し動作の設定 |
Line-numbering | 行番号を表示するかの設定 |
Line-hovereffect | 行にマウスが来たときハイライト表示するかの設定 |
RAW-Code on doubleclick | ダブルクリック時に強調表示せずに生のコードを表示するかの設定 |
よりこだわりたい人は他の設定でカスタマイズできます。
テーマのサンプル
ここでは、Enlighterで設定できるテーマの一部を紹介します。
Enlighter
print('Hello World') for i in range(5): print(i)
Godzilla
print('Hello World') for i in range(5): print(i)
Atomic
print('Hello World') for i in range(5): print(i)
Boostrap4
print('Hello World') for i in range(5): print(i)
Classic
print('Hello World') for i in range(5): print(i)
まとめ
このプラグインEnlighterを使うことでソースコードを見やすく表示することができるようになります。
最後まで読んでいただきありがとうございます。