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」の紹介です。 画像付きで使い方を説明してるので参考にしてみて下さい。

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

・自分の使用したい言語が対応していない

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

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

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

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

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

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

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

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

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

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

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

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

WordPress管理画面 →「Cocoon設定」→「コード」 → 「ソースコードをハイライト表示」のチェックを外す。

あとがき

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

コメント

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