Web技術系中心に割と何でも更新中

【highlight.js】WordPressでのソースコード埋め込み実装手順

Blog Programming

Web制作者

WordPress利用者
「Web技術系の記事を書きたい。ソースコードを記事内に埋め込みしてハイライト表示したいけど、いい方法は無いかな?」

こういった疑問にお答えします。

本記事の内容

  • WordPressで「hightlight.js」を導入する方法

こんにちは、mine(@mineblog7)です。
ブログ歴は4年ほどになります。現在はmineblogを一人で運営しています。

WordPressでWeb技術系の記事を書くときに、ソースコードを埋め込み表示したい場合があります。

埋め込み方法についての紹介・比較について別記事で公開しています。

【参考】ソースコード埋め込み方法の特徴と比較

この記事では、「highlight.js」というJavaScriptのライブラリを利用したソースコードの埋め込み方法を紹介します。

highlight.jsのメリット

  • 読み込み速度が早い
  • CDNでCSS、JavaScriptを読み込むだけで利用可能(ファイルのダウンロード、アップロード不要)
  • 対応言語・テーマ(配色、デザイン種類)が豊富
  • 更新頻度が高い
  • 表示がシンプルでごちゃごちゃしていない

ここから、詳しい導入方法をご紹介します。

CDNを使用したhighlight.jsの導入手順

CDNで外部サーバーのファイルを読み込む方法を使用しての導入手順をご紹介します。

手順

  • CDNでCSS、JavaScriptファイルを読み込む
  • <pre>タグと<code>タグの間に表示させたいソースコードを記述する
  • 読み込むCSSファイルを変更してスタイルを変更する

CDNでCSS、JavaScriptファイルを読み込む

下記リンクよりhighlight.jsのダウンロードページへアクセスします。

【公式】Highlight.jsダウンロードページ

「jsdelivr」という見出しの下に、下記のコードが記述されています。

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/styles/default.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

これを<head>タグ内に記述するだけで準備完了です(CSS、JavaScriptファイルをダウンロードする方法もありますが面倒なので)。

WordPressで導入するなら、header.php(おそらくだいたいここにheadの記述あり)に直接記述、もしくはfunction.phpでwp_head()に出力するように設定するなどの方法が挙げられます。

<pre>タグと<code>タグの間に表示させたいソースコードを記述する

<pre><code>(ここにソースコードが入る)</code></pre>

<pre>タグで囲まれた部分(<pre>タグを含む)にHTMLエスケープ処理を施したあとに、記事内にペーストします。あとはページ読み込み時に自動的に最適な言語を判別して表示してくれます。

HTMLエスケープ処理の方法

HTMLエスケープ処理ツールにアクセスします。
「変換前」の欄に元のソースコードをペーストして、「エスケープ」をクリックすると「変換後」の欄にエスケープ処理後のソースコードが表示されるのでそれをコピーして元のソースコードに上書きすればOKです。

注意ポイント

  • <code>タグの前後に改行を入れないようにしてください。
  • <pre>タグによって改行・スペースもそのままの形で表示されるため、上下に余分な改行が入ってしまいます。

表示がうまくいかない場合

ここまでで表示がうまく行かない場合は、言語指定を試してみてください。

<pre><code class="javascript">(ここにソースコードが入る)</code></pre>

JavaScriptのソースコードの場合、上記のようにクラスに言語名を明示してあげるとうまく表示できるとのことです。

言語名(クラス名)の探し方は、まずこちらにアクセスして「Language categories」から該当するプログラミング言語を探します。

次にこちらにアクセスして、先程のプログラミング言語名(英字)で検索します。完全一致で見つからない場合は、部分一致で検索すると見つけられます。

対応言語が189種類(2020年6月現在)なので、だいたいの言語は存在していると思われます。

読み込むCSSファイルを変更してスタイルを変更する

スタイルの変更の方法は、まずこちらにアクセスします。

こちら左サイドバーのStyles一覧を各々クリックすると右側でレビューを見ることができます。好みのスタイルを見つけたら、こちらのCSSファイル一覧から該当するCSSを検索して、CDNで読み込んでいるdefault.min.cssのdefaultを該当する名前に変更します。

テーマ94種類(2020年6月現在)から好みのスタイルを選択できます。好みのスタイルが何かしら見つかるはずです。

例:「Monokai Sublime」のスタイルを設定

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/styles/monokai-sublime.min.css">

default.min.cssmonokai-sublime.min.cssに変更するだけです(defaultをmonokai-sublimeに変更)。

まとめ

Scrolline.jsによるプログレスバーの実装方法について再度まとめます。

ポイント

  • JavaScriptファイルとCSSを読み込む
  • ソースコードをエスケープ処理する
  • <pre>タグと<code>タグの間にエスケープ処理したソースコードを記述
  • 必要に応じてスタイルを変更するためのCSSを読み込む

基本的に必要なファイルを読み込んで、スタイル変更時はCSS名を変更するだけです。
手軽に導入できるのでぜひやってみてください。

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果