シンタックスハイライトはソースコードを見やすくするために、コードに色をつけること。
WordPressで投稿記事にコードを書いたとき、シンタックスハイライトがあるのとないのでは見やすさが全然違います。
そんなシンタックスハイライトが、簡単に設定できるWordPressプラグインが Highlighting Code Block です。
動作確認環境
- WordPressバージョン : 6.4.2
- プラグインバージョン : 2.0.1
- 動作確認日 : 2024/2/10
Highlighting Code Block の使い方
プラグイン追加画面から検索しインストールし、有効化します。
【プラグインページ】
Highlighting Code Block – WordPress プラグイン | WordPress.org 日本語
有効化すると投稿画面のブロックメニューに追加されます。投稿ブロックからHighlighting Code Blockを選び、クリック。
ブロックを選択すると、下記のような表示になるので「Your code…」のところにコードを記述します。
各追加設定は右側にあるブロック項目の「HCB設定」から行います。特に設定せずとも表示は可能ですが、必要な情報を入力していきましょう。
以前は以下のようなUIだったのですが、プラグインバージョン2.0.0からUI調整やカスタムプロパティの名前変更、data-start 属性の設定をブロックに追加といった変更が加えられています。
言語を選ぶ
「言語」では記載するコードのプログラミング言語を選びます。デフォルトは「Plain」ですが、このままだとシンタックスハイライトにはなりません。
<?php get_header(); ?>
<p>言語が「Plain」場合</p>
<?php get_footer(); ?>適切な言語を設定することで良い感じにカラーリングされます。
<?php get_header(); ?>
<p>言語が「PHP」の場合</p>
<?php get_footer(); ?>「ファイル名」が未入力の場合は、上記のように右上に言語名が表示され、ファイル名が入力されていればそのテキストが表示されます。
<?php get_header(); ?>
<p>ファイル名を入力した場合</p>
<?php get_footer(); ?>この表示は非表示にすることもできます。
「ブロックごとに行数表示・言語名表示有無を設定」、「Highlighting Code Block の設定」にて設定変更をご紹介します。
使える言語はデフォルトで以下の17種類です。【設定 ＞ [HCB]設定】にある「使用する言語セット」から使用できる言語を変更することもできます。
HTML・CSS・SCSS・JavaScript・TypeScript・PHP・Ruby・Python・Swift・C・C#・C++・Objective-C・SQL・JSON・Bash・Git
ブロックごとに行数表示・言語名表示有無を設定
デフォルトでは行数・言語どちらも表示される設定になっています。そしてブロックの設定では「個別の設定はしない」となっているので、表示させたい場合は特に変更は必要ありません。
行数・言語の表示設定をブロックごとに変えたい場合はこちらから設定します。
【行数も言語も「表示しない」に設定したブロック】
<?php get_header(); ?>
<h1>Highlighting code block を使う</h1>
<?php get_footer(); ?>ファイル名
こちらに何かしらテキストが入力されていれば、優先的に表示されます。ファイル名が基本ですが、任意の文字列でもOKです。
<p>ファイル名を日本語に</p>data-line属性値を設定して行を強調
「ハイライトする行番号 ( [data-line] )」はその名の通り強調させたい行番号を指定します。
【「ハイライトする行番号」に「2」を入力した表示】
<?php get_header(); ?>
<h1>Highlighting code block</h1>
<?php get_footer(); ?>複数行を指定したい場合は「-（ハイフン）」、「,（カンマ）」を使用して指定します。
連続した行数は「4-6」のように「-（ハイフン）」、飛ばして複数指定する場合は「4,6」のように「,（カンマ）」を使います。
【「4-6」で設定】
<?php get_header(); ?>
<h1>連続した行数にハイライト</h1>
<p>テキスト</p>
<p>ここからハイライト</p>
<p>テキスト</p>
<p>ここまでハイライト</p>
<?php get_footer(); ?>【「4,6」で設定】
<?php get_header(); ?>
<h1>各行にハイライト</h1>
<p>テキスト</p>
<p>ここにハイライト</p>
<p>テキスト</p>
<p>ここにハイライト</p>
<?php get_footer(); ?>【PR】
Highlighting Code Block の設定
Highlighting Code Block の設定は、設定 ＞ [HCB]設定 から行えます。
全体の設定はこちらから行います。
【設定画面】
言語・行数・コピーボタン
言語の表示、行数の表示設定、コピーボタンはデフォルトでONになっています。全て必要であればそのままで。
言語の表示はファイル名が未入力の場合、言語名が表示されますが、表示させたくない場合はチェックを外します。
左側に表示される行数が不要であれば、行数の表示設定のチェックを外します。
コピーボタンはワンクリックでコードをコピーしてくれるもの。ユーザーに優しいボタンです。ただ必要なければチェックを外します。
フォントスムージング
フォントスムージングはフォントを見えやすくするためのCSSです。
どうしても見えづらい場合は設定してもいいと思いますが、特に問題がなければチェックしなくて大丈夫だと思います。
参照 : [font-smoothing] cssでフォントをきれいでなめらかに見せる方法
コードカラーリング
コードカラーリングは「Light」と「Dark」の2種類。
（フロント側）はサイトで見る表示、（エディター側）は管理画面での表示です。
見え方の違いはこんな感じです。
フォントサイズ・font-family
ここは好みやサイトのスタイルによって設定していきましょう。
使用する言語セット
使わない言語を削除してスッキリさせたり、使用したい言語がない場合に追加することができます。
Highlighting Code Blockのシンタックス機能は「prism.js」を使っています。Highlighting Code Block ではそこから一部言語がデフォルトで設定されていますが、prism.js でサポートしている言語 の中のものであれば新たに追加することができます。
例えば「Markup」を追加する場合、markup:"Markup", と言語セットに追加して設定を保存すれば、言語設定から選べるようになります。
使用しない言語は削除してより使いやすいようにしてもいいと思います。デフォルトで設定されているものは「使用する言語セット」のところに表示されるため、後から必要になったらコピペして再度設定すればOK。
言語を追加するなら独自prism.jsも追加
デフォルトで設定されている言語以外を追加する場合は、追加した言語にもシンタックスハイライトを適用させるために、新たなprism.jsファイルを作成します。
「ヘルプ」に表示されているリンクをクリックすると、Prism.js のサイトに移動します。このページで追加した言語にもチェックを入れて、ページ下部にある「DOWNLOAD JS」のボタンをクリックします。
prism.jsというファイルがダウンロードされるので、それをテーマフォルダ内に追加し、「独自prism.js」の項目のところに、記入します。
独自カラーリングファイル
デフォルトのCSSとは別のカラーリングをしたい場合に、適用するCSSファイルを設定します。
Prism.jsの中のテーマカラーを適用しようとして、該当テーマ・言語・プラグインを設定したprism.cssを適用してもうまく表示されません。Highlighting Code Block のスタイルも組み込みつつ修正しなければならないようです。
やってできないことはないと思いますが、相当な労力になると思うので、デフォルトのカラーリングのままがおすすめです。
どうしてもテーマカラーを変更したい場合はこのプラグインではなく、Prism.js を使用してみてください。
カテゴリー : WordPress
タグ :
