WordPressで投稿にソースコードの埋め込みをするときに使いやすいプラグインを探してました。使いやすいだけではダメで、使いやすさ＋ソースコードの埋め込みを綺麗にハイライト表示できるプラグインを理想としていたのです。
そして見つけました。
使用してみてHTMLコードの埋め込みをした表示確認もしたところ、PCでもスマホでもソースコードが崩れることなく、難しい設定もないWordPressのプラグインです。
それが「Highlighting Code Block」です。prism.jsが土台になっているようですね。
WordPressで使いやすいソースコードの埋め込み表示例
WordPressのプラグインで使いやすいと思えた「Highlighting Code Block」はソースコードの埋め込みをしてハイライトした表示が崩れない。そして表示に追加できることが多い。
- 言語名
- ファイル名
- 行番号
- 行指定ハイライト
上記を含めてもWordPressが重くなった気がしないしキレイにハイライトできます。
まずはこれらを含めてWordPressプラグイン「Highlighting Code Block」でソースコードがハイライトされる表示がどのようなものなのか「HTML」「CSS」「PHP」言語を埋め込み表示例を紹介します。
言語名付きでHTMLを埋め込む
1例目のソースコードはHTMLを埋め込んでハイライトし「言語名」を付けた表示例です。
HTMLのソースコードの表示右上で言語名が表示できるのでWordPressの記事内で使うソースコードがどんな言語なのかわかりやすくすることできるので使いやすいです。
シンタックスハイライトの背景をライトにした表示例です。
WordPressの記事内でソースコードを埋め込んだ表示背景を白系を使用してる方はカラーをライトにできます。
行番号を表示してCSSを埋め込む
2例目のソースコードはCSSを埋め込んで1例目の言語名に加えてソースコードの「行番号」を表示したシンタックスハイライトの例です。
CSSのソースコードを埋め込んだ表示の左側で行番号が表示できるのでWordPressの記事内でソースコードの説明をするときには「何行目はこんな処理をしているコードです」のように詳細な説明をしやすくなるので使いやすいです。
シンタックスハイライトの背景をライトにした場合のWordPressの表示例です。全体の行番号に加えて「行指定ハイライト」も表示させた例です(2行目)
行番号でコード全体の説明を分かりやすく表示できることに加えて、行指定ハイライトの視覚的な手助けによりソースコードを部分的に理解していただくのに見やすくなります。
ファイル名にしてPHPを埋め込む
3例目のソースコードはPHPを埋め込んだ例です。
行番号と行指定を加えて「ファイル名」を表示したシンタックスハイライトです。
WordPressのテンプレートはPHPファイルが多いのでheader.phpやsingle.phpなどのファイル名を表示させた使い方にしたい場合があります。そんなときにどのPHPファイルで実行するソースコードなのかWordPressのファイル名が記載されてると使いやすなるのではないでしょうか。
WordPressでコードを埋め込むプラグインの使い方
「使ってみたい」という方は「Highlighting Code Block」の設定や使い方も紹介しますのでWordPressに実装してみてください。
プラグインから「Highlighting Code Block」をインストールして有効化すると「設定」に「CODE BLOCK」が追加されるのでクリックで設定画面に進めます。
使用テーマによっては少しカスタマイズが必要です。たとえば、このブログで使用してるテーマ「LION MEDIA」ならシンタックスハイライトの左側にボーダーが入ってしまうので子テーマのCSSで左ボーダーを消しています。
あとは既存使用しているシンタックスハイライトがあれば既存使用で記述していたpreやcodeなどの影響がでる場合もあるかもしれませんので調整が必要です。
そのためプラグインを有効化したらまずはWordPress内でコードを埋め込んでいる記事を確認するようにしてください。
Highlighting Code Blockの設定
WordPressの「Highlighting Code Block」の設定方法は先に説明した言語名や行数、背景カラーなどの設定をします。
言語名の表示
WordPressの記事内で表示するコードブロックに言語名を表示するかどうかの設定です。
チェックするとソースコードを埋め込むときに一緒にコードに言語の種類が選択できます。
行数の表示
表示例でも紹介しましたがコードブロック左側に表示される行数を表示するかどうかの設定です。
チェックすると記事内に表示されるコードに行数が表示されます。
行数表示については投稿画面でもソースコードを埋め込んでいるブロック単位で行数の表示と非表示が指定できます。
コードカラーリング(サイト表示)
エディタ内で表示されるソースコードの背景カラーの設定です。LightかDarkから選べます。
私の場合はWordPressのサイト表示側とエディタ内のカラーをDarkに統一して使用しています。
意外と記事の下書きをしてる段階でソースコードが見やすくて使いやすいです。
フォントサイズ(PC)
表示したソースコードのフォントサイズの設定です。デフォルトは14pxですが記事内のソースコードの見やすさを調整できます。
使用する言語設定
ソースコードを埋め込む言語を設定または追加できる設定です。
「クラスキー:”言語名”」の形式で「,」カンマ区切りで記述します。
- 「クラスキー」はprism.jsで使用されるクラス名「lang-○○」の「○」の部分です。
- 「言語名」はセレクトボックスおよびコードブロック上に表示されます。
※ デフォルトでサポートされていない言語を使用する場合、「独自prism.js」の設定と併用。
その他「Highlighting Code Block」の設定を補完する場合は以下の記事を参考にしてください。
ブロックエディタで使う場合
WordPressのブロックエディタを使用して投稿している場合にソースコードを埋め込むやり方です。
ブロックの「フォーマット」にHighlighting Code Blockの専用ブロックがあります。
または頻繁に使用しているとブロック右側に「<>HCB」のアイコンが出るのでコードブロック表示できてソースコードを挿入できます。
ソースコード挿入後はコードブロック内で通常のエンターキーで改行を重ねてもコードブロックからは抜け出せません。
カーソルの「→」または「↓」で抜け出します。
クラシックエディタで使う場合
WordPressのクラシックエディタでコードブロック内にコードをコピペして埋め込む場合です。
投稿の上部メニューに「コードブロック」が表示されているのでクリックでソースコード挿入場所が追加できます。
コードのコピペ挿入は普通のCtrl + VのペーストではなくShift + Ctrl + Vのペーストを使います。もしくは右クリックで「ペーストしてスタイルを合わせる」を選択してください。
ちなみに私は本番環境はクラシックエディタ使用なのですがCtrl + Vでも問題なくコピペできてしまいました。使用するWordPressテーマによって違いがあるのかもしれません。
最後に複数行に渡るコードをコピペするときです。
空白行がテキストに含まれているとうまくペーストされません。なので埋め込むときは空白なしにして埋め込んでから空白するようにしています。
