SANGOのコードをハイライト表示にする方法【WordPress】

WordPressテーマのSANGOのコードをハイライト表示にする方法をご紹介します。

以下のようにコードをハイライト表示にします。

package main

import "fmt"

func main() {
    fmt.Println("Hello, World!")
}

技術系の記事ではコードはカラフルにして見やすい記事を作成しましょう！

手順

子テーマのfunction.phpに追記

以下を追記

 sango-child/functions.php 

wp_enqueue_script('highlight.js', '//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.3.1/build/highlight.min.js', [], '9.14.2', true );
wp_enqueue_script( "code-customize.js", get_stylesheet_directory_uri() . '/code-customize.js', '', [], '1.0', true );

1行目：highlight.jsを読み込む
2行目: highlight.js実行のjsファイル(これから作成)を読み込む

編集は「外観 > テーマエディタ」からも可能です。

全体はこんな感じです。

 sango-child/functions.php 

<?php
//子テーマのCSSの読み込み
add_action( 'wp_enqueue_scripts', 'enqueue_my_child_styles' );
function enqueue_my_child_styles() {
  wp_enqueue_style( 'child-style', 
  	get_stylesheet_directory_uri() . '/style.css', 
  	array('sng-stylesheet','sng-option')
	);
} 
/************************
 *functions.phpへの追記は以下に
 *************************/
// コードハイライト
wp_enqueue_script('highlight.js', '//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.3.1/build/highlight.min.js', [], '9.14.2', true );
wp_enqueue_script( "code-customize.js", get_stylesheet_directory_uri() . '/code-customize.js', '', [], '1.0', true );

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

highlight.js実行のjsファイルを作成

 sango-child/code-customize.js 

hljs.initHighlightingOnLoad();

highlight.jsのスタイルを子テーマのcssファイルに追記

highlight.jsには色々なスタイルが用意されています。以下のページから好きなスタイルを選びましょう。

https://highlightjs.org/static/demo/

好きなスタイルのcssをこちらからコピーします。

今回はVS2015を選択した例です。

sango-child/style.css

/*  highlight.js Visual Studio 2015 dark style */
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #1E1E1E;
  color: #DCDCDC;
}

.hljs-keyword,
.hljs-literal,
.hljs-symbol,
.hljs-name {
  color: #569CD6;
}
.hljs-link {
  color: #569CD6;
  text-decoration: underline;
}

.hljs-built_in,
.hljs-type {
  color: #4EC9B0;
}

.hljs-number,
.hljs-class {
  color: #B8D7A3;
}

.hljs-string,
.hljs-meta-string {
  color: #D69D85;
}

.hljs-regexp,
.hljs-template-tag {
  color: #9A5334;
}

.hljs-subst,
.hljs-function,
.hljs-title,
.hljs-params,
.hljs-formula {
  color: #DCDCDC;
}

.hljs-comment,
.hljs-quote {
  color: #57A64A;
  font-style: italic;
}

.hljs-doctag {
  color: #608B4E;
}

.hljs-meta,
.hljs-meta-keyword,
.hljs-tag {
  color: #9B9B9B;
}

.hljs-variable,
.hljs-template-variable {
  color: #BD63C5;
}

.hljs-attr,
.hljs-attribute,
.hljs-builtin-name {
  color: #9CDCFE;
}

.hljs-section {
  color: gold;
}

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

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

/*.hljs-code {
  font-family:'Monospace';
}*/

.hljs-bullet,
.hljs-selector-tag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #D7BA7D;
}

.hljs-addition {
  background-color: #144212;
  display: inline-block;
  width: 100%;
}

.hljs-deletion {
  background-color: #600;
  display: inline-block;
  width: 100%;
}

SANGOのデフォルトのコードスタイルを修正します

sango-child/style.css

/*sangoのコードスタイル修正 */
.entry-content pre.wp-block-code {
  padding: 0;
}
.entry-content pre.wp-block-code code {
  margin: 0;
  padding: 0.7em 0.7em;
  background: #1e1e1e;
  color: #dcdcdc;
}

以上です！

参考

https://yuyauver98.me/sango-syntax-highlight/