wildhawk
WordPressの記事内で
ソースコードを見やすく表示させるプラグイン
「Highlighting Code Block」
ソースコードを見やすく表示させるプラグイン
「Highlighting Code Block」
自作したけど、上手くいかなかった。。。
WordPressの記事や固定ページでソースコードを説明する場合、テキストエディターの様な表示をすると見やすいので、CSSで自作したが、何故か編集するとソースコードが壊れる不具合があったので、難儀していました。
※おそらくWordPressがソースコードのHTML部分を変換してしまうからだと思います。
そんな悩みがあったが、たまたま「Highlighting Code Block」プラグインを見つけたので、インストールして試してみたので、そのレポートになります。
こんな人にオススメ
WordPressで記事や固定ページでソースコードを見やすく表示したい
WordPressでソースコードの表示にコピーボタンを設置したい
WordPressでソースコードの表示に行数を表示したい
WordPressの記事や固定ページでソースコードを説明するなら、
綺麗に表示でき、コピーボタンなどの機能があるプラグインを使おう
もくじ
無料プラグイン「Highlighting 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」の使い方（クラシックエディター）
「Highlighting Code Block」の使い方（ブロックエディタ）
「Highlighting Code Block」はWordPressの無料プラグインです。
ソースコードをHTMLやプログラム言語に合わせて表示でき、コピーボタンなどの機能があり、便利に使えます。
「Highlighting Code Block」ならコードブロックがとても簡単に使え、 以下の言語が標準でサポートされているので、ソースコードに最適な表示が簡単に対応できます。
- HTML
- CSS
- SCSS
- JavaScript
- TypeScript
- PHP
- Ruby
- Python
- Swift
- C
- C#
- C++
- Objective-C
- SQL
- JSON
- Bash
- Git
「Highlighting Code Block」は、以下のような特徴があります。
- ブロックエディターと、旧エディターの両方に対応
（推奨はブロックエディター） - 言語に合わせたコードカラーリングが可能
- 行数の表示が可能
- コピーボタンの表示が可能
- カラーリングは「Light」と「Dark」から選択可能
- フォントサイズをPCとスマホで、それぞれ選択可能
WordPressの管理画面で、プラグインの新規追加から「Highlighting Code Block」と検索してインストールしてください。
WordPressの管理画面から「プラグイン」→「新規追加」を選択。
①「キーワード」で「Highlighting Code Block」を検索。
②検索結果から「Highlighting Code Block」の「今すぐインストール」をクリック。
インストールが完了すると「有効化」のボタンに変わるので、クリックします。
以上で「Highlighting Code Block」のインストールは完了です。
ここから「Highlighting Code Block」の詳細設定と、具体的なエディタの使い方を説明します。
「Highlighting Code Block」の詳細設定は、以下から可能です。
「設定」→「[HCB]設定」をクリックして開きます。
基本設定
基本的な機能として、以下のような設定ができます。
- 言語の表示：コードブロックに言語名を表示するかどうか（デフォルト：表示する）
- 行数の表示設定：コードブロックに行数を表示するかどうか（デフォルト：表示する）
- コピーボタン：コードブロックにコピーボタンを表示するかどうか（デフォルト：表示する）
- フォントスムージング：フォントスムージングのオン・オフ（デフォルト：オフ）
- コードカラーリング（フロント側）：サイト表示側のコードカラーリング（デフォルト：Light）
- コードカラーリング（エディター側）：エディターでのコードカラーリング（デフォルト：Light）
- フォントサイズ(PC)：コードのフォントサイズ（PC）（デフォルト：14px）
- フォントサイズ(SP)：コードのフォントサイズ（SP）（デフォルト：13px）
- コードの “font-family”：コードのフォントファミリー（デフォルト：Menlo, Consolas, “Hiragino Kaku Gothic ProN”, “Hiragino Sans”, Meiryo, sans-serif;）
個人的に「基本設定」はデフォルト状態で良いと思いますが、
・コードカラーリング（フロント側）⇒ Dark
・コードカラーリング（エディター側）⇒ Dark
に変更がオススメです。
高度な設定
「基本設定」の下に「高度な設定」があります。
「使用する言語セット」について説明します。
「使用する言語セット」を変更
コードブロックの言語選択で、自分が使わない言語については、ここで変更が可能です。
例えば、以下のような設定にした場合、
コードブロックでの言語選択セレクトボックスで表示される言語が上記の設定に合わせて変更されます。
記事や固定ページで「ブロックの挿入ボタン」をクリックすると「テキスト」カテゴリーから「Highlighting Code Block」が選べるのでクリックしてください。
試しに「HTML」を選択しコードブロックを挿入し、サンプルのHTMLを書いてみました。
サイトでは以下の様に、HTMLタグや変数などが色分けされて表示されます。
クラシックエディターの場合は、ビジュアルモードで使います。エディター上部のツールバーに「コードブロック」と表示されたセレクトボックスが追加されているので、表示させたいコードの言語を選択します。
（２段目が隠れている場合は「ツールバーの切り替えボタン」を押して表示を切り替えてください。）
今回は、WordPressの記事内でソースコードを見やすく表示させるプラグイン「Highlighting Code Block」をご紹介しました。
行数やコピーボタン機能だけでなく、自動的にHTMLタグや変数をカラフルに表示してくれる機能は大変重宝するので、是非ご活用いただきたいと考えております。
ただ、このサイトは「Customizr」と言うテーマを使い、テーマ専用のエディタ「Nimble Page Builder」で作業していますが、今回のプラグインは、このエディタで動作しないので、使えませんでした。使い勝手が良いだけに心残りですが、使わないプラグインは残したままだと良くないので、アンインストールしました。残念です。
その他の記事
関連カテゴリー
最新記事
素材サイトのご紹介
このサイトでも活用しているオススメの素材サイトです。
是非こちらのバナーからご利用ください。
wildhawkからも写真素材を提供しています。是非ご活用ください