はじめに
プログラミングの勉強や、技術ブログを書くとき、Pythonなどのコードをウェブサイトやブログに「きれいに」貼り付けたいと思ったことはありませんか？
ただテキストとして貼り付けるだけだと、見た目が地味で読みにくくなってしまいます。そんなときに役立つのが、**Highlighting Code Block（ハイライティング・コード・ブロック）**というWordPress用のプラグインです。
このレポートでは、初心者の方にも分かりやすいように、Highlighting Code Blockの特徴や使い方、Pythonのコードを貼り付ける具体的な手順を詳しく説明します。
※本ページは、AIの活用や研究に関連する原理・機器・デバイスについて学ぶために、個人的に整理・記述しているものです。内容には誤りや見落としが含まれている可能性もありますので、もしお気づきの点やご助言等ございましたら、ご連絡いただけますと幸いです。
※本ページの内容は、個人的な学習および情報整理を目的として提供しているものであり、その正確性、完全性、有用性等についていかなる保証も行いません。本ページの情報を利用したこと、または利用できなかったことによって発生した損害（直接的・間接的・特別・偶発的・結果的損害を含みますが、これらに限りません）について、当方は一切責任を負いません。ご利用は利用者ご自身の責任でお願いいたします。
1. Highlighting Code Blockとは？
Highlighting Code Block（以下HCB）は、WordPressというブログやホームページを作るツールで使える「プラグイン（拡張機能）」の一つです。
HCBを使うと、プログラミングのコードを「見やすく、カラフルに」表示できます。これをシンタックスハイライトと呼びます。
1-1. どうして必要なの？
- 普通のテキストとして貼ると…
例えば、Pythonのコードをそのまま貼ると、全部同じ色で表示されてしまいます。
どこがキーワードで、どこがコメントなのか分かりにくいです。 - HCBを使うと…
キーワード、関数名、コメントなどが色分けされて表示されます。
これによって、コードがとても読みやすくなります。
2. Highlighting Code Blockの主な特徴
2-1. たくさんのプログラミング言語に対応
Pythonだけでなく、HTML、JavaScript、C言語、PHPなど、よく使われるプログラミング言語に対応しています。
Pythonを貼り付けたい場合も、言語を「Python」と選ぶだけでOKです。
2-2. コードの見た目がきれい
- 色分け（シンタックスハイライト）
例えば、Pythonのdefやprintなどのキーワード、文字列、数字、コメントなどが自動的に色分けされます。 - 行番号の表示
コードの左側に1行目、2行目…と番号が表示されるので、説明するときに便利です。 - コピーボタン
コードの右上などに「コピー」ボタンが表示され、ワンクリックでコード全体をコピーできます。 - カラーテーマの切り替え
明るい色（ライトテーマ）や、暗い色（ダークテーマ）を選べます。
サイトのデザインや好みに合わせて変更できます。
2-3. 使い方がとても簡単
WordPressの投稿画面で、ブロックを追加して、貼り付けたいコードを入力するだけです。
難しい設定や特別な知識は必要ありません。
3. Highlighting Code Blockの導入方法
3-1. プラグインのインストール
- WordPressの管理画面にログインします。
- 左側のメニューから「プラグイン」→「新規追加」をクリックします。
- 検索ボックスに「Highlighting Code Block」と入力します。
- 「今すぐインストール」ボタンをクリックし、インストールが終わったら「有効化」ボタンを押します。
3-2. 初期設定
- 「設定」→「[HCB]設定」に進むと、カラーテーマやデフォルト言語（最初に選ばれる言語）などを自分の好みに合わせて設定できます。
- ここで「ライト」や「ダーク」など、見た目のテーマを選んでおくと良いでしょう。
4. Pythonコードを貼り付ける具体的な手順
4-1. 投稿画面での操作
- WordPressで新しい記事やページを作成します。
- 「＋」ボタンをクリックして「Highlighting Code Block」ブロックを追加します。
- コード入力欄が表示されるので、そこにPythonのコードを貼り付けます。
4-2. 言語の選択
- コードブロックの設定で「言語」を選ぶ項目があります。
ここで「Python」を選択してください。
4-3. オプション設定（必要に応じて）
- 行番号を表示するかどうか
チェックボックスで簡単にON/OFFできます。 - ファイル名を表示
例：「main.py」など、ファイル名を表示したい場合に入力します。 - 特定の行をハイライト
重要な行だけ背景色を変えて強調することもできます。
4-4. プレビューと公開
- 記事のプレビューで、コードがきれいに色分けされているか、行番号やコピーボタンが表示されているか確認しましょう。
- 問題なければ、そのまま記事を公開できます。
5. 実際の表示例
下のように、Pythonのコードを貼り付けると、キーワードや文字列などが色分けされて表示されます。
python# これはPythonのサンプルコードです
def greet(name):
print(f"こんにちは、{name}さん！")
greet("太郎")このように、初心者でも簡単に「見やすくてきれいな」コードブロックを作ることができます。
6. 技術的な仕組み（簡単に）
Highlighting Code Blockは、prism.jsという有名なライブラリを使って、コードの色分け（シンタックスハイライト）を実現しています。
これにより、ページの表示が速く、たくさんの言語に対応できるようになっています。
7. まとめ
- Highlighting Code Blockは、WordPressでプログラムコードをきれいに貼り付けるための、とても便利なプラグインです。
- Pythonなどのコードを、色分けや行番号付きで表示でき、コピーも簡単です。
- インストールや使い方もとても簡単なので、初心者でもすぐに使いこなせます。
これからPythonの勉強記録や技術ブログを書く方には、ぜひおすすめのツールです！
分からないことがあれば、公式のドキュメントや解説記事もたくさんあるので安心です。
※本ページは、AIの活用や研究に関連する原理・機器・デバイスについて学ぶために、個人的に整理・記述しているものです。内容には誤りや見落としが含まれている可能性もありますので、もしお気づきの点やご助言等ございましたら、ご連絡いただけますと幸いです。
※本ページの内容は、個人的な学習および情報整理を目的として提供しているものであり、その正確性、完全性、有用性等についていかなる保証も行いません。本ページの情報を利用したこと、または利用できなかったことによって発生した損害（直接的・間接的・特別・偶発的・結果的損害を含みますが、これらに限りません）について、当方は一切責任を負いません。ご利用は利用者ご自身の責任でお願いいたします。
