WordPressでつくったブログ記事にソースコードをきれいに表示させる方法
WordPressでつくったブログにWeb制作などの技術系記事を書いていると、ソースコードを載せたいときがあります。使っているWordPressテーマによっては、記事を書くときにpreタグ・codeタグで囲めばきれいに表示してくれる場合もありますが、そうではない場合はCSSで見ためを整えたり、外部サービスで加工して貼り付けたりと、あれこれ工夫が必要になります。
できることなら、なるべく手間が掛からず、なるべく美しく表示させたい。今回はそんなときに頼れるWordPressプラグインを、ご紹介します。
この記事をおすすめしたい方
- WordPressでブログ記事を書いていて、ソースコードを記事内に載せたい方
- 表示されるソースコードはなるべく美しく見やすいとうれしい方
- 色みやフォント・文字サイズにこだわりがある方
- 手間無くささっと使えるようにしたい方
使用するプラグイン
今回使用するプラグインはこちらです。
Highlighting Code Block
→ https://ja.wordpress.org/plugins/highlighting-code-block/
→ 開発者の方のブログ記事
記事での表示、見ため
このプラグインを使うと、ソースコードがどのような表示されるか見てみましょう。
コードの言語ごとに見やすい色が自動でついたり、明るい背景のライトモード・暗い背景のダークモードが選べたりします。
例：htmlの場合
ライトモード
ダークモード
例：CSSの場合
ライトモード
ダークモード
ちなみに、スマホでも調整不要できれいに表示されます。ソースコードが長い場合は、横スクロールが出ます。
使う準備
では、プラグインを使う準備をしましょう。
WordPress管理画面で、「プラグイン」＞「新規追加」画面で「Highlighting Code Block」を検索して、表示された対象のプラグインをインストール・有効化します。
投稿ページでの使い方
プラグインが使えるようになったら、投稿画面でさっそく使ってみましょう。
クラシックエディタの場合
投稿画面を「ビジュアルモード」にすると「Code Block」プルダウンが表示されるようになりました。ソースコードを掲載委したいところで、プルダウンから入れたい言語を選びます。
ソースコードの入力欄が記事内に入るので、「Your Code…」のところに載せたいコードを入力します。
こんな感じです。これで入力完了です。
ちなみに、先に記事内にソースコードを書いておいて、選択した状態で「Code Block」プルダウンから言語を選んでもOKです。
ブロックエディタの場合
投稿画面にある「＋」アイコンをクリックします。
ブロックの選択画面が表示されるので「すべて表示」をクリック。
ブロックの一覧から「Highlighting Code Block」を選びます。
記事内にソースコードを入力するブロックが入るので、「Your Code…」のところに載せたいコードを入力して、プルダウンから言語を選びます。
これで入力完了です。こんな感じで表示されます。
各種設定
最後に、プラグインの設定を見てみましょう。
設定画面は、WordPress管理画面の「設定」＞「HCB設定」から見られます。
設定できる項目は以下です。
ライトモード・ダークモードの選択は、「表示される記事」と「記事の編集画面」のそれぞれで設定できます。
表示される記事
編集画面
また、文字サイズやフォントの種類、オリジナルの文字色も設定できます。自サイト・ブログの見ためにこだわりがあるといろいろと変更したくなるので、こうやって簡単に設定できるのはうれしいです。
以上、WordPressでつくったブログ記事にソースコードを手軽にきれいに表示できるプラグイン「Highlighting Code Block」のご紹介でした。
