WordPressサイトで記事にソースコードをそのまま表示させる際に、WordPressプラグインではなく、jQueryプラグイン「highlight.js」で表示させる方法です。

これによって、WordPressサイトの表示速度改善に繋がるでしょう。

準備

  1. 公式ページへアクセスします。

    イメージ33652

  2. Get version *,*,*をクリックし、cdnjsかjsdelivrのcdnコードをコピーします。

    イメージ33653

  3. <head></head>内にCSSファイルを、</body>直前にJSファイルを読み込みます。

    CSS

    	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/styles/default.min.css">
    </head>
    	

    JavaScript

    	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/highlight.min.js"></script>
    
    	
  4. JSファイルに続けて、highlight.jsを実行させるスクリプトを記述します。

    	<script type="text/javascript">
    	$(document).ready(function() {
    		$('pre').each(function(i, block) {
    			hljs.highlightBlock(block);
    		});
    	});
    	</script>
    	

使い方

使い方は、表示させたいソースコードを<pre></pre>で囲むだけです。

※HTMLタグを含むコードは、囲む前にエスケープ処理をする必要がありますので、投稿画面にあるHTML Entitiesボタンでエスケープします。

イメージ33654

ハイライトは、下記のように言語を判別して自動で行われます。

HTMLのハイライト

<div>
	<p>Hello!</p>
</div>

CSSのハイライト

p {
	color:#777;
	padding:5px;
	cursor:pointer;
}

JavaScriptのハイライト

$(function(){
	$('p').click(function(){
		$(this).css({
			'backgroundColor':'#ccc'
		});
	});
});

参考文献

ソースコードを表示するにはhighlight.jsが軽量ですごくいい!Crayonとも互換性あり -SAKULIFE
https://39life.net/highlightjs/

以上で、WordPressプラグインを使わずに記事中にソースコードを表示させる方法を終わります。

SHAREこの記事をシェアする