Code Prettifyを利用する

Googleの「Code Prettify」は、ウェブページ内でプログラミングコードを読みやすく色分けしてくれるJavaScriptのプログラムです。CSSとセットで利用します。

  1. GitHubからダウンロードします
    • アーカイブリストの右上にある［< >Code］プルダウンメニューから［Download ZIP］を選択します
  2. 解凍し、［src］フォルダ内の以下の3ファイルをサーバーへアップロードします
    • prettify.css
    • prettify.js
    • lang-css.js
  3. アップロードしたCSSファイルやJavaScriptファイルをロードするコードをHTMLに記述します
  4. 自前のJavaScriptファイルに［prettyPrint();］を記述し、ページの読込み時にCode Prettifyを起動させます
  5. Code Prettifyを適用したい<pre>タグもしくは<code>タグに、クラス名「prettyprint 」を付与します
  6. さらに、Code Prettifyを適用させたいテキストがCSSであれば「lang-css」クラスを追加します
  7. サイトのテーマCSSに以下のようなスタイルを追加してカスタマイズします
.prettyprint {
  border: 1px solid #ccc!important;
  padding: 0!important;
  border-radius: 0;
  background-color: #eee;
}
.prettyprint code {
  white-space: pre;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  padding: 1em!important;
}