シンタックスハイライトの設定方法

ここでは「シンタックスハイライト」と呼ばれるプログラムのソースコードに色付けする方法を紹介したいと思います。

記事の中にHTMLやCSS、PHPといったプログラムのコードを書いて説明する方にオススメの機能です。

↓ 使用例

<h1 class="site-title" itemprop="headline">
  <a href="https://muromachi.work/">Muromachi</a>
</h1>

シンタックスハイライトを有効にする

まずはカスタマイザーの記事詳細ページ設定に移動しましょう。

WordPress管理画面の「カスタマイズ」をクリックします。

設定項目が表示されるので、「記事詳細ページ設定」をクリックします。

「シンタックスハイライト」と書かれた項目があるので「有効」をクリックします。

シンタックスハイライトの機能を使うときは、マークダウンと呼ばれる記法を使うと簡単なので、ここではマークダウンを使ったソースコードのハイライト方法についてご紹介します。

WordPressではいろいろなマークダウン用のプラグインがありますが、WP Githuber MD – WordPress Markdown Editorというプラグインがオススメです。

以前は「JP Markdown」というプラグインがあったのですが、グーテンベルクに対応していないという理由で推奨されなくなってしまいました。もしグーテンベルクを使わない方は、自己責任になりますが、JP Markdownを使うのも良いかもしれません。

ソースコードをハイライトするには、ソースコードを`3つと「language-プログラム名」で囲みます。

※ `はシフトキーを押しながら@ボタンで表示できます。

試しに次のHTMLコードをハイライトさせてみると、、

次のような表示になります。

<h1 class="site-title" itemprop="headline">
  <a href="https://muromachi.work/">Muromachi</a>
</h1>

上ではHTMLとして認識してほしいのでlanguage-htmlと書いています。CSSとして認識してほしいときにはlanguage-cssになります。