【WPプラグイン】シンプルなコード表示「Highlighting Code Block」の紹介

こんにちは、nanoです。コードをブログに表示する際の便利なプラグインを紹介します。

シンタックスハイライトプラグイン（プログラムのコードをきれいに表示させるプラグイン）は、色々なものがありますが、中でも僕が使っているシンプルなシンタックスハイライトプラグイン「Highlighting Code Block」を紹介します。

「Highlighting Code Block」とは？

「Highlighting Code Block」は、見た目がシンプルなWordPressのシンタックスハイライトプラグインです。機能としては、言語選択、コピー機能のみでシンプルです。

見た目は↓こんな感じです。

<!DOCTYPE html>
  <html lang="ja">
  <head>
    <title>サンプルページ</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

右上のクリップボードのマークをクリックするとコピーできます。↓こんな感じ。

WordPressの管理画面から、プラグインをクリックし新規追加ボタンをおします。

キーワードの入力欄に「Highlighting Code Block」を入力すると検索結果に以下プラグインが表示されるのでクリックしてインストール、有効化します。

僕はクラシックエディターを使っているので、クラシックエディターでの使い方を載せます。

ビジュアルモードのこの部分でHighlighting Code Blockのコードブロックを挿入できます。

Code Blockのリストをクリックすると各言語のラベルを選択できます。

リストから言語を選択すると以下ブロックが追加されるので、このブロック内にコードを入力します。

/* Your code... */

今回はシンプルなシンタックスハイライトプラグイン「Highlighting Code Block」の紹介でした。

他にも便利なプラグインがあったら紹介していこうと思います。それでは。