WordPressでソースコードをキレイに表示する方法

ブログ上でソースコードをキレイに表示するのに参考にした記事などをメモとして残します。

メモという体裁ですが、コードブロックに以下の機能を求めている人には参考になるかもしれません。

今まではCocoonデフォルトのハイライト機能を使用していましたが、読みやすさ向上のため今回プラグイン導入を決意しました。

『Highlighting Code Block』プラグイン導入

暫定的に『Highlighting Code Block』プラグインを導入することにしました。

プラグイン導入後の表示サンプルです。

const Pesron = {
  firstName: 'Taro',
  lastName: 'Yamada'
};

console.log(Person.firstName);
// expected output: "Taro"

delete Person.firstName;

console.log(Person.firstName);
// expected output: undefined

なかなかいいですね。

このプラグインの導入理由としては以下が挙げられます。

上3つに関しては、読者にとって嬉しいで機能（のはず）だと考えていたので必須でした。

実際の導入は以下の記事を参考にしました。分かりやすかったです。

シンタックスハイライトをブロックエディターに追加「Highlighting Code Block」の使い方

ブログにhtmlなどのソースを 反映させずにそのまま表示するときに便利ですよ。 そこでWordPressのブロックエディターに シンタックスハイライトを追加するプラグイン 「Highlighting Code Block」の紹介です。 画像付きで使い方を説明してるので参考にしてみて下さい。

takuweb1.com

ただ、初めは以下の問題で導入に二の足を踏んでいました。

『Highlighting Code Block』プラグインがデフォルトで対応しているのは以下の言語のみです。

私が使うであろう言語（Java、Go、graphqlなど）は入っていません。

ただ、これに関しては言語追加が可能なため問題なしでした。言語追加の設定方法は以下の記事で詳しく説明されています。先人の知恵に感謝。

【WordPress】Highlighting Code Blockで言語を追加する方法

前置きワードプレスでソースコードを記述するプラグインとして「Highlighting Code Block」を使用しています。見た目もキレイだし、カスタマイズも簡単なので重宝しています。ただ、デフォルトで使用できる言語選択の中に、使いたい言

techtech-note.com

ちなみに、上の記事内でFTPソフトを使ってなんちゃらという過程がありますが、WordPress初心者の私にはなんのことやらでした。

同じくFTPソフトとは何ぞや？という方は以下の記事を参考にすると良いかと思います。FTPソフト【FileZilla】をインストールする方法が丁寧に書かれています。

【FileZillaの使い方】WordPressでFTPソフトを使おう

「FTPソフトとは何？」というところから「WordPressでFTPソフトを使うメリット」「FileZillaの使い方」まで詳しく解説します。初心者の方向け。

saruwakakun.com

言語追加はちょい面倒ですが、10分ぐらいで終わるのでそんなに大変ではないですね。

正常にハイライトされない？

私の場合、実際に『Highlighting Code Block』プラグインを導入したところソースコードがうまくハイライト表示されませんでした。

原因は、CocoonのデフォルトのソースコードハイライトをONにしていたからです。以下のように設定を変更したことで解決しました。

あとがき

今後、ソースコードをキレイに表示する方法が見つかるたびに更新していきます。