Simplicityでソースコードをハイライト表示する方法

Simplicity2.1.6からプラグインを使用せずとも、ソースコードをハイライト表示出来るようになりました。

ソースコードのハイライト表示には、jQueryプラグインのhighlight.jsを利用しています。

ハイライト機能追加は、以前から行いたいと思っていたのですが、Crayon Syntax Highlighterのアップデートしたことによる不具合が起こったことで、ようやく実装する気になりました。

ソースコードのハイライト機能

Simplicityでソースコードのハイライト機能を利用するには、Wordpress管理画面から「外観 → カスタマイズ → ソースコード」項目から設定することができます。

今のところ、ハイライト表示の有効/無効、カラーテーマの選択、ハイライト表示する範囲を設定することができます

ソースコードの設定項目

以下では、それぞれの設定項目について詳しく説明します。

ソースコードをハイライト表示

「ソースコードをハイライト表示」は、Simplicity上でhighlight.jsを利用して、ハイライト表示をするかどうかを設定します。

有効化することで、デフォルトの設定だと、本文内のpreタグ内をハイライト表示します。

ハイライトスタイル

ソースコードをハイライト表示するカラーテーマを選択します。

それぞれのスタイルについては、以下のページを参照してください。

We're not a CDN - highlight.js

highlightjs.org

「Styles」項目から様々なスタイルを試してみることができます。

ハイライトするCSSセレクタ

「ハイライトするCSSセレクタ」では、ソースコード表示用のCSSセレクタを設定します。

デフォルトでは、以下のようなCSSセレクタになっており、「本文記事中のpreタグで囲まれたもの」がハイライト表示されます。

.entry-content pre

ハイライト表示したい要素が違う場合は、ここからCSSセレクタを変更してください。この機能により、どのような要素内のソースコードでもハイライト表示できるかと思います。

ソースコード挿入時の設定

Simplicityデフォルトでは、本文記事内（.entry-content）のpreタグ内のテキストがハイライト表示されます。

なので、以下ではpreタグで書き込むことを前提に、説明します。

ソースコードを挿入する

ソースコードを挿入するには、preタグを用いて、以下のように記入してください。

<pre>//モバイルで1ページに表示する最大投稿数を設定する
function set_posts_per_page_mobile( $query ) {
  if ( is_mobile() && $query->is_main_query() ) {
      $query->set( 'posts_per_page', get_posts_per_page_mobile() );
  }
}
add_action( 'pre_get_posts', 'set_posts_per_page_mobile' )</pre>

すると、以下のように表示されます。

//モバイルで1ページに表示する最大投稿数を設定する
function set_posts_per_page_mobile( $query ) {
  if ( is_mobile() && $query->is_main_query() ) {
      $query->set( 'posts_per_page', get_posts_per_page_mobile() );
  }
}
add_action( 'pre_get_posts', 'set_posts_per_page_mobile' )

単に、<pre>と入力すれば、言語はある程度自動判別されて表示されます。

言語を指定してハイライト表示する

言語を指定してハイライト表示するには、<pre class=”php”>とか<pre class=”html”>のように指定してタグを挿入します。

<pre class=”php”>//モバイルで1ページに表示する最大投稿数を設定する
function set_posts_per_page_mobile( $query ) {
  if ( is_mobile() && $query->is_main_query() ) {
      $query->set( 'posts_per_page', get_posts_per_page_mobile() );
  }
}
add_action( 'pre_get_posts', 'set_posts_per_page_mobile' )</pre>

すると、以下のように表示されます。

//モバイルで1ページに表示する最大投稿数を設定する
function set_posts_per_page_mobile( $query ) {
  if ( is_mobile() && $query->is_main_query() ) {
      $query->set( 'posts_per_page', get_posts_per_page_mobile() );
  }
}
add_action( 'pre_get_posts', 'set_posts_per_page_mobile' )

classに指定する言語名については、以下のページの「Language names and aliases」を参照してください。

Scope Reference — highlight.js 11.9.0 documentation

highlightjs.readthedocs.io

例えば、Apacheのソースコードを表示させたい場合は、<pre class=”apache”>もしくは<pre class=”apacheconf”>と入力します。

ハイライト表示させない

ハイライト表示させたくない場合は、<pre class=”nohighlight”>と記入します。

<pre class="nohighlight">//モバイルで1ページに表示する最大投稿数を設定する
function set_posts_per_page_mobile( $query ) {
  if ( is_mobile() && $query->is_main_query() ) {
      $query->set( 'posts_per_page', get_posts_per_page_mobile() );
  }
}
add_action( 'pre_get_posts', 'set_posts_per_page_mobile' )</pre>

すると以下のように表示されます。

//モバイルで1ページに表示する最大投稿数を設定する
function set_posts_per_page_mobile( $query ) {
  if ( is_mobile() && $query->is_main_query() ) {
      $query->set( 'posts_per_page', get_posts_per_page_mobile() );
  }
}
add_action( 'pre_get_posts', 'set_posts_per_page_mobile' )

注意点

highlight.jsを使用したソースコードのハイライト表示ですが、試用する際は以下の点に注意してください。

HTMLエスケープをしてからソースコードを挿入する

例えば、以下のようなHTMLを挿入するときは、

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

以下のようにHTMLエスケープしてから、挿入してください。

&lt;ul class=&quot;nav nav-tabs&quot;&gt;
&lt;li role=&quot;presentation&quot; class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li role=&quot;presentation&quot;&gt;&lt;a href=&quot;#&quot;&gt;Profile&lt;/a&gt;&lt;/li&gt;
&lt;li role=&quot;presentation&quot;&gt;&lt;a href=&quot;#&quot;&gt;Messages&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

<pre>タグで囲ってあっても、HTMLなどはHTMLとして出力されます。

HTMLエスケープを行うには、以下のウェブツールなどを利用してみてください。

HTMLエスケープツール | Web制作小物ツール - dounokouno.com

webtools.dounokouno.com

https://syncer.jp/html-escape-unescape

syncer.jp

HTML特殊文字変換｜コードをホームページに載せる時に便利 | すぐに使える便利なWEBツール | Tech-Unlimited

HTML特殊文字の変換ツール。HTMLやコードをホームページに載せる時にHTML的に特殊な意味を持つ特殊文字を正常に表示されるように変換するツールです。

tech-unlimited.com

エスケープツールは、どれでも使いやすいものを使えば良いと思います。

プラグインのCSSが優先されることも

Simplicityのデフォルトでは、本文中のpreタグ内がハイライト表示されます。

けれど、プラグイン等でpreタグに優先度の高いCSSセレクタでスタイルが設定されていた場合は、優先度の高い方のスタイルが適用されます。

例えば、Wordpressでフォーラムを運営するbbPressプラグインを利用した場合などは、スタイルの優先度がbbPressのものの方が高いです。ですのでpreには、bbPressのスタイルが、適用されます。

なので、プラグイン等で優先度の高いスタイルが適用されていた場合は、それを上回る優先度のCSSセレクタで、ファイルを上書きするなどの処置を行う必要があります。

例えば、暗色系のテーマの「monokai-sublime」などを利用した場合は、bbPressのスタイルが優先されてしまうため、背景色が明色になってしまい、文字が非常に見づらいです。

そういった場合は、以下のように独自にスタイルを書く必要があるかもしれません。

.entry-content #bbpress-forums div.bbp-topic-content pre,
.entry-content #bbpress-forums div.bbp-reply-content pre{
  background-color: #23241f;
  color: #fff;
  line-height: initial;
}