クリエイティブ

WordPressでコードに色をつけるシンタックスハイライトを適用

シンタックスハイライトについて

プログラムをブログ上で公開する際にコードを綺麗にみせるために、
WordPressで最初からあったコードブロックを使ってみたのですが、
シンタックスハイライト(色分けして見やすくする機能)がなかったのでプラグインを探してみました。

結果として「Highlighting Code Block」が日本語でもドキュメントが充実しており、
使用感も良かったのでご紹介します。

Highlighting Code Blockについて

「Highlighting Code Block」はWordPressのプラグインページから直接インストール可能です。
更新のタイミングを最近で日本語の記事で公式ドキュメントがあるので非常に触りやすい印象です!

実際に使用してみた

「Highlighting Code Block」をインストールするとWordPressの投稿画面でブロックの投稿項目に「Highlighting Code Block」が表示されました。

実際に挿入して適当なHTMLコードを記載してみた様子が以下のコードです。

<html>
   <head>
     aaa
   </head>
   <body>
      aaa
   </body>
</html>

適用してみると選択できる言語も多く背景色もLightとDarkから選択できるため必要な機能は一通り揃ってました。

  • HTML
  • CSS
  • SCSS
  • JavaScript
  • TypeScript
  • PHP
  • Ruby
  • Python
  • Swift
  • C
  • C#
  • C++
  • Objective-C
  • SQL
  • JSON
  • Bash
  • Git

非常に簡単に適用でき扱いも楽でした。プラグインの提供者に感謝ですね。
今後も使っていきたいと思います。

  • この記事を書いた人

あるせ

上場ゲーム会社のクリエイターで1児の父です。 プログラミングなどクリエイター向けの記事から日々のお役立ち記事まで幅広く発信します!

PickUp

1

問題 上記のような問題が発生し困っていました。調べたところ改行コードの問題がよくヒットしましたが、自分の場合は解決できませんでした。 原因と解決方法 原因はGit LFSを使用していたことでした。Gi ...

2

ChatGPTを使って画像生成を行っていると、背景を透過した画像を作りたいと思うことがよくあります。ChatGPTで生成した画像に対して「背景透過してpngで書き出して」と依頼してみたのですが、背景が ...

3

問題 上記のような問題が発生し困っていました。調べたところ改行コードの問題がよくヒットしましたが、自分の場合は解決できませんでした。 原因と解決方法 原因はGit LFSを使用していたことでした。Gi ...

-クリエイティブ
-