ブログでコードを紹介するなら【highlight.js】

公開日2021/12/30 最終更新日2022/01/14

web制作をしていると自分が悩んでなんとか実装したコードやおすすめコードなどを紹介したくなりますよね！
同じことで悩んだり、詰まっている方の助けにもなったり、備忘録にもなって一石二鳥！
でも、まさかそのままエディタにベタ書きで記事を書いてません？？
コーディングしているときのエディタのようにカラフルなコードを記事にしたくないですか？
【highlight.js】を使えば解決できます！紹介しますね！

functions.php

CDNで読み込むためfunctions.phpに下記コードを記述。これだけでhighlight.jsが使用可能です。

// highlight.jsの読み込み
function hljs_load() {
    if ( is_singular() ) {
        wp_enqueue_style( 'hljs-style', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/default.min.css' );
        wp_enqueue_script( 'hljs-script', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js', array(), null, true );
        wp_add_inline_script( 'hljs-script', 'hljs.initHighlightingOnLoad();' );
    }
}
add_action( 'wp_enqueue_scripts', 'hljs_load' );

色の変更

初期の色は「default.mim.css」になっています。この部分です。

wp_enqueue_style( 'hljs-style', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/default.min.css' );

このcssを好みのカラーに変更しましょう。
こちらからcss名をコピーしてこればオッケーです。
ちなみにこのブログのカラーは「monokai.min.css」です。

タグ

WordPress

TOPへ戻る

お問い合わせはこちら