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







コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です