目標
- Highlighting Code Blockをインストールできる
- Highlighting Code Blockを利用できる
Highlighting Code Blockの概要と利用方法
Highlighting Code Blockの概要
Highlighting Code Blockはブログの記事内に色々なソースコードを綺麗に表示できるプラグインです。Wordpressのクラシックエディターとブロックエディターのどちらにも対応しています。今回はブロックエディターでの操作を取り上げていす。
クラシックエディターでの場合、テーマによっては動かないなどあるようなので、ソースコード埋め込む場合はブロックエディターでの操作をお勧めします。
Highlighting Code Blockの利用方法
Highlighting Code Blockのインストール
WordPressにプラグインをインストールする方法は、パソコンにダウンロードしてwp-contentディレクトリ内のpluginsにアップロードする方法とWordpress管理画面のプラグインメニューから新規追加する方法の二種類があります。
今回は管理画面からのインストール方法で確認していきます。
WordPressの管理画面から「プラグイン」＞「新規追加」と進みます。
キーワードに「Highlighting Code Block」と入力して検索をかけます。もし表示されない場合は「Code Block」と入力をしてください。
「Highlighting Code Block」が見つかったら「今すぐインストール」をクリックします。
「Highlighting Code Block」を「有効化」します。
Highlighting Code Blockを使ってみる
「投稿」から「新規投稿」を選択して記事投稿ページへ移ります。
記事投稿ページ内のスクリプトを記述したい箇所で「＋」をクリックします。
初めて「Highlighting Code Block」を使用す場合は「Highlighting Code Block」のアイコンが先頭付近には出てこないので「すべての表示」をクリックします。
下のキャプチャと同じメニューが表示されます。スクロールできるので「Highlighting Code Block」のアイコンを探します。
「Highlighting Code Block」のアイコン。
※このアイコンが見つからない時は検索ボックスに「Highlighting Code Block」と入力します。
検索するとインストール可能の表示が現れるのでクリックします。（プラグインではインストールしていますが、このような操作が必要になる場合があります。）
再度検索をしてみます。下のキャプチャのようにアイコンが表示されるのでクリックします。
Your Codeと表示されれば成功です。ここにスクリプトを記述していきます。
今回はJavaScriptを記述して表示してみます。
実際に記述した時のエディターの画面キャプチャ
記述を終えたら左下の言語の選択を行います。この部分はブログの出力時にスクリプトの入ったブロックの右上に表示されます。この部分を入力しないと文字がハイライトされません。
プレビューを確認します。
ハイライトされたスクリプトが表示されているのが確認できます。
Highlighting Code Blockの設定を変更してみる
「Highlighting Code Block」の表示を「Lightモード」から「Darkモード」に変更します。
WordPress管理画面から「設定」＞「[HCBの設定]」と進みます。
「[HCBの設定]」
フロント側（ブログの表示側）とエディター側のどちらも「Dark」にチェックを入れます。
エディター側の表示をチェックします。
フロント側の表示を確認します。黒ベースの表示に変化しています。
以上で「Highlighting Code Block」のインストールと使用方法の記事は終わりです。
ブックマークのすすめ
「ほわほわぶろぐ」を常に検索するのが面倒だという方はブックマークをお勧めします。ブックマークの設定は別記事にて掲載しています。
