WordPress コード表示プラグイン完全ガイド｜Highlighting Code Block

2024年11月13日

この記事の結論

「Highlighting Code Block」は、WordPressでソースコードを見やすく表示するための専用プラグインです。コードの色分けや行番号表示、コピーボタンなどの機能を備え、HTML・CSS・JavaScript・PHP・Python・Ruby・SQLなど多くの言語に対応しています。インストールはプラグイン検索から数ステップで完了し、投稿編集画面でブロックを追加してコードと言語を入力するだけで、きれいなコード表示が実現します。

「ソースコードを見やすく表示する方法が分からない」「どうやってソースコードをWordPressに表示・編集すればいいのか知りたい」そんな悩みを抱えていませんか？本記事では、そんな疑問を解決するための具体的な方法を紹介します。

ソースコードを見やすく表示できるだけでなく、ブログの見栄えや読みやすさが向上し、ユーザーに分かりやすい記事を作成できるようになるでしょう。

Highlighting Code Blockとは？機能・特徴を解説

「Highlighting Code Block」とはソースコードを見やすく表示するための専用のプラグインです。

このプラグインは、コードの色分けや行番号の表示など、コードを見やすくする機能が豊富に備わっています。

これにより、ユーザーがコードを理解しやすくなります。

特にプログラミングブログや技術系サイトでは、ユーザーの満足度を大きく向上できるので非常に有効です。

インストールはこちらから

Highlighting Code Blockを導入するメリット5つ

対応言語が豊富

「Highlighting Code Block」は多くのプログラミング言語に対応しています。HTML、CSS、JavaScript、PHPなど、Web制作に必要な主要な言語だけでなく、PythonやRubyなどの他の言語もサポートされており、どのプログラミング言語を使用していても、適切にコードを表示できるため、汎用性の高いプラグインとして評価されています。

主要対応言語の一覧

HTML
CSS
JavaScript
PHP
Python
Ruby
SQL

この幅広い対応言語により、自由に活用できる点が「Highlighting Code Block」の魅力です。

コードに色を追加できる

コードに色を追加することは、単に見た目が良くなるだけでなく、ユーザーの理解の助けになる効果があります。色分けによって、変数や関数、文字列、コメントが視覚的に区別されるため、特にプログラミング初心者にとっては、コードの構造を理解しやすくなります。

たとえば、以下のようなケースでは、色分けが非常に有効です。

シンタックスエラーを見つけやすくなる：コードの誤りを視覚的に素早く発見できる。
コードのロジックが明確になる：関数や変数の区別がしやすく、ロジックが見やすい。

色分けのメリットは、コードの読みやすさの向上とエラーの発見スピードを上げることにあり、特に複雑なプログラムを書く際には欠かせない機能です。

Highlighting Code Blockのインストール手順｜初心者向け

「Highlighting Code Block」の導入は非常に簡単で、WordPress初心者でも短時間で設定できます。まず、WordPressの管理画面にログインし、次の手順を行います。

1. プラグインの検索

管理画面左側の「プラグイン」セクションに移動し、「新規プラグインを追加」をクリックします。

検索ボックスに「Highlighting Code Block」と入力し、該当するプラグインを探します。

2. インストール

検索結果に表示された「Highlighting Code Block」を確認し、「今すぐインストール」をクリックします。

3. 有効化

インストールが完了したら、「有効化」ボタンを押してプラグインを有効にします。これでプラグインのインストールは完了です。

初心者でも簡単にインストールでき、他の複雑な設定は必要ありません。

Highlighting Code Blockの初期設定方法

プラグインをインストールした後は、基本的な設定を行う必要があります。設定画面にアクセスするためには、以下の手順を行ってください。

1. 設定画面へのアクセス

管理画面の「設定」タブから「Highlighting Code Block」を選択します。

2. テーマの選択

コード表示のデザインを変更できる「テーマ」が複数用意されています。表示したいデザインに応じて、適切なテーマを選択してください。例えば、ダークモードやライトモードなど、好みに合わせて選択できます。

3. 対応言語の設定

「Highlighting Code Block」は多くのプログラミング言語に対応しているため、表示させたい言語を設定します。デフォルトで主要な言語（HTML、CSS、JavaScriptなど）は有効になっているため、特定の言語だけ表示させたい場合は必要な設定を行ってください。

4. 行番号表示の有効化

コードの読みやすくするために、行番号を表示することが推奨されています。設定画面で「行番号の表示」を有効にすると、コードが複数行に渡る場合でも、読みやすいので便利です。

5. コピーボタンの設定

プログラムコードを簡単にコピーできる「コピーボタン」の表示を有効にすることもできます。特に技術ブログを運営している場合、ユーザーがコードを簡単にコピーして使用できるため非常に便利です。

これらの設定を完了することで、プラグインが最適な状態で動作し、コードの読みやすさと使いやすさが向上します。

Highlighting Code Blockの使い方｜実装例付き

「Highlighting Code Block」を使って、WordPressの記事内にソースコードを表示する方法は非常に簡単です。特に、プログラミングに不慣れなユーザーでも簡単に操作できるのが魅力です。手順に沿って設定を行うことで、見やすいソースコードを表示できます。

1. 「Highlighting Code Block」を選択

投稿編集画面で「+」ボタンを押し、「Highlighting Code Block」を検索。

「HCB」と検索すれば出てきます。

「Highlighting Code Block」を選択してください。

2. ソースコードやプログラミング言語を入力する

「Highlighting Code Block」のブロックが追加されるのでソースコードやプログラミング言語を入力してください。

これでソースコードをきれいに表示できます。

編集画面ではコードカラーリングや行数表示、コピーボタンなどが表示されていませんがプレビュー画面で確認すると以下の画像のようにしっかりと表示されています。

<!DOCTYPE html>
<html>
  <head>
    <title>Sample Code</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

WordPressのコード表示をきれいにする方法まとめ

今回は、WordPressでソースコードを表示するプラグイン「Highlighting Code Block」を紹介しました。

コードを見やすく表示することは、ユーザーの利便性を高め、サイトのアクセス数を向上させます。さらに詳しく学びたい方は、WithCodeの無料カウンセリングをぜひご利用ください。

参考リンク（公式・一次情報）

よくある質問（FAQ）

Q1. Highlighting Code Blockとは何ですか？

A. ソースコードを見やすく表示するためのWordPress専用プラグインです。コードの色分けや行番号の表示など、コードを見やすくする機能が豊富に備わっており、プログラミングブログや技術系サイトでユーザーの満足度を高めるのに有効です。

Q2. Highlighting Code Blockはどの言語に対応していますか？

A. HTML、CSS、JavaScript、PHP、Python、Ruby、SQLなど多くのプログラミング言語に対応しています。Web制作に必要な主要言語だけでなく幅広い言語をサポートしており、汎用性の高いプラグインとして評価されています。

Q3. Highlighting Code Blockのインストール方法を教えてください。

A. WordPress管理画面の「プラグイン」から「新規プラグインを追加」をクリックし、検索ボックスに「Highlighting Code Block」と入力します。表示されたプラグインを「今すぐインストール」し、完了後に「有効化」ボタンを押せば導入完了です。

Q4. コードを色分けするとどんなメリットがありますか？

A. 色分けによって変数や関数、文字列、コメントが視覚的に区別され、初心者でもコードの構造を理解しやすくなります。シンタックスエラーを見つけやすくなり、コードのロジックも明確になるため、読みやすさとエラー発見のスピードが向上します。

Q5. 記事にコードを表示するにはどうすればよいですか？

A. 投稿編集画面で「+」ボタンを押して「HCB」または「Highlighting Code Block」を検索し、ブロックを追加します。そこにソースコードとプログラミング言語を入力すると、プレビュー画面でカラーリングや行数表示、コピーボタン付きのきれいなコードが表示されます。

AIスキルで、未来の自分をアップデート！

今なら完全無料でAIを学べる！

動画や実践で楽しく学べる：初心者でも安心のカリキュラム
スマホ・PCどちらでもOK：好きな時間に学習できる
料金は一切ナシ：0円でAIスキルが身につく

目的に合わせて選べる「AI副業」「AI転職」「AI活用」の3コースを用意。副収入・キャリアチェンジ・日常の生産性アップまで、あなたのゴールに合わせてAIを学べます。

会員登録はカンタン30秒で完了します。まずは公式LINEから、無料でAI学習をスタートしましょう！

公式LINEから学習をスタート

この記事を書いた人

WithCode 編集部

WithCode（ウィズコード）は「目指すなら稼げる人材」をビジョンに、累計400名以上のフリーランスを輩出してきた超実践型プログラミングスクールです。150社以上の実案件支援を特徴にWeb制作・Webデザインなどの役立つ情報を現場のノウハウに基づいて発信していきます。