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

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

レビュー・紹介 Google Web スキルアップ CSS HTML JavaScript SyntaxHighlighter


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