雑記

WordPress Highlighting Code Block使用方法 | 現役エンジニア&プログラミングスクール講師

「2024年版」 最新おすすめ ITスクール情報 | 現役エンジニア&プログラミングスクール講師2024年 最新 ITスクール情報です。Winスクール、インターネット・アカデミー、DMM WEBCAMP、テック・アカデミー、Aidemy  Premium、スキルアップAIといった人気スクール、注目度が急上昇中のスクールを掲載しています。...

目標

  • 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」のインストールと使用方法の記事は終わりです。

ブックマークのすすめ

「ほわほわぶろぐ」を常に検索するのが面倒だという方はブックマークをお勧めします。ブックマークの設定は別記事にて掲載しています。

「お気に入り」の登録・削除方法【Google Chrome / Microsoft Edge】| 現役エンジニア&プログラミングスクール講師「お気に入り」の登録・削除方法【Google Chrome / Microsoft Edge】について解説している記事です。削除方法も掲載しています。...
【パソコン選び】失敗しないための重要ポイント | 現役エンジニア&プログラミングスクール講師【パソコン選び】失敗しないための重要ポイントについての記事です。パソコンのタイプと購入時に検討すべき点・家電量販店で見かけるCPUの見方・購入者が必要とするメモリ容量・HDDとSSDについて・ディスプレイの種類・バッテリーの持ち時間や保証・Officeソフト・ウィルス対策ソフトについて書いています。...