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

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

JavaScriptライブラリ「highlight.js」 を使用して、WordPressにソースコードをハイライト表示し、Gutenbergで編集する方法です。

[contents] [/contents]

highlight.jsの公式ページでのデモで好きなハイライト表示のスタイルを決める

公式サイトのトップページにある「style」の部分をクリックしてstyle名をメモしておきます。

[box icon=”link” text=”highlight.js公式ページリンク”] highlight.js [/box]
[box]

下記のページの”Styles”からもスタイル一覧を確認できます。

https://highlightjs.org/static/demo/ [/box]

functions.phpでhighlight.jsのstyleとJavaScriptを読み込む

functions.phpで下記コードを記述してファイルを読み込みます。

“default”の部分に先ほどメモをしたスタイル名を記述します。
“9.15.8”はhighlight.jsのバージョンです。(2019.7.21現在)

functions.php

if(!is_admin()){
    function my_wp_enquete_files() {
        wp_enqueue_style( 'highlight_css', '//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.15.8/build/styles/default.min.css', array(), '9.15.8' );
        wp_enqueue_script( 'highlight_js', '//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.15.8/build/highlight.min.js', array(), '9.15.8', 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 );
}
[box icon=”pencil” text=”highlight.jsの現在のバージョンをチェック”]

highlight.jsの現在のバージョンをチェックするにはダウンロードページにアクセスしてCDN欄の数字を確認してください。

https://highlightjs.org/download/ [/box]

Gutenbergでソースコードを記述

“ブロックの追加”で”ソースコード”を選択してコードを入力します。


以上の手順で、選択したstyleでソースコードが表示されるかと思います。

この記事をシェア

Categories

Profile

兵庫県神戸市でWEB/DTPまわりのフリーランスをしています。
当ブログは主に業務で出会った諸々の備忘録です。

イラストスイッチ