google-code-prettify + jQuery でソースコードをハイライトする
ソースコードをハイライト表示してくれる JavaScript ライブラリは数多くありますが、今回、このブログに google-code-prettify というライブラリを導入してみました。 少し前までは dp.SyntaxHighlighter（ソースコードをカラフルに読みやすくする - dp.SyntaxHighlighter ）を使っていましたが、どうもイマイチ好きになれなかったので使用を...
ソースコードをハイライト表示してくれる JavaScript ライブラリは数多くありますが、今回、このブログに google-code-prettify というライブラリを導入してみました。
少し前までは dp.SyntaxHighlighter（ソースコードをカラフルに読みやすくする - dp.SyntaxHighlighter ）を使っていましたが、どうもイマイチ好きになれなかったので使用をやめていましたので、久しぶりのハイライト表示です。
google-code-prettify については、導入方法も含めて「【ハウツー】ハイライトもGoogle流 - "google-code-prettify"でソースコードに色付けを | マイコミジャーナル」で分かりやすく説明されていますので、ここでは jQuery を使っている環境下で、ブログ記事内のソースに一切手を加えない導入方法を紹介します。
もちろん、jQuery を使わなくても導入できるので、その場合はマイコミさんの記事をご覧ください。
まず、google-code-prettifyからファイルをダウンロードして解凍します。
解凍したフォルダの中に、prettify.js と prettify.css が入っているので、それぞれサーバーにアップロードします。
- src
- prettify.js
- prettify.css
続いて、head 要素内で以下のようにしてアップロードしたファイルを読み込みます。ファイルへのパスは適宜変更してください。
<link href="/css/prettify.css" rel="stylesheet" type="text/css"/>
<script src="/js/prettify.js" type="text/javascript"></script>さて、マイコミさんの記事だと、body onload="prettyPrint()" で呼び出し、pre 要素に prettyprint クラスを追加する、という流れになりますが、せっかく jQuery を使っている（それが前提の記事です）のですから、prettyprint クラスの付与も自動化しましょう。
head 要素内で、先ほど追加した JavaScript の読み込みよりも後の行に、以下のように記述します。
<script type="text/javascript">
// <![CDATA[
$(document).ready(function(){
$('pre').addClass('prettyprint');
prettyPrint();
});
// ]]>
</script>これで、記事内のソースコードに手を加えることなく導入できます。
, Updated 2019-06-25