• RSS

[JS]ソースコードをハイライト表示できる「Google Code Prettify」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

WordPressの場合は SyntaxHighlighter Evolved プラグインを利用することで簡単にソースコードをハイライト表示させることが可能ですが、WordPressではないブログやサイトの場合には、Google Code Prettify を使うと簡単にハイライト表示させることができます。

Bootstapでも使われていて見た目もカッコ良いですし、何より SyntaxHighlighter の単独版よりも導入のハードルが低いのが嬉しいです。

Google Code Prettify のダウンロード

以下のページより Google Code Prettify のファイルをダウンロードします。


Google Code Prettify の設置

Google Code Prettify のデータを一式ダウンロードしたら、prettify.cssprettify.js のファイルを読み込ませます。
<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イベントで呼び出すこともできます。
<body onLoad="prettyPrint()">


Google Code Prettify の使い方

Google Code Prettify の基本的な使い方ですが、<pre> タグに prettyprint のクラスを付けて、ハイライト表示させたいソースコードをマークアップします。

こんな感じ。
<pre class="prettyprint">
<link rel="stylesheet" href="google-code-prettify/prettify.css">
<script src="prettify.js"></script>
</pre>
Google Code Prettify による実際のハイライトはこんな感じです。



行番号を表示する

class="prettyprint" を指定しただけでは行番号が表示されないので、<pre> タグに class="linenums" のクラスを付け足してあげます。
<pre class="prettyprint linenums">
<link rel="stylesheet" href="google-code-prettify/prettify.css">
<script src="prettify.js"></script>
</pre>
こんな感じで行番号が表示されます。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください