【SANGOカスタマイズ】highlight.jsでソースコード表示をかっこよくする方法

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

WordPressテーマ SANGOにhighlightjsを導入したい
SANGOでソースコードのシンタックスハイライトをAtomエディタと同じにしたい
WordPressでソースコードをかっこよく表示させたい
ブログでhtmlやcssのソースコードに自動で色をつけるにはどうしたら…

という方のお悩みを解決します！

この記事で紹介する内容を実践すれば、WordPressブログで表示するソースコードをかっこよくすることができます。

それでは見て参りましょう〜！

MEMO

この記事のTipsの完成形は当ブログのソースコード表示です。
記事の内容に沿ってSANGOテーマをカスタマイズすれば当ブログのソースコードと全く同じ見た目を再現できます。

SANGOのソースコード表示をかっこよくする方法
まとめ
SANGOカスタマイズ記事まとめ

SANGOのソースコード表示をかっこよくする方法

子テーマのfunctions.phpでhighlight.jsを読みこみ設定

まず、子テーマのfunctions.phpで
「CDNのhighlightjsの読み込み」と「highlightjsの初期化スクリプトファイルの読み込み」を以下のように追記します。

sango-child/functions.php

<?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?'. date("ymdHis", filemtime( get_stylesheet_directory() . '/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( "code-customize.js", get_stylesheet_directory_uri() . '/code-customize.js', '', [], '1.0', true );
}

任意のjsファイルでhighlight.js実行のスクリプトを書く

sango-chid/以下に任意で（今回はcustomize.jsという名前）jsファイルを作成し、以下スクリプトを書いて保存します。

sango-child/code-customize.js

hljs.initHighlightingOnLoad();

子テーマのstyle.cssにシンタックスハイライトのスタイルを追加する

最後に、子テーマのstyle.cssにシンタックスハイライトのスタイルを追記して、SANGOテーマの見た目を上書きます。

今回は、ぼくが普段使っているAtomエディタの見た目「Atom One Dark」を再現します。

上書き用のCSSは以下のページ（highlight.jsのGitHubページ）からコピーしましょう。

参考 highlightjsGitHub

ちなみに、シンタックスハイライトの見た目はAtom One Dark以外にも30種類以上あります。
以下ページでデモを確認できるのでお好みのスタイルを探してみてください〜

参考シンタックスハイライトの見た目一覧highlightjs

少し長いですが、以下コードがAtom One Darkの見た目を再現するCSSです。

ぺぺっと貼り付けて保存しましょう。

sango-child/style.css

/*
Atom One Dark by Daniel Gamage
Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
base:    #282c34
mono-1:  #abb2bf
mono-2:  #818896
mono-3:  #5c6370
hue-1:   #56b6c2
hue-2:   #61aeee
hue-3:   #c678dd
hue-4:   #98c379
hue-5:   #e06c75
hue-5-2: #be5046
hue-6:   #d19a66
hue-6-2: #e6c07b
*/

#content .hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  color: #abb2bf;
  background: #282c34;
}

#content .hljs-comment,
#content .hljs-quote {
  color: #5c6370;
  font-style: italic;
}

#content .hljs-doctag,
#content .hljs-keyword,
#content .hljs-formula {
  color: #c678dd;
}

#content .hljs-section,
#content .hljs-name,
#content .hljs-selector-tag,
#content .hljs-deletion,
#content .hljs-subst {
  color: #e06c75;
}

#content .hljs-literal {
  color: #56b6c2;
}

#content .hljs-string,
#content .hljs-regexp,
#content .hljs-addition,
#content .hljs-attribute,
#content .hljs-meta-string {
  color: #98c379;
}

#content .hljs-built_in,
#content .hljs-class .hljs-title {
  color: #e6c07b;
}

#content .hljs-attr,
#content .hljs-variable,
#content .hljs-template-variable,
#content .hljs-type,
#content .hljs-selector-class,
#content .hljs-selector-attr,
#content .hljs-selector-pseudo,
#content .hljs-number {
  color: #d19a66;
}

#content .hljs-symbol,
#content .hljs-bullet,
#content .hljs-link,
#content .hljs-meta,
#content .hljs-selector-id,
#content .hljs-title {
  color: #61aeee;
}

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

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

#content .hljs-link {
  text-decoration: underline;
}

ソースコードボックスの余白をなくしたい。
ソースコードボックスの左上の角丸だけなくしたい。

という場合は以下のスタイルも追記してあげましょう。

sango-child/style.css

.entry-content pre {
  border: none;
  padding: 0;
  background: #fff;
}
.entry-content code,
.entry-content .haiiro{
  border-radius: 0 5px 5px 5px;
}