読者です 読者をやめる 読者になる 読者になる

Google謹製シンタックスハイライト「Google Code Prettifier」をアドビ謹製フォント「Source Code Pro」とあわせて導入しました!


Code by Salavat Khanov, on Flickr

解説サイトは味気ないですが、導入後のコードは彩り豊かになります。

Javascript code prettifier

Google Code Prettifier セットアップ

  1. スタイルシート(css)とJavaScriptファイル(js)のダウンロード(URL:Downloads - google-code-prettify - syntax highlighting of code snippets in a web page - Google Project Hosting
  2. ページに以下のスクリプトとリンクタグを追加します。(cssとjsファイルがサーバ上にあること)
  3. <link href="prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="prettify.js"></script>
    
  4. bodyタグに「onload="prettyPrint()"」を追加します。
  5. お好みのカラーリングを得るためにスタイルシートを変更する(省略可)

実際に使う

ハイライトしたい部分を

<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つでできるお手軽シンタックスハイライトでした。フォントは好みに合わせて変更してみてください。