「Highlighting Code Block」の使い方を解説

2022/12/262024/07/03

当ページのリンクには広告が含まれています。

悩む人

ソースコードをシンタックスハイライト表示させるのにプラグインの「Highlighting Code Block」の導入を考えているんだけど使い方が分からない。

こういった悩みにお答えします。

本記事で解決できること

Highlighting Code Blockのデフォルトでサポートされている言語のソースコードをシンタックスハイライト表示させる方法
Highlighting Code Blockのデフォルトではサポートされていない言語のソースコードをシンタックスハイライト表示させる方法
プラグインを使用せずにソースコードをシンタックスハイライト表示させる記事の紹介

是非、最後までご覧ください。

News

以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。

本記事の内容

「Highlighting Code Block」の使い方を解説する前に、まずは使えるようにしていきます。

管理画面メニューから、「プラグイン」＞「新規追加」を選択します。

「プラグインの検索…」にプラグイン名を入力します。

入力すると「Highlighting Code Block」が表示されるので「今すぐインストール」＞「有効化」します。

下記を入力用に置いておきますので必要な方はコピーしてお使い下さい。

Highlighting Code Block

「有効化」すると管理画面メニューの「設定」に「【HCB】設定」が追加されます。

先に本記事では解説しない部分をお伝えしておきます。

基本設定

高度な設定

※全て解説します。

それでは「Highlighting Code Block」の使い方を解説します。

管理画面メニューから、「設定」＞「[HCB]設定」を選択します。

コードカラーリングを設定します。

デフォルトでは、フロント側もエディター側も「Light」になっていますが、このままにしておきます。

管理画面メニューから、「投稿」＞「新規追加」を選択します。

「ブロック挿入ツールを切り替え」を押します。

「ブロック挿入ツールを切り替え」の一覧が表示されます。

「ブロック」＞「テキスト」＞「Highlighting Code Block」を選択します。

「Your Code…」にコードを入力します。

下記を入力用に置いておきますので必要な方はコピーしてお使い下さい。


h2 {
  background-color: #f7f7f7;
  border-left: solid 8px #4865b2;
  color: #333;
  font-size: 1.4em;
  font-weight: 700;
  line-height: 1.4;
  margin: 4em 0 2em;
  padding: 0.75em 1em;
}

「Your Code…」にコードを入力しました。

エディター側がコードカラーリング「Light」で表示されています。

こちらは、エディター側がコードカラーリング「Dark」で表示された状態です。

「- Lang Select – 」から「css」を選択します。

選択後に「プレビュー」＞「新しいタブでプレビュー」から表示を確認します。

フロント側がコードカラーリング「Light」でシンタックスハイライト表示されています。

こちらは、フロント側がコードカラーリング「Dark」でシンタックスハイライト表示された状態です。

「- Lang Select – 」以外の設定を紹介します。

まずは、「ファイル名」です。

ファイル名に「SCSS」と入力します。

入力後に「プレビュー」＞「新しいタブでプレビュー」から表示を確認します。

ファイル名（赤枠）が表示されました。

「- Lang Select – 」でCSSを選択していますが、ファイル名に入力した「SCSS」が表示されていることから、「- Lang Select – 」より「ファイル名」の方が優先して表示されます。

次は、「data-line属性値」です。

「data-line属性値」に「5」を入力しました。

入力後に「プレビュー」＞「新しいタブでプレビュー」から表示を確認します。

「data-line属性値」に入力した「5行目」が目立ちました。

紹介してきた「言語名・行数・コピーボタン」は、基本設定からオンオフが行えます。

基本設定については以上となります。

ここからは、「[HCB]設定」の中の「高度な設定」について解説します。

「使用する言語セット」にはデフォルトでは下記の17言語がセットされています。

HTML
CSS
SCSS
JavaScript
TypeScript
PHP
Ruby
Python
Swift
C
C#
C++
Objective-C
SQL
JSON
Bash
Git

では、デフォルト以外で使いたい言語があった場合はどのようにすれば良いのでしょうか？

その方法を解説します。

Prismの公式サイトにアクセスします。

「独自prism.js」をアップロードします。

今回はエックスサーバーのファイルマネージャからアップロードしていますが、FTPソフトでも同じことができますので参考記事を下記に貼っておきます。

エックスサーバーの公式サイトにアクセスします。

「ログイン」＞「ファイルマネージャ」を選択します。

FTP情報を入力してログインします。

FTP情報」が記載されている場所を紹介します。

レンタルサーバー（Xserver）を契約した時に下記（赤枠）のメールが届いたかと思います。

その中（下記画像）に「FTPユーザー名（FTPアカウント名）」と「FTPパスワード」が記載されています。

ファイルマネージャにログインしました。

下記を参考に「独自prism.js」をアップロードするフォルダ（ゴール）まで移動していきます。

出発：hrdyuic.com　※自分が決めたサイトドメインになります。
ゴール：swell_child　※「独自prism.js」をアップロードするフォルダ（子テーマ）になります。
道順：「hrdyuic.com」＞「public_html」＞「wp-content」＞「themes」＞「swell_child」

子テーマまで移動しました。

この中に「新規フォルダ」＞「hcbフォルダ」を作成します。　※フォルダ名は自分の好きな名前でOKです。

新規作成したフォルダに「prism.js」をアップロードします。

最後に独自prism.jsにアップロードした「prism.js」までのパスを入力します。

今回はhcbフォルダ内にprism.jsをアップロードしたので、枠内にはhcb/prism.jsと入力します。

これで、言語セットした言語をシンタックスハイライト表示させる準備が整いました。

それでは、コードをシンタックスハイライト表示させていきます。

「- Lang Select -」から「Sass」を選択します。

選択後に「プレビュー」＞「新しいタブでプレビュー」から表示を確認します。

フロント側のコードカラーリング「Light」で表示されています。

こちらは、フロント側のコードカラーリング「Dark」で表示された状態です。

注意点

「- Lang Select -」を「css」にするとコードカラーリングが「Light」では見た目に違いはありませんでしたが、「Dark」にすると見た目（下記画像）が変わり統一感がなくなってしまいます。

独自カラーリングファイルについて解説します。

独自カラーリングファイルに「prism.css」までのパスを入力することで自分好みのシンタックスハイライト表示さをせることができます。

【悲報】
下記のようにシンタックスハイライト表示させることができるはずなのですが、、、僕はできませんでした。
ですので、参考程度に読んで頂ければと思いますし、読み飛ばして頂いても構いません🙇‍♂️

Prismの公式サイトにアクセスします。

ソースコードがシンタックスハイライト表示されました。

ですが、期待通りではありません。

実際は、下記画像のように表示されるはずなのですが、、、。

「独自カラーリングファイル」のみでもシンタックスハイライト表示させてみました。

しかし、変化はありませんでした。。。

しかも「独自prism.js」までのパスを消したことで、追加した言語セットがシンタックスハイライト表示されなくなってしまっているので、実用的ではありません。

一応、どのようにシンタックスハイライト表示されたのか載せておきます。

「Highlighting Code Block」の使い方についての僕なりの結論です。

デフォルトでサポートされている言語のみを使う、かつコードカラーリング（Light・Dark）で良い方：「Highlighting Code Block」プラグインでOK
「独自prism.js」を使う、かつコードカラーリング（Light・Dark）で良い方：「Highlighting Code Block」プラグインでOK　※ただし、デフォルトでサポートされている言語と追加した言語とでは見た目が異なる。
自分好みの見た目や統一感をもたせたい方：プラグインではなく、Prism.jsを使う。　※下記の記事を参考にしてみて下さい。