Google謹製シンタックスハイライト「Google Code Prettifier」をアドビ謹製フォント「Source Code Pro」とあわせて導入しました!
Code by Salavat Khanov, on Flickr
解説サイトは味気ないですが、導入後のコードは彩り豊かになります。
Google Code Prettifier セットアップ
- スタイルシート(css)とJavaScriptファイル(js)のダウンロード(URL:Downloads - google-code-prettify - syntax highlighting of code snippets in a web page - Google Project Hosting)
- ページに以下のスクリプトとリンクタグを追加します。(cssとjsファイルがサーバ上にあること)
- bodyタグに「onload="prettyPrint()"」を追加します。
- お好みのカラーリングを得るためにスタイルシートを変更する(省略可)
<link href="prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="prettify.js"></script>
実際に使う
ハイライトしたい部分を
<pre class="prettyprint"></pre>
で囲むだけです。
こんな具合に表示されていればOK。
Source Code Pro セットアップ
Google Web Fontを使うことで、自分好みのフォントがカンタンに変更できます。今回は私の中でイチオシのフォント「Source Code Pro」を使う手順を紹介します。
まずは、以下のコードを追加します。
<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
「Google Code Prettifier セットアップ」の手順1でダウンロードしたスタイルシートをエディタで開き、以下のスタイルを追加します。
.prettyprint{font-family:'Source Code Pro'}
サンプルHTML
以下のように記述すると、
<html> <head> <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="css/prettify.css" /> <script src="js/prettify.js"></script> </head> <body onload="prettyPrint()"> <pre class="prettyprint"> p { color:red; font-size:14px; font-weight:bold; } div { border:solid 1px black; width:200px; } </pre> </body> </html>
こんなふうに表示されていれば成功です!
p { color:red; font-size:14px; font-weight:bold; } div { border:solid 1px black; width:200px; }
JavaScriptファイル1つ、スタイルシート1つでできるお手軽シンタックスハイライトでした。フォントは好みに合わせて変更してみてください。