highlight.jsでソースコード表示をリッチにする

今使っているテーマでは、ソースコード表示に飾りっ気が無くて、なんとかならないかな…と考えていたところ、twitterで見かけたhighlight.jsでの実装に目を止めました。

定型文のコード追加だけで、リッチに仕上がるみたいなので、少し試してみようと思います。

実装手順は下記のURLを参照。

イラストスイッチ「highlight.jsを使って、WordPressでソースコードを表示する【プラグイン無し】」

バージョンは最新の数字に変更して、後はスタイル（CSS）を好みのスタイル名に変えるだけ。簡単！

スタイルを選べるのは良いですね。
私は、sublimeを使っていた事もあって、見慣れている「monokai-sublime」を選択しました。

if(!is_admin()){
    function my_wp_enquete_files() {
        wp_enqueue_style( 'highlight_css', '//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.3/build/styles/default.min.css', array(), '10.0.3' );
        wp_enqueue_script( 'highlight_js', '//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.3/build/highlight.min.js', array(), '10.0.3', true );
    }
    add_action( 'wp_enqueue_scripts', 'my_wp_enquete_files' );

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

これは良き(*´ω｀*)