SANGOにhighlight.jsを導入してシンタックスハイライトをかっこよくしてみた

どうも、すわんです。

SANGOには、コードをシンタックスハイライトする機能が無いため、ブログにコードを書く気があまり起きませんでした。
シンタックスハイライトさせたいなーとぼんやり思っていて、放置気味でしたが、いざやってみるとすぐできました。笑

今回は、highlight.jsを利用して、簡単・お手軽にコードをシンタックスハイライトさせる方法をご紹介したいと思います。

また、WordPressのテンプレートSANGO向けの設定ではありますが、

その他のテンプレートを使ったWordPressユーザーやWordPressでなくともWEBサイト運営されている方も応用できる内容です。

highlight.jsの導入方法については、カフーブログさんの内容を踏襲しております。

SANGOって何？という方はこちらをどうぞ。

WordPressのテーマをSimplicity2 → SANGOに変えて3ヶ月経過後の感想

それでは、SANGOにhighlight.jsを導入していきましょう。

事前準備

今回に限った話ではなく、WordPressテーマをカスタマイズする際には、自分の使用しているテンプレートの子テーマをカスタマイズしていくことをオススメします。

子テーマをカスタマイズすることで、カスタマイズを間違えてしまった際に元に戻すといったことが容易にできます。

詳しくはSANGOのこちらのページがわかりやすいです。

SANGOでhighlight.jsを読み込む

事前準備が完了したら、function.php にhighlight.jsを読み込む設定を書いていきます。

function.phpの場所は、wp-content/themes/作成した子テーマ(sango-theme-child等)/にあります。

WordPress上で編集するのであれば、ダッシュボード > 外観 > テーマの編集で編集することができます。

function.php


//子テーマのCSSの読み込み
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'child-style', 
  	get_stylesheet_directory_uri() . '/style.css', 
  	array('sng-stylesheet','sng-option')
	);
wp_enqueue_script('highlight.js', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js', [], '9.14.2', true );
wp_enqueue_script( "script.js", get_stylesheet_directory_uri() . '/script.js', '', [], '1.0', true );

}
/************************
 *function.phpへの追記は以下に
 *************************/




/************************
 *function.phpへの追記はこの上に
 *************************/

手っ取り早く、もともと存在した下記のメソッドに読み込み設定を追加します。(本来はadd_actionメソッドで追加したメソッド内に書くべき)

function theme_enqueue_styles()

そして、下記がCDN経由でhighlight.jsを読み込んでいるコードです。

wp_enqueue_script('highlight.js', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js', [], '9.14.2', true );

次に、highlight.jsをロードするscript.jsファイルを読み込む設定をします。
script.jsファイルは、後ほど wp-content/themes/sango-theme-child/に設置します。

wp_enqueue_script( "script.js", get_stylesheet_directory_uri() . '/script.js', '', [], '1.0', true );

get_stylesheet_directory_uri()は、WordPressのメソッドで、子テーマまでのパス(wp-content/themes/sango-theme-child/)を返してくれるだけです。

script.jsの設置

上記でscript.jsを読み込む設定をしましたが、まだファイルが設置されていないので、

wp-content/themes/sango-theme-child/に script.jsを新規で設置しましょう。

またscript.jsには以下の記述を書きます。

script.js

hljs.initHighlightingOnLoad();

CSSの上書き設定

次にSANGOのCSSをhighlight.jsのCSSの優先順位が高くなるように上書き設定をしていきます。

下記は、HopscotchのシンタックスハイライトのCSSです。適宜ご自身の好きなテーマに合わせて上書きしてください。

style.css



@charset "UTF-8";
/*
Theme Name: SANGO Child
Theme URI: https://saruwakakun.design
Author: SARUWAKA
Author URI: https://saruwakakun.com
Template: sango-theme
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/

#content pre {
padding: 0;
}

/*
* Hopscotch
* by Jan T. Sott
* https://github.com/idleberg/Hopscotch
*
* This work is licensed under the Creative Commons CC0 1.0 Universal License
*/

/* Comment */
#content .hljs-comment,
#content .hljs-quote {
color: #989498;
}

/* Red */
#content .hljs-variable,
#content .hljs-template-variable,
#content .hljs-attribute,
#content .hljs-tag,
#content .hljs-name,
#content .hljs-selector-id,
#content .hljs-selector-class,
#content .hljs-regexp,
#content .hljs-link,
#content .hljs-deletion {
color: #dd464c;
}

/* Orange */
#content .hljs-number,
#content .hljs-built_in,
#content .hljs-builtin-name,
#content .hljs-literal,
#content .hljs-type,
#content .hljs-params {
color: #fd8b19;
}

/* Yellow */
#content .hljs-class .hljs-title {
color: #fdcc59;
}

/* Green */
#content .hljs-string,
#content .hljs-symbol,
#content .hljs-bullet,
#content .hljs-addition {
color: #8fc13e;
}

/* Aqua */
#content .hljs-meta {
color: #149b93;
}

/* Blue */
#content .hljs-function,
#content .hljs-section,
#content .hljs-title {
color: #1290bf;
}

/* Purple */
#content .hljs-keyword,
#content .hljs-selector-tag {
color: #c85e7c;
}

#content .hljs {
display: block;
background: #322931;
color: #b9b5b8;
padding: 0.5em;
}

#content .hljs-emphasis {
font-style: italic;
}

#content .hljs-strong {
font-weight: bold;
}

以上で設定は完了です！今回の記事のソースコードのブロックが完成品のものとなります！