WordPressの場合はSyntaxHighlighter Evolvedプラグインを利用することで簡単にソースコードをハイライト表示させることが可能ですが、WordPressではないブログやサイトの場合にはGoogle Code Prettifyを使うと簡単にハイライト表示させることができます。
Bootstapでも使われていて見た目もカッコ良いですし、何より SyntaxHighlighterの単独版よりも導入のハードルが低いのが嬉しいです。
Google Code Prettify のダウンロード
以下のページよりGoogle Code Prettifyのファイルをダウンロードします。google-code-prettify
Google Code Prettify の設置
Google Code Prettifyのデータを一式ダウンロードしたら、prettify.cssとprettify.jsのファイルを読み込ませます。|
1 2 3 4 5 6 7 8 |
<link rel="stylesheet" href="prettify.css"> <script src="jquery.min.js"></script> <script src="prettify.js"></script> <script type="text/javascript"> $(function(){ prettyPrint(); }); </script> |
※prettify.jsはフッター（</body>直前）に置いても動きます。
prettyPrint(); の実行
上記コードはjQueryを導入している場合ですが、prettyPrint()はbodyでonloadイベントで呼び出すこともできます。
|
1 |
<body onLoad="prettyPrint()"> |
Google Code Prettify の使い方
Google Code Prettifyの基本的な使い方ですが、<pre>タグにprettyprintのクラスを付けて、ハイライト表示させたいソースコードをマークアップします。
|
1 2 3 |
<pre class="prettyprint"> <link rel="stylesheet" href="google-code-prettify/prettify.css"> <script src="prettify.js"></script> |
行番号を表示する
class="prettyprint"を指定しただけでは行番号が表示されないので、<pre>タグにclass="linenums"のクラスを付け足してあげます。
|
1 2 |
<link rel="stylesheet" href="google-code-prettify/prettify.css"> <script src="prettify.js"></script> |
コメント