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 アイキャッチ画像
最新情報をチェックしよう!
>大切なデータが突然消えた...( ̄O ̄;)

大切なデータが突然消えた...( ̄O ̄;)

えっ...
二週間かけて作ったデータが消えた...
何が起こったのか理解出来ず、しばし呆然。
私の時間を返してくれ!
【時を巻き戻す術はなし】

そういう経験をした方は少なくないはず。

さぁ、ownCloudでデータを二重化しときましょう!
実際に0円で導入し、運用しています。
→ 無料お問い合わせはコチラから

TKCオフィス仙台は「ホームページ制作、運営」その他をサポートします。
→ Webサイト・ブログ開設の無料相談はコチラから

CTR IMG