SANGOに小テーマを追加してソースコードをシンタックスハイライトする

WordPressのテーマ「SANGO」でソースコードの表示をシンタックスハイライトさせて、より見やすくします。
またテーマのアップデートに影響が出ないように小テーマを追加して対応させる。

SANGOに小テーマを追加する

小テーマの追加方法はSANGO公式のカスタマイズガイドに詳しく書いてあるので、そっちを参照する。
CSSを追加する方法もあるけど小テーマの方が既存のテーマ影響がないのですき。(SANGOは小テーマの導入も丁寧にサポートしてくれるので導入する理由も大きい)

参考

WordPressで子テーマを活用して安全にカスタマイズを行う方法SANGOカスタマイズガイド

小テーマの適応はホントに簡単。
上記、サイトから小テーマをダウンロードして、そのまま自分のwordpressにアップロードするだけ。

シンタックスハイライトさせる

highlight.js を使うのが楽なので、公式を見つつ導入してみる。

参考

highlight.js

導入は↓をコピペするだけ。
ちなみスタイルの種類は豊富なのでデモページから好みのものを選択する。
※styleは↓のcssのファイル名を変更する(default.min.cssなど)
※9.14.2のバージョンはここの「Get Version xxx」を参考に指定する

関数(functions.php)

add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles() {
    wp_enqueue_style('highligh.css', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/styles/solarized-dark.min.css', [], '9.14.2');
    wp_enqueue_script('highlight.js', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js', [], '9.14.2', true);
}

add_action('wp_footer', 'initHighlightjs', 30);
function initHighlightjs() {
    echo '<script>hljs.initHighlightingOnLoad();</script>';
}

スタイルシート(style.css)

pre , code はSANGOのテーマでもスタイルを当ててるため、小テーマで更新する。
色はsolarized-darkに合わせる。

.entry-content pre code.hljs {
    background: #002b36;
}

.entry-content pre {
    background: #002b36;
}

まとめ

小テーマを導入する。highlight.jsを導入する。適応する。以上

導入まではとても簡単。ただコードとしてはまだ見にくいのでもう少し見やすくする予定。
wordpress初心者だけどがんばる。