[JS]ソースコードをハイライト表示できる「Google Code Prettify」
スポンサード
こんな感じ。
スポンサード
WordPressの場合は SyntaxHighlighter Evolved プラグインを利用することで簡単にソースコードをハイライト表示させることが可能ですが、WordPressではないブログやサイトの場合には、Google Code Prettify を使うと簡単にハイライト表示させることができます。
Bootstapでも使われていて見た目もカッコ良いですし、何より SyntaxHighlighter の単独版よりも導入のハードルが低いのが嬉しいです。
目次
Google Code Prettify のダウンロード
以下のページより Google Code Prettify のファイルをダウンロードします。Google Code Prettify の設置
Google Code Prettify のデータを一式ダウンロードしたら、prettify.css と prettify.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 による実際のハイライトはこんな感じです。
1 2 | <link rel="stylesheet" href="prettify.css"> <script src="prettify.js"></script> |
行番号を表示する
class="prettyprint"
を指定しただけでは行番号が表示されないので、<pre>
タグに class="linenums"
のクラスを付け足してあげます。<pre class="prettyprint linenums"> <link rel="stylesheet" href="google-code-prettify/prettify.css"> <script src="prettify.js"></script> </pre>こんな感じで行番号が表示されます。
1 2 | <link rel="stylesheet" href="prettify.css"> <script src="prettify.js"></script> |
スポンサード
コメント