ブログ運営

ソースコードハイライト表示ライブラリ「hightlight.js」をWordPressで導入する方法

この記事について

WordPressで「hightlight.js」を導入する方法を具体的に紹介する記事です。

当ブログもWeb技術系の記事を書いていこうということで、今回を機にソースコードを記事内に埋め込みしてハイライト表示してみました。
埋め込み方法についての紹介・比較について別記事で公開しています。

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

【徹底比較】WordPress記事へのソースコード埋め込み方法紹介

この記事について WordPressでのソースコードの埋め込み方法で迷っている方向けの記事です。 「WordPressでソースコードを埋め込みたいけど、どんな方法がいいの?」 こういった疑問にお答えし ...

続きを見る

今回、ソースコードの埋め込みに「highlight.js」というJavaScriptのライブラリを使用しました。

highlight.jsを選んだ理由

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

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

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

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

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」から該当するプログラミング言語を探します。

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

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

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

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

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

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

例:「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に変更)。

プログラミング言語の表示例

プログラミング言語をいくつか表示してみます。
「Monokai Sublime」という、sublimetextのようなスタイルを採用しました。

HTML

<html>
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<div class="dummy-block">
			<p>dummy</p>
		</div>
	</body>
</html>

CSS

body, .sample {
  color: #333333; background: #600;
  font-family: Meiryo, sans;
  --heading-1: 30px/32px Helvetica, sans-serif;
}

JavaScript

<script type="text/javascript">
	function altRan() {
		var r = Math.random();
		document.getElementById("rnd").innerHTML = r;
	}
</script>

まとめ

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

プロフィール

当ブログにアクセスしていただいてありがとうございます。 管理人の「ライ」と申します。

続きを見る

テスト

テスト2

-ブログ運営

Copyright© HaveNots , 2020 All Rights Reserved.