本記事では、WordPressで色の付いたソースコードを表示させる方法について解説しています。
WordPressの学習におすすめ書籍
1冊ですべて身につくWordPress入門講座
![](https://web-engineer-wiki.com/wp-content/uploads/2023/07/wordpress-book.jpg)
メリット
- サイト運営に必須のことが学べる
- 基本的な使い方~オリジナルテーマ開発まで学べる
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
HTML/CSSの学習におすすめ書籍
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
![](https://web-engineer-wiki.com/wp-content/uploads/2023/07/html-css.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2023/07/html-css.jpg)
メリット
- HTMLとCSSの基本が体系的に学べる
- Webデザインの基本が学べる
- 1つのWebサイトを作りながら学べる
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
目次
Highlighting Code Blockとは?
![Highlighting Code Block](https://web-engineer-wiki.com/wp-content/uploads/2023/07/hcb05.jpg)
![Highlighting Code Block](https://web-engineer-wiki.com/wp-content/uploads/2023/07/hcb05.jpg)
WordPressで色の付いたソースコードを表示させたい時は、Highlighting Code Blockプラグインがおすすめです。
ブロックエディター(Gutenberg)とクラシックエディターの両方に対応しており、コピーボタンや使用しているプログラミング言語/ファイル名なども表示させることが可能です。また、自分好みにカスタマイズすることも可能です。
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
表示させた実際のコードは以下のとおりです。
const sum = (num1, num2) => num1 + num2;
sum(1, 2);
Highlighting Code Blockのインストール
![Highlighting Code Blockのインストール](https://web-engineer-wiki.com/wp-content/uploads/2023/07/hcb01-1024x297.jpg)
![Highlighting Code Blockのインストール](https://web-engineer-wiki.com/wp-content/uploads/2023/07/hcb01-1024x297.jpg)
WordPressの管理画面から「プラグイン」→「新規追加」をクリックし、検索フォームに「Highlighting Code Block」を入力します。
検索結果の先頭に「Highlighting Code Block」が表示されるので「今すぐインストール」→「有効化」をクリックします。
![Highlighting Code Blockの使い方](https://web-engineer-wiki.com/wp-content/uploads/2023/07/hcb04.jpg)
![Highlighting Code Blockの使い方](https://web-engineer-wiki.com/wp-content/uploads/2023/07/hcb04.jpg)
Highlighting Code Blockは有効化した段階で使うことができます。
Highlighting Code Blockのカスタマイズ
![Highlighting Code Blockのカスタマイズ](https://web-engineer-wiki.com/wp-content/uploads/2023/07/hcb02.jpg)
![Highlighting Code Blockのカスタマイズ](https://web-engineer-wiki.com/wp-content/uploads/2023/07/hcb02.jpg)
Highlighting Code Blockをカスタマイズしたい場合は、WordPressの管理画面の設定を開き[HCB]設定をクリックします。
![Highlighting Code Blockの設定画面](https://web-engineer-wiki.com/wp-content/uploads/2023/07/hcb03-1024x685.jpg)
![Highlighting Code Blockの設定画面](https://web-engineer-wiki.com/wp-content/uploads/2023/07/hcb03-1024x685.jpg)
表示されるコード背景色やフォントサイズ・フォントの種類など変更することができます。