【画像付】WordPressで記事内のソースコードに色をつける『結論:highlight.jsが良いです』

こんにちは、Daniel (@daniel__blog) です。

ブログの記事でソースコードを載せたいことってありますよね。
ソースコードに色をつけてAtomやVisual Studio Codeのように強調表示する、いわゆるシンタックスハイライトを実現できれば、訪問ユーザーはかなり見やすくなります。

このシンタックスハイライトを実現する方法としては様々なツールが用意されておりますが、個人的には highlight.js がおすすめです。

おすすめの理由としては以下の通りです。

  • CDNとして利用でき超軽量で動作可能
  • 使えるスタイルが豊富
  • 設置が比較的簡単

また、highlight.jsには以下の2通りの導入方法があります。

  1. CDNとして導入する方法
  2. サーバにライブラリをダウンロードして導入する方法

2.は社内のイントラネットなどのインターネットに接続されていない環境で便利です。
この記事では、1.CDNとして導入する方法を解説します。


highlight.jsとは?

highlight.jsでは、記事内の<pre><code>…</code></pre>で指定した箇所を検索し、以下のように自動的に強調表示してくれます。便利ですね。

# rewrite`s rules for wordpress pretty url
LoadModule rewrite_module modules/mod_rewrite.so
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php [NC,L]
ExpiresActive On
ExpiresByType application/x-javascript "access plus 1 days"
Order Deny,Allow
Allow from All RewriteMap map txt:map.txt RewriteMap lower int:tolower RewriteCond %{REQUEST_URI} ^/([^/.]+)\.html$ [NC] RewriteCond ${map:${lower:%1}|NOT_FOUND} !NOT_FOUND RewriteRule .? /index.php?q=${map:${lower:%1}} [NC,L]

公式トップページは以下のリンクです。(※ページ内は英語です)

参考 トップページhttps://highlightjs.org

以下は公式の使い方ページです。(※ページ内は英語です)

参考 使い方https://highlightjs.org

また、180を超える言語がサポートされているようです。
サポートされている言語は以下公式サイトで確認することができます。メジャーなものは勿論、大体の言語はサポートされている感じです。

参考 サポートされている言語https://github.com

注意
CDNで提供されるhighlight.min.jsパッケージには、すべての言語が付属されているわけではないようです。


導入の流れ

以下の流れに沿って設定していきます。

STEP.1
手順1:load-highlight.jsファイル作成
シンタックスハイライト適用のために必要なJSファイルを新規作成します。
STEP.2
手順2:load-highlight.jsファイルをサーバ上へアップロード
作成したJSファイルをFTPソフトを使ってサーバ上にアップロードします。
STEP.3
手順3:functions.phpにソースコードを追加する
CDNサービスとしてhighlight.jsを利用するため、functions.phpの内容を変更します。
STEP.4
手順4:
SANGOのデフォルトCSSが適用されてしまうので、追加CSSでスタイルを上書きします。

以下、詳しく説明していきますね。


導入方法

手順1:load-highlight.jsファイル作成

メモ帳やテキストエディタを開き、以下の記載を記入します。

hljs.initHighlightingOnLoad();

PC上の分かりやすい場所に一旦保存します。
ファイル名は以下の名前にします。

load-highlight.js

手順2:load-highlight.jsファイルをサーバ上へアップロード

FTPソフト(ファイル転送ソフト)を起動します。

MEMO
FTPソフトについては、以下のサイトが参考になります。
https://saruwakakun.com/html-css/wordpress/filezilla

ブログが乗っかっているサーバにFTP接続します。
まずは、以下のディレクトリを開きます。適用している子テーマによって開くディレクトリ名が異なるので注意です。

SANGOを使用している場合

/public_html/daniel-blog.com/wp-content/themes/sango-theme-child

PORIPU for SANGOを使用している場合

/public_html/daniel-blog.com/wp-content/themes/sango-theme-poripu

開いたら右クリックし、「ディレクトリの作成(C)」をクリックします。
以下の名前で新規ディレクトリを作成します。

highlight

以下のように作成できていればOKです。

作成したhighlightディレクトリを開き、「load-highlight.js」をこのディレクトリに追加します。

手順3:functions.phpにソースコードを追加する

注意
子テーマをダウンロードして編集することを強くおすすめします!
まだ子テーマを用意されていない方は、以下のサイトが大変参考になります。
https://saruwakakun.com/sango/child-theme
[カスタマイズ]→[テーマエディター]を開きます。
右側の[テーマファイル]から「functions.php」を選択します。

以下の内容を追記して、「ファイルを更新」をクリックします。

/************************
function.phpへの追記は以下に
*************************/
function hljs_load() { if ( is_singular() ) { wp_enqueue_style( 'hljs-style', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/atom-one-dark-reasonable.min.css' ); wp_enqueue_script( 'hljs-script', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js', array(), null, true ); wp_add_inline_script( 'hljs-script', 'hljs.initHighlightingOnLoad();' ); }
}
add_action( 'wp_enqueue_scripts', 'hljs_load' );

テーマエディター上で以下のように追加されていればOKです。

MEMO
バージョンの値は適宜変更することをおすすめします。
2021年2月現在は、10.5.0が最新のようです。

MEMO

また、functions.phpの内容を変更するにも後述しますが、この追記し部分のCSSファイルを変更することでお好みのシンタックスハイライトのスタイルに変更できます。(上記のコードで言うと、atom-one-dark-reasonable.min.cssの部分ですね。)
ここでは最初から僕のサイトと同じ「atom-one-dark-reasonable.min.css」を指定しています。

手順4:追加CSSに追記

デフォルトでは、SANGOで指定している<pre><code>のスタイルが適用されることになります。そこで追加CSSに以下を追記し、CSSを上書きします。

MEMO

また、追加CSSでさらに調整するにて後述しますが、この追記した部分の対象CSSファイルを変更することで、お好みの見た目に変更することができます。

また、追加CSSでさらに調整後述しますが、ここの各値はお好みに合わせてカスタマイズできます。

/*ソースコード競合上書き、フォントサイズ変更*/
.entry-content pre { border-left: none;	padding: 0;	margin: 0 0 30px 0;	background-color:#322931;
}
.entry-content code {	font-size: 15px;	color: #b9b5b8;	line-height: 26px
}
#content pre {
padding: 3px;
}


highlight.jsの使い方

ここからは具体的な使用方法を解説していきます。

各記事にてソースコードを追加

新規投稿をクリックします。
コードエディターを開きます。
ソースコードを挿入したい箇所に以下のように記載します。

<pre><code>挿入したいソースコード
</code></pre>

注意:<pre><code>タグの直後は改行せずにそのまま記載する

仕様により <pre><code> の後で改行を入れると、ソースコードをプレビュー画面で見たときに以下の通り1行目が空行になってしまいます

⬇ コードエディター上の記載(改行アリ)

⬇ プレビュー (改行アリ)

#!/bin/bash
###### CONFIG
ACCEPTED_HOSTS="/root/.hag_accepted.conf"
BE_VERBOSE=false

⬇ コードエディター上の記載(改行ナシ)

⬇ プレビュー (改行ナシ)

#!/bin/bash
###### CONFIG
ACCEPTED_HOSTS="/root/.hag_accepted.conf"
BE_VERBOSE=false

ということで、1行目は改行を入れないようにお願いします。

記載したソースコードが上手く表示されない場合の解決方法

コードエディターからソースコードを記載し、プレビュー画面で確認したときに以下のようになる場合があります。

これは、対象ソースコードが以下のような形で追加されていて、上手く自動判別できなかったケースが考えられます。

このような形だとWordpress側の自動整形も上手く行かず、以下の様な形に整形されてしまいます。

これを解決するためには、記載したいソースコードをHTMLエスケープ変換します。以下のサイトが便利です。

参考 HTML特殊文字変換ツールhttps://tech-unlimited.com

以下のように対象ソースコードを左側にペーストし、「変換」をクリックして右側に出てきた文字列をコピーします。

そして元のソースコードが書かれていた箇所を置き換えれば完了です。

<pre><code class="html">...</code></pre>

参考:<code>タグのCSSクラスを明示する

自動で強調表示されない場合などは、codeタグにクラスを付与することで明示的にどの言語のシンタックスハイライトを適用するか指定することができます。

<pre><code class="html">...</code></pre>

シンタックスハイライトのスタイルを変更する

デモサイトから好きなスタイルを選ぶ

以下のサイトで各スタイルを選択した場合それぞれのデモを見ることができます。

参考 highlight.jsのデモhttps://highlightjs.org

左ペインの「Themes」から各テーマを選択することで、各言語やコンソール毎にどんな風に強調表現されるかが右ペインに表示されます。
ここで適用したいスタイルの名前を覚えておいてください。

以下の画像では「Atom One Dark Reasonable」を選択しています。

選んだスタイルURLをコピーする

次に以下のサイトに接続します。
各スタイルをCDNで利用する場合のURLが一覧化されているので、適用したいスタイル名のURLをコピーします。

参考 highlight.jsのスタイルURLhttps://cdnjs.com

また、各スタイルの実際のCSS内容を以下のサイトで確認することもできます。

参考 highlight.jsのCSS内容https://github.com

functions.phpの内容を変更する

適用したいスタイルを変更するには、functions.phpでの指定を変更する必要があります。

テーマエディターを開きます。
functions.phpを開きます。
以下のソースコードの
//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark-reasonable.min.css
の部分にCDNサービスにてコピーしたURLを貼り付けます。


これで、導入したいスタイルに変更する準備ができました。

MEMO
バージョンが最新にアップデートされている場合は、functions.php内のhighlight.jsの各バージョンの値も変更することをおすすめします。

その他カスタマイズ

追加CSSで微調整する

追加CSSで追加した下記の各値については、お好みに合わせて変更できます。
文字サイズなど変更したい場合は調整してみてください。

/*ソースコード競合上書き、フォントサイズ変更*/
.entry-content pre { border-left: none;	padding: 0;	margin: 0 0 30px 0;	background-color:#322931;
}
.entry-content code {	font-size: 15px;	color: #b9b5b8;	line-height: 26px
}
#content pre {
padding: 3px;
}

今回は以上です!