ブログ等でソースコードを表示するときにハイライトされていると見やすいですね。僕のブログの場合は黒っぽい背景になるように設定しています。
この記事では、CDNを使ってもっとも簡単に実装できる方法を紹介します。
- highlight.jsを簡単に導入可能
- FTPソフトを使わずにfunctions.phpにコード追加するだけでOK
- プログラミング知識が一切無くても大丈夫
- ブログ初心者でももちろんOK
どちらかというと既存のブログに反映させたい方向けになります。テーマを使ってるといじるの大変だったりどこをいじっていいか分からなかったりするので。
それでは詳しく解説します
結論：以下のコードをコピペでOK
WordPressの管理画面を開いて、外観＞テーマエディタ＞functions.phpを開き、以下のコードをコピペしてください！
準備は以上です
if (!is_admin()) {
function my_wp_enquete_files()
{
wp_enqueue_style('highlight_css', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/ocean.min.css', array(), '10.7.1');
wp_enqueue_script('highlight_js', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/highlight.min.js', array(), '10.7.1', 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);
}本来であれば、highlight.jsをダウンロードしてFTPでアップロードしてというやり方の方が好ましいかもしれませんが、functions.phpに書く、且つ、CDNで読み込むほうが手順が少なくて楽です。
CSSはたくさん種類があるので、好きなものを
wp_enqueue_style('highlight_css', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/ocean.min.css', array(), '10.7.1');
背景色や文字の色はたくさん種類があります。ココに記述してあるコードはすべて代用可能なので、上記のURLの部分だけ好きなものに変えてください！
CDN一覧：https://cdnjs.com/libraries/highlight.js
※末尾がCSSのものから選んでね
以下の記事に少しサンプルが載ってます
ソースコードをハイライト表示させる方法
主に使えるブロックエディタは2種類あります
- コード
- カスタムHTML
コードの中に書くのが楽かと！
また、僕は左上に「HTML」や「PHP」と表示されるように少しCSSを書き足しています。詳細は以下の記事に詳しく書いてありますのでそちらを参考にしてください。
コードに書くのが楽とお伝えしましたが、この方法だと欠点があり、稀にコード種別を認識してくれないことがあります。それを避けたい場合はカスタムHTMLにしっかりと記述したほうがいいでしょう。以下のように記述すればclass名から判別して反映されます。
<pre><code class="html">
ここにコードを記載
</code></pre>またHTMLを書くときはエスケープしましょう。そうでないとHTMLはHTMLとして認識されてしまうので、ソースコードの表示がうまく出来ないことがあります。エスケープがわからない方は https://syncer.jp/how-to-use-highlightjs こちらに少し詳細書いてあるので確認してみてください！
さいごに
自作テーマで導入するときは読み込み順だったりが原因で1回で実装出来ない話を耳にしますが、この方法なら問題なく実装可能ですので参考にしてください。
コメント