インフラエンジニアログ

WordPressでhighlight.jsを利用する方法

目次

概要

WordPressの記事内で記述したコードの色分けをする方法。

 

前提条件

・WordPressがインストールされていること。
・WordPressのサイトがインターネット上に公開されていること。
・function.phpの編集が可能な権限を持っていること。

 

プラグインが重すぎる

WordPressのプラグインから「syntax highlight」と検索するとコードの色分けをしてくれるプラグインがいくつかあります。以前はプラグイン「SyntaxHighlighter Evolved」を使用していましたが、サイト表示が遅すぎる問題がありました。highlight.jsをど導入した結果、読み込みスピードが改善しました。

 

highlight.jsの設定方法

「highlight.js」というJavascriptのライブラリが公開されているので利用します。WordPressのテーマのfunction.phpを利用して、ライブラリを読み込みます。

 

①　WordPressをインストールしているサーバーにsshでログインします。

②　function.phpがあるディレクトリに移動します。

cd /var/www/html/wp-content/themes/(テーマ名)

 

③　function.phpのバックアップを取得します。

sudo cp -p function.php function.php.bak.yyyymmdd

 

④　function.phpの編集をします。

sudo vim function.php

 

⑤　以下のコードを追記して「highlight.js」を読み込ませます。

// highlight.jsの読み込み
function hljs_load() {
    if ( is_singular() ) {
        wp_enqueue_style( 'hljs-style', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/default.min.css' );
        wp_enqueue_script( 'hljs-script', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js', array(), null, true );
        wp_add_inline_script( 'hljs-script', 'hljs.initHighlightingOnLoad();' );
    }
}
add_action( 'wp_enqueue_scripts', 'hljs_load' );

 

色の変更

①　デフォルトは「default.min.css」なので、好きな装飾に変更します。

 wp_enqueue_style( 'hljs-style', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/default.min.css' );

②　https://highlightjs.org/static/demo/ の「Style」から任意の色を選びます。

③　https://github.com/highlightjs/highlight.js/tree/master/src/styles から対象のcssの名前をメモします。

④　「default.min.css」を「任意のCSS名.min.css」に変更します。

// highlight.jsの読み込み
function hljs_load() {
    if ( is_singular() ) {
	// default.min.cssからvs2015.min.cssに変更した例
        wp_enqueue_style( 'hljs-style', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/vs2015.min.css' );
        wp_enqueue_script( 'hljs-script', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js', array(), null, true );
        wp_add_inline_script( 'hljs-script', 'hljs.initHighlightingOnLoad();' );
    }
}
add_action( 'wp_enqueue_scripts', 'hljs_load' );

 

対象言語の追加

ハイライトできる言語はhighlight.jsの「Common」にしている言語のみで、対象外のコードは別途function.phpに追記する必要があります。

 

Common

.properties Apache config Bash C C#
  •  C++
 C-like foundation grammar for C/C++ grammars
CSS CoffeeScript Diff Go HTML,XML HTTP JSON
Java Javascript Kotlin Less Lua Makefile Markdown
Nginx config PHP PHP Template Perl Plain text Python Python REPL
Ruby SCSS SQL Shell Session Swift TOML,also INI Type Script
 YAML

 

Other

以下を参照ください。

https://highlightjs.org/download/

 

設定方法

①　https://highlightjs.org/download/ からCommonの言語のチェックを外し、Otherの中から設定したい言語を選択し「Download」をクリックします。

 

②　ダウンロードしたファイル「highlight.zip」をWordPressの管理メニュー「メディア」にコピーします。

　

 

③　ターミナル経由でログインします。

④　WordPressの「テーマディレクトリ」→「jsディレクトリ」に移動します。
※jsディレクトリが無い場合はテーマディレクトリに移動し「mkdir js」と入力し作成してください。

cd /var/www/html/wp-content/themes/(テーマ名)/js

 

⑤　アップロードしたZipファイルをjsディレクトリに移動します。

mv /var/www/html/wp-content/uploads/(アップロードディレクトリ)/highlight.zip .

※アップロード先がわからない場合は「メディア」→「highlight.zip」をクリックし、アップロード先を確認可能です。

 

⑥　highlight.pak.jsのみ解凍指定し、Zipファイルを解凍します。

unzip highlight.zip "highlight.pack.js"

 

⑦　highlight.zipを削除します。

rm highlight.zip

 

⑧　function.phpを編集、jsファイルを読み込むように記述します。

// highlight.jsの読み込み
function hljs_load() {
    if ( is_singular() ) {
        wp_enqueue_style( 'hljs-style', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/default.min.css' );
        wp_enqueue_script( 'hljs-script', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js', array(), null, true );
        wp_add_inline_script( 'hljs-script', 'hljs.initHighlightingOnLoad();' );
		
        // 他の言語を利用できるように、highlight.pack.jsの読み込み
        wp_enqueue_script( 'other-hljs-scriot', '/wp-content/themes/(テーマ名)/js/highlight.pack.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'hljs_load' );

 

ハイライトの設定方法

①　WordPressの投稿画面から「テキスト」に切り替えます。

 

②　対象コードの前後に以下を入力します。

<pre><code>対象のコード</code></pre>

 

※ ハイライトするコードを直接指定する場合(Powershellを指定する場合)

<pre><code class="powershell">対象のコード</code></pre>

 

ハイライト用のクイックボタン作成

テキストで「ハイライト用のクイックボタン」を作成し入力の手間を省く方法。

 

function.phpに以下を追加します。

if (!function_exists( 'add_quicktags_to_text_editor' ) ) {
	function add_quicktags_to_text_editor() {
		//スクリプトキューにquicktagsが保存されているかチェック
		if (wp_script_is('quicktags')){?>;
		<script>
			QTags.addButton('qt-precode','コード','<pre><code class="">','</code></pre>');
		</script>
		<?php
        }
	}
}
add_action( 'admin_print_footer_scripts', 'add_quicktags_to_text_editor' );