注目キーワード
  1. 体験談
  2. ブログ開設
  3. 仕事
WordPress アイキャッチ画像

<--WordPress--> 記事内のHTMLコード表示に【色】をつける方法

・この記事を読むと

自分のブログ記事内に、HTMLコード等のソースコードを紹介したい場合の方法が分かります。

記事内に表示したHTMLコードを色付けして見やすくする方法

highlight.jsを使う方法

 

highlight.jsとは、Webの構文強調表示を行うjavascriptです。この「highlight.js」を使用した方法を、動画と一緒に解説します。

 

「解説動画(音声なし)」

 

設定の手順は、動画で詳しく解説していますので、ぜひご覧ください!

 

手順1

・いま使っているテーマの「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' );

・記述したら、ファイルを保存します。

 

手順2

・WordPressの投稿エディタ(テキストモード)で、記事内に表示させたいソースコードを「<pre><code>●●●</code></pre>」タグで囲みます。

<pre><code>

「ここに表示させたいソースコード」

</code></pre>

・プレビュー画面で確認します。

・完了です。

 

うまく表示できないときの注意点

 

表示させたいソースコードの中に、特殊文字が含まれていると、記事内に表示できない場合があります。その場合の記述方法は別記事で(下記リンク先)で説明します。

 

WordPress アイキャッチ画像
最新情報をチェックしよう!