「ミックスグリーン) 」利用中♪スキン利用歴はこちらから♪

Cocoonの標準ソースコード表示をやめて「Highlighting Code Block」プラグインを導入してみた

ブログ
この記事は約6分で読めます。

「Cocoon」には、標準でソースコードをハイライトする機能がついています。

設定でサクッと簡単にハイライトできるんですが、ちょっと見た目を変えたくなったんですよね。
ただ、自分でCSSでいじるのが面倒くさくなってしまいまして、、、(T▽T)アハハ!

シンプルで使い方も簡単なWordpressプラグインはないかととググってみたところ、、、
見つかりました!!

「Highlighting Code Block」

ソースコードをハイライト表示できて、操作も簡単なプラグインです。
ハイライト機能は、「prism.js 」が利用されています。

WordPress管理画面からインストールする場合

  1. 「プラグイン」→「新規追加」から「Highlighting Code Block」で検索
  2. 「インストール」をクリック
  3. インストール後、「有効」をクリック

「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」と入力します。

「highlight.js」と「prism.js」は併用可能?

「prism.js」を縮小化しないファイルに指定する前に、試したことですが、、、。
(行数が表示されていない状態)

「ソースコードをハイライト表示」のチェックを入れたり、外してみたりしたところ、

「ソースコードをハイライト表示」 にチェック

通常のソースコード表示と「Highlighting Code Block」で作成したソースコード、
両方ともハイライト表示がされる状態。

「ソースコードをハイライト表示」 のチェックを外す

通常のソースコード表示と「Highlighting Code Block」で作成したソースコード、
両方ともハイライト表示されない状態。

念のため、Cocoonのハイライト表示は外す

Cocoonで利用しているハイライト表示は「highlight.js」なのに、
別プラグインで導入している「prism.js」のハイライト表示も操作も何故できるのか、
勉強不足なワタシにはちょっと謎なんですけども、、、

見た感じ「highlight.js」と「prism.js」の併用も可能そうですが、
挙動的にどちらかに決めた方がいいのではと浅い知識ながら考えまして、
Cocoonの「ソースコードをハイライト表示」 のチェックを外すことにしました。

Cocoon設定>「コード」>「ハイライト表示」

導入後の感想

当サイトはソースコードを表示させる記事はそれほど多くないんですけど、
やっぱり出来るだけ見やすい表示にしたいと思っていて、、、

「Highlighting Code Block」は、使い方も簡単ですし、
見た目も自分の好みにドンピシャで、導入できて大満足しています。(^^)

上が「Cocoon」、下が 「Highlighting Code Block」のハイライト表示

Cocoonでも、preタグのCSSで調整は出来ると思いますが、
作るのが面倒くさくなってしまったワタシです、、、( ̄∇ ̄;)ハッハッハ

「Highlighting Code Block」は、当記事でおすすめした以外にも
設定から「font-family」の種類の指定も簡単にできたり、
カラーリングも、「ライト」と「ダーク」の2種類があります。
背景色は、見やすさを考えるなら2種類くらいでまぁ充分かなと思います。
(自分で背景色を設定できる機能があればより嬉しいですけど。)

作成者様に感謝♪

便利なプラグインを作成してくださって、ありがとうございます!!

プラグイン作成者「了」様
運営元ブログWEMO

「Highlighting Code Block」 の使い方は、
上記、作成者様のページに詳しく載っていますのご参照下さい。

シンプルで洗練されたハイライト表示にしたいけど、
自分で見た目をいじるのはちょっと無理、、、

というワタシみたいな方にはピッタリなプラグインなので、
当記事を読んで下さって気になったら、ぜひ一度お試しくださいませ♪

それでは、また!けろら~でした♪\(^▽^)/

コメント欄

  1. ナナ より:

    Cocoonをバージョンアップしたらハイライト表示が消えてワタワタしていたところ、こちらのサイトを見つけました。
    「prism.js」を追加したところ、ハイライト表示が元に戻りました。すごく助かりました、情報ありがとうございます。

    • けろら~けろら~ より:

      >ナナさん
      コメントありがとうございます♪
      記事の内容がお役に立てて何よりです。(^^)

      ナナさんのサイトを拝見させていただきました。
      非常にわかりやすく見やすい構成で、素晴らしいサイトですね。
      C言語を勉強したくなった際に、参考にさせていただきます!

タイトルとURLをコピーしました