目次
Highlighting Code Blockとは
ワードプレスでコードを見やすく表示させることができる、プラグインです。
▼これ実物です
<h2>にゃんにゃん</h2>
<p>(=^ェ^=)</p>
<p>(=^x^=)</p>
![](https://nyancode.net/wp-content/uploads/2022/03/にゃんこ1.jpg)
言語が表示、行表示、ハイライト、コピペが簡単にゃ。
では、実際の使用方法をご紹介します。
インストール
ダッシュボード>プラグイン>新規追加>「Highlighting Code Block」を検索>インストール>有効化
![ダッシュボード>プラグイン>新規追加>「Highlighting Code Block](https://nyancode.net/wp-content/uploads/2022/03/image-11.png)
![ダッシュボード>プラグイン>新規追加>「Highlighting Code Block](https://nyancode.net/wp-content/uploads/2022/03/image-11.png)
使用方法
場所
投稿時に「Highlighting Code Block」のマークを選びます。
![投稿時に「Highlighting Code Block」のマークを選びます。](https://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-15-6.27.42.jpg)
![投稿時に「Highlighting Code Block」のマークを選びます。](https://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-15-6.27.42.jpg)
![](https://nyancode.net/wp-content/uploads/2022/03/にゃんこ2.jpg)
![](https://nyancode.net/wp-content/uploads/2022/03/にゃんこ2.jpg)
![](https://nyancode.net/wp-content/uploads/2022/03/にゃんこ2.jpg)
初回は、下側の「すべて表示」の中にいるにゃ。
表示設定
各ブロックで簡単な設定も可能です。
![](https://nyancode.net/wp-content/uploads/2022/03/にゃんこ1.jpg)
![](https://nyancode.net/wp-content/uploads/2022/03/にゃんこ1.jpg)
![](https://nyancode.net/wp-content/uploads/2022/03/にゃんこ1.jpg)
投稿画面の右上「ブロック」を選択にゃん。
![各ブロックで簡単な設定も可能です。](https://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-15-6.38.39.jpg)
![各ブロックで簡単な設定も可能です。](https://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-15-6.38.39.jpg)
※「個別では設定しない」選択でデフォルトでは、「行数表示と言語表示する設定」になっています。
言語設定
左下部分で言語の選択をしてブロックHTMLなど記入します。
![言語の選択をします。](https://nyancode.net/wp-content/uploads/2022/03/image-12-1024x684.png)
![言語の選択をします。](https://nyancode.net/wp-content/uploads/2022/03/image-12-1024x684.png)
ファイル名とハイライト
「ファイル名」と数字の「2」を記入しました。
![「ファイル名」と数字の「2」を記入しました。](https://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-15-1024x307.jpg)
![「ファイル名」と数字の「2」を記入しました。](https://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-15-1024x307.jpg)
![](https://nyancode.net/wp-content/uploads/2022/03/にゃんこ1.jpg)
![](https://nyancode.net/wp-content/uploads/2022/03/にゃんこ1.jpg)
![](https://nyancode.net/wp-content/uploads/2022/03/にゃんこ1.jpg)
ファイル名とハイライトは、使わなくてもOK
公開画面
![](https://nyancode.net/wp-content/uploads/2022/03/にゃんこ2.jpg)
![](https://nyancode.net/wp-content/uploads/2022/03/にゃんこ2.jpg)
![](https://nyancode.net/wp-content/uploads/2022/03/にゃんこ2.jpg)
投稿画面と公開画面で表示され方が違うにゃん。
左上の言語部分がファイル名になります。また、2行目がハイライトされます。また、左側に行数の表示もされます。
![左上の言語部分がファイル名になります。また、2行目がハイライトされます。また、左側に行数の表示もされます。](https://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-15-6.29.38-1024x169.jpg)
![左上の言語部分がファイル名になります。また、2行目がハイライトされます。また、左側に行数の表示もされます。](https://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-15-6.29.38-1024x169.jpg)
簡単コピペ機能
デフォルトで公開ページの右上にコピーボタンが付きます。ボタンをワンクリックでブロック内全選択のコピーが可能です。
![右上のボタンでワンクリックコピーも可能です。](https://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-15-6.29-1024x192.jpg)
![右上のボタンでワンクリックコピーも可能です。](https://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-15-6.29-1024x192.jpg)
詳細設定
設定>HBC設定
![設定>HBC設定](https://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-15-6.55.02.jpg)
![設定>HBC設定](https://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-15-6.55.02.jpg)
![](https://nyancode.net/wp-content/uploads/2022/03/にゃんこ1.jpg)
![](https://nyancode.net/wp-content/uploads/2022/03/にゃんこ1.jpg)
![](https://nyancode.net/wp-content/uploads/2022/03/にゃんこ1.jpg)
上記は抜粋だにゃん。いろいろあるにゃん…。
カラーリング変更
ブロッックの背景を黒に設定することも可能です。
投稿画面
![カラーリング変更投稿画面](https://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-15-7.06.40-1024x188.jpg)
![カラーリング変更投稿画面](https://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-15-7.06.40-1024x188.jpg)
公開画面
![カラーリング変更公開画面](https://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-15-7.07.03-1024x183.jpg)
![カラーリング変更公開画面](https://nyancode.net/wp-content/uploads/2022/03/スクリーンショット-2022-03-15-7.07.03-1024x183.jpg)
おわり。