けろら～こんにちは！サイト管理人のけろら～です♪＼(^▽^)／
本日の記事は、Wordpressプラグイン「Highlighting Code Block」のご紹介です。
ワタシが利用しているWordpressテーマ「Cocoon」には、デフォルト機能としてソースコードをハイライト表示させる設定が可能です。（「Cocoon2.0.4」からは、行表示もできるようになりました。）
Cocoon公式
ソースコードをハイライト表示させる方法
ソースコードに行番号を表示する方法
そこに敢えて、Wordpressプラグイン「Highlighting Code Block」を導入しています。
Cocoon機能にもあるのに導入した理由
これまでCocoon標準機能の「ソースコードのハイライト表示」を利用していました。
それほど利用する機会は多くないので、標準のハイライト表示で十分と思ってきたのですが、
ちょっとした気まぐれで少々見た目を変えたくなったんですよね。
「CSS」とか「HTML」とかラベル的なものを表示させたいと思ったのです。
が、、、自分ではできなくて、、、。
そこで、プラグインで何かいいのはないかと探してみたところ、 「Highlighting Code Block」 というプラグインにたどり着きました。
「Highlighting Code Block」の導入方法
ソースコードをハイライト表示できて、操作も簡単なプラグインです。
ハイライト機能は、「prism.js 」が利用されています。
WordPress管理画面からインストールする場合
- 「プラグイン」→「新規追加」から「Highlighting Code Block」で検索
- 「インストール」をクリック
- インストール後、「有効」をクリック
ココがおすすめ！
- オール日本語
- 新旧エディターに対応
- エディターから簡単に追加できる
- 簡単に言語のラベルをつけることができる
- 行数の表示ができる（On、Offの設定も簡単）
- 行のハイライト表示ができる
オール日本語
作成者様が日本の方なので、設定画面で悩む事がありません。
新旧エディターに対応
「クラシックエディター」、「ブロックエディター」どちらにも対応しています！
ワタシはもうブロックエディター以外では記事を書けないってくらい馴染んでいますが、
旧エディターを利用している方もまだまだ多いかと思うので、このお心遣いは嬉しいですよね。(^^)
以下、、、ワタシがブロックエディターユーザーなので
ブロックエディター利用寄りの説明になりますこと何卒ご了承ください。ぺこ <(＿ ＿)>
両方の使い方については、作成者様のページにわかりやすい説明があります。
エディターから簡単に追加できる
プラグインを入れると、
ブロックエディターの場合は、ブロック選択時の「フォーマット」の項目に
「Highlighting Code Block」のブロックが追加されます。
※クラシックエディターの場合は、「コードブロック」と表示されたセレクトボックスが追加されます。
行数の表示ができる
デフォルトでの設定と投稿ごとに設定が可能です。
「通常は行数なし、特定のコードだけ行数表示」という使い方ができます。
デフォルトで設定
投稿ごとに設定
※「個別設定をしない」を選択するとデフォルトの設定が反映
行数表示有り、行数表示無しの比較
簡単に言語のラベルをつけることができる
ブロックエディターから、「Highlighting Code Block」を追加すると、以下のブロックが表示されます。
「Lang Serect」から、CSS、HTML等選択ができます。
「HTML」を選択した場合（右上にラベル表示）
「ファイル名」から、任意の名前でラベルを付けることができます。
data-line属性の値・・・指定した行をハイライトで強調できます。
行のハイライト表示ができる
「任意のファイル名」というラベルで、3行目に行ハイライトを表示させたい場合
- ファイル名・・・ 「任意のファイル名 」と入力
- data-line属性の値に入力・・・「3」と入力
※「Lang Serect」で言語を選択していても、「ファイル名」に入力されたテキストが優先されます。
「行数表示しない」設定での表示
「行数表示する」設定での表示
「Cocoon」で導入する際の注意点
テーマを「Cocoon」をしている場合、
「Highlighting Code Block」を有効化しただけでは、行数が表示されません。
（「Twenty Twenty」では、有効化するだけで表示されました。）
ハイライト表示の仕組みの知識が無いため、原因は説明できなくて大変申し訳ないですが、
Cocoonには、「highlight.js」を利用してのハイライト表示が標準で装備されているため、
その辺に何かしら原因があるかと思われます。
Cocoonで、「Highlighting Code Block」を利用する際には、
「prism.js」を縮小化しないファイルに指定することで、
行数表示もできるようになったのを確認できました。
「prism.js」を縮小化しないファイルに指定する
Cocoon設定の「高速化」のページで、
JavaScript縮小化＞「縮小化除外Javascriptファイルの文字列を入力」の欄に「prism.js」と入力します。
念のため、Cocoonのハイライト表示は外しました
Cocoon設定＞「コード」＞「ハイライト表示」
Cocoon設定で「ソースコードをハイライト表示」にチェックを入れることで、
WordPress標準機能の「コードブロック」でハイライト表示ができるようになります。
（Cocoon独自のコードブロックは、「Cocoon 2.03」で廃止。）
Cocoonのハイライト表示「highlight.js」
・投稿画面では、Wordpress標準のコードブロックで追加
「Highlighting Code Block」のハイライト表示→「prism.js」
・投稿画面では、「Highlighting Code Block」のコードブロックで追加
利用するハイライト表示のjsが違うため、併用も可能ではないかと考えていますが、余計な挙動が増えそうなので、Cocoonの「ソースコードをハイライト表示」 のチェックを外すことにしました。
導入後の感想
Cocoonでも、出来る機能なのに
敢えてプラグインを入れるのはプラグイン枠の無駄遣いではあるのですが、
見た目を気にしてCSSいじりしなくていいので、手間を省けて大満足です♪
（好みにどんぴしゃな見た目だったので、、、）
上が「Cocoon」、下が 「Highlighting Code Block」のハイライト表示
「Highlighting Code Block」は、当記事でおすすめした以外にも
設定から「font-family」の種類の指定も簡単にできたり、
カラーリングも、「ライト」と「ダーク」の2種類から選択できます。
背景色は、見やすさを考えるなら2種類くらいでまぁ充分かなと思います。
（背景色を設定画面で変更できる機能があればより嬉しいですけど。）
作成者様に感謝♪
便利なプラグインを作成してくださって、ありがとうございます！！
プラグイン作成者「了」様
「Highlighting Code Block」 の使い方は、
上記、作成者様のページに詳しく載っていますのご参照下さい。
シンプルで洗練されたハイライト表示にしたいけど、
自分で見た目をいじるのはちょっと無理、、、
というワタシみたいな方にはピッタリなプラグインなので、
当記事を読んで下さって気になったら、ぜひ一度お試しくださいませ♪
それでは、また！けろら～でした♪＼(^▽^)／