【ワードプレス】WordPressでソースコード掲載欄をプラグインを使用せずにハイライトさせる方法について

表題の件について、筆者の記事は割とソースコードを掲載する内容のものが多いため、分かりやすくなるように表示に手を加えました。
編集方法は色々ありますが、一番手軽にできた方法を紹介します。

highlight.jsの利用

highlight.jsは軽量でサクサク表示してくれるJavaScriptライブラリで、WordPressプラグインをむやみに増やしたくない方にお勧めです。バージョンアップも頻繁に行われており、新しいデザインや言語も追加されていっているので、定期的に変えてみると楽しめるかもしれません。

highlight.jsの使い方

以下コードを、wordpressテーマのfunctions.phpに追加します。


add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
function theme_name_scripts() {
	wp_enqueue_style( 'highlightjs', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/styles/ir_black.min.css', array(), '8.7', 'all' );
	wp_enqueue_script( 'highlightjs', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/highlight.min.js', array(), '8.7', true );
}
設置例
Code

Code

以下コードをfooter.phpに追加します。


<?php wp_footer(); ?>
<script>hljs.initHighlightingOnLoad();</script>
設置例
Code

Code







[amazon_link asins=’B00HFUNWLM,B005R0Y1E4,B01N1T1HE2,B00HFUNX3Y,B005792EWQ,B01HMGJYNS,B00HUHKNKS,B01G3QIUWE,B00HFUNXJ8′ template=’ProductCarousel’ store=’kuma055-22′ marketplace=’JP’ link_id=’72d21030-0a88-11e9-b7a5-9beef6f24b39′]

コメント

タイトルとURLをコピーしました