ブログにソースコードを表示させたいのですが、何かおすすめの方法はありませんでしょうか？
できれば、評判が良く、ソースコードが見やすかったり、仕様をカスタマイズできるものが良いのですが。。
今回はこのようなお悩みにお答えします。
WordPress にソースコードを表示させる機能はついていないわけではありません。
実はデフォルトで標準装備されています。
たとえば、こんな感じ・・・
ブロックエディタの追加項目に「コード」があります。
この「コード」をクリックして、用意したプログラム or コードを貼り付けます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>はじめようHTML</title>
</head>
<body>
Hello World!
</body>
</html>サイト上での表示
うーん、HTML コードであることは分かるんだけど、何かパッとしないよ。。
色分けされていないし、何か味気ない。。
みなさん、プログラミングやコーディングを行うとき、どのようなエディタを使っていますか？
私は、主に Visual Studio Code を用いて作業を行なっています。コーディングしたスクリーンショットとしては次のとおりです。
このようなタグ名・関数・コマンド・変数などがカラーリングされることで、どの言語特有のものなのか分かりやすくなります。
こういった、カラーリングしてコードを見やすくするものを「シンタックスハイライト」と呼んでいます。
前置きが長くなりましたが、今回はそのような WordPress のシンタックスハイライトを有したプラグインをご紹介します。
その名も「Highlighting Code Block」です。
このプラグインを選んだ理由としては、
選んだ理由
- 「WordPress シンタックスハイライト」でググると、上位に挙がっている。
- 更新・最新のWordPress バージョンに対応している。
- 有効インストール数もそれなりに多い。(もっと上位のものもありますが、全体的に見れば評判が良い。)
参考までですが、導入すれば次のようなコード画面を掲載することができます。
✔︎ Light バージョン
✔︎ Dark バージョン
このようにパッと見ても、ソースコードであることが分かり、何しろ見やすいですね。
この記事でわかること
- Highlighting Code Block とは
- Highlighting Code Block の機能一覧
- Highlighting Code Block のインストール方法
- Highlighting Code Block の使い方
- Highlighting Code Block の設定方法(カスタマイズ)
それでは、早速見ていきましょう！
目次
Highlighting Code Block とは
WordPress プラグイン、Highlighting Code Block について解説します。
- 作者: LOOS, lnc.
- 開発者: Ryo
とあります。
こちら株式会社LOOS をググると、WordPress 有料テーマ Swell を開発している、Ryoさん(@ddryo_loos)でした。
私も以前は Swellを使っていました。
Swell を使っている方は、併せて導入してみるのはいかがでしょうか？
開発者が同じなので、これからも全く不具合なく使えることでしょう！
ちなみに、現在 AFFINGER を使っていますが、何ら問題なく当プラグインを使えています。
✔︎ このプラグインでできることを挙げていきます。
利用可能な機能や特徴
- 最近まで更新が続いている(2022年10月まで確認。) 執筆時2023年1月現在
- 最新の WordPress バージョン 6.1.X に対応済み
- ブロックエディタ(Gutenberg) 、クラシックエディタ両方に対応
- コードに色がつく(シンタックスハイライト)
- 行数を表示可能
- コピーボタン表示可能
- 言語名表示可能
- エディタのカラーリングは2種類(Light or Dark)
- フォントサイズ(pc・スマートフォン)を選択可能
- 言語を追加してセットできる
- インストール後、すぐに使える (ほぼカスタマイズがいらない)
- 設定画面がすべて日本語
基本的な機能は他と比較してほとんど網羅していると思われます。
まず、更新が3ヶ月前以内と新しく、さらに WordPress の最新バージョンに対応しているところが安心できますよね。
また設定画面がすべて日本語です。
では早速、イントールを進めていきましょう！
Highlighting Code Block のインストール方法
インストールについては、ものの2分ほどで導入できます。
インストール手順
- WordPress 管理画面 → 「プラグイン」→ 「新規追加」
- キーワード欄に「Highlighting Code Block」を入力
- 「今ずぐインストール」→ 「有効化」
この手順で完了します。
続いて、使い方について見ていきましょう！
Highlighting Code Block の使い方
インストールが済んだら、次は実際に使ってみましょう！
※ ブロックエディタでの解説となります。
✔︎ Step1: 投稿画面でブロックを追加する際、「Higllighting Code Block」をクリック
✔︎ Step2: 専用のブロックが表示されるので、コードを入力
設定項目
- ソースコードの入力箇所
- Lang Select: ソースコードの言語を選択
- ファイル名: 「〇〇.html」などファイル名を表示可能 (入力しなければ、選択した言語名が表示されます)
- data-line 属性値: ハイライト表示させたい行を指定できます (複数行、指定したい場合はカンマ「,」 で区切る)
上記の項目を埋めて、サンプルを作ってみました。
実際に表示されるのは次のとおりです。(Dark モードを使用しています)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>はじめようHTML</title>
</head>
<body>
Hello World!
</body>
</html>
けっこうソースコードも見やすく、ファイル名も指定できて、おすすめです！
このままデフォルトの設定でも申し分なく使えますが、設定をカスタマイズするとより便利に使えます。
見ていきましょう！
Highlighting Code Block の設定方法(カスタマイズ)
Highlighting Code Block を次のようにして確認・設定変更(カスタマイズ)することができます。
Highlighting Code Block の設定
- 管理画面(ダッシュボード)から、「設定」→ 「[HCB]設定」をクリック
詳細設定は以下のとおりです。
基本設定
こちらは、初期設定(デフォルト)状態となります。
主に、「言語名の表示」「行数の表示」「コピーボタン」「カラーリング」「フォントサイズ・書体」を変更することができます。
先ほど、コードを表示させた際は「Dark」モードに変更しただけで、あとは設定をいじっていません。
デフォルトのままでも十分に使えます！
高度な設定
こちらは、初期設定(デフォルト)状態となります。
「デフォルトで用意されていない言語の追加、カラーリングの変更」を行いたい場合にカスタマイズできます。
使用できる言語として、デフォルトで17種の言語があります。
もし、自分の使用したい言語またはカラーリングを変更したければ、自身のサイトURL下に設定ファイルを設置します。
また言語の追加については、ヘルプ欄の「こちら」のリンクをたどることにより設定が可能です。
まとめ：インストール後にすぐに使えるのでおすすめ
ここまで、WordPress 専用プラグイン「Highlighting Code Block」を紹介してきました。
本記事のまとめ
- Highlighting Code Block とは
- Highlighting Code Block の機能一覧
- Highlighting Code Block のインストール方法
- Highlighting Code Block の使い方
- Highlighting Code Block の設定方法(カスタマイズ)
このような手順で進めてきました。
このようなソースコード表示用のシンタックスライトプラグインは、数多くあります。
今回は、次のような基準で選びました。
- 「WordPress シンタックスハイライト」でググると、上位に挙がっている。
- 更新・最新のWordPress バージョンに対応している。
- 有効インストール数もそれなりに多い。(もっと上位のものもありますが、全体的に見れば評判が良い。)
サイトを閲覧してもらうのは訪問者ですので、できるだけ可読性を意識したシンタックスハイライトを選ぶのが良いと思います。
その条件を十分に満たす「Highlighting Code Block」を今回紹介しました。
また使い勝手の良いプラグインがありましたら、記事を載せたいと思います。
ここまでご覧いただきありがとうございました。