・この記事を読むと
自分のブログ記事内に、HTMLコード等のソースコードを紹介したい場合の方法が分かります。
記事内に表示したHTMLコードを色付けして見やすくする方法
highlight.jsを使う方法
※ highlight.jsとは、Webの構文強調表示を行うjavascriptです。この「highlight.js」を使用した方法を、動画と一緒に解説します。
「解説動画(音声なし)」
設定の手順は、動画で詳しく解説していますので、ぜひご覧ください！
手順１
・いま使っているテーマの「function.php」のファイルに、下記コードを記述します。
function hljs_load() {
if ( is_singular() ) {
wp_enqueue_style( 'hljs-style', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/default.min.css' );
wp_enqueue_script( 'hljs-script', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js', array(), null, true );
wp_add_inline_script( 'hljs-script', 'hljs.initHighlightingOnLoad();' );
}
}
add_action( 'wp_enqueue_scripts', 'hljs_load' );・記述したら、ファイルを保存します。
手順２
・WordPressの投稿エディタ(テキストモード)で、記事内に表示させたいソースコードを「<pre><code>●●●</code></pre>」タグで囲みます。
例
<pre><code>
「ここに表示させたいソースコード」
</code></pre>
・プレビュー画面で確認します。
・完了です。
うまく表示できないときの注意点
表示させたいソースコードの中に、特殊文字が含まれていると、記事内に表示できない場合があります。その場合の記述方法は別記事で(下記リンク先)で説明します。
