かわたま.net

Enjoy Creative! かわたまのwebメモ
rss twitter facebook

ソースコードをハイライトするgoogle-code-prettifyを使ってみた【実装手順】

2014 May 23

Tag:

ソースコードのハイライトするのに、今までSynatx Highlighterを使っていましたが、Googleが提供しているGoogle-Code-Prettifyに変えてみようと思います。

Google-Code-Prettifyの良いところ

＊プラグインなしで使える
＊始めの行番号が指定できる
＊可読性が高い
＊見た目がシンプルでかっこいい

導入方法

1, 公式サイト：Google-Code-Prettify からダウンロードしてきます。
2, ファイルを解凍します。

解凍したファイルの中から、「prettify.js」をサーバにアップロードします。
今回はwordpressのテーマファイル内に入れました。

3, 「prettify.js」を読み込ませるコードをhead要素内に記述。
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/prettify.js"></script>
4, bodyに onload=”prettyPrint()” を記述。

prettyPrintをbodyで呼び出します。（bodyでなくても、コンテンツを囲っているdivなどでもok）

<body onload="prettyPrint()">
5, cssを記述

今回は、bootstrapのcssを引用して prettify.css を作成しました。

@charset "utf-8";
.com {
      color: #93A1A1;
}
.lit {
      color: #195F91;
}
.pun, .opn, .clo {
      color: #93A1A1;
}
.fun {
      color: #DC322F;
}
.str, .atv {
      color: #DD1144;
}
.kwd, .linenums .tag {
      color: #1E347B;
}
.typ, .atn, .dec, .var {
      color: teal;
}
.pln {
      color: #48484C;
}
.prettyprint {
      background-color: #F7F7F9;
      border: 1px solid #E1E1E8;
      padding: 8px;
}
.prettyprint.linenums {
      box-shadow: 40px 0 0 #FBFBFC inset, 41px 0 0 #ECECF0 inset;
}
ol.linenums {
      margin: 0px;
}
ol.linenums li {
  color: #00CCCC;
  line-height: 18px;
  padding-left: 12px;
  text-shadow: 0 1px 0 #FFFFFF;
}

「prettify.css」を読み込ませるコードをhead要素内に記述。

<link href="<?php echo get_template_directory_uri(); ?>/css/prettify.css" rel="stylesheet">

これで導入完了☆

実装方法

では実際の導入方法。
表示させたいソースコードを

<pre class="prettyprint">hoge</pre>

で囲みます。
※表示させたいソースコードは、特殊文字変換ツールで変換して記述します。

▼ 行番号を表示させる

行番号を表示させる場合は class に linenums を追加。

<pre class="prettyprint linenums">
hoge
piyo
</pre>
▼ 注釈など、色を変える

注釈など、色を変える場合は、そのヶ所を

<span class="nocode">注釈</span>

で囲います。

注釈

cssで任意の色指定ができます。

▼ コマンドなど、1行の記述

コマンドなど、1行の記述のときは、 code で囲って、ソースコードとコマンドを区別したら見やすい！

<code>$ sudo vim index.php</code>

↓
$ sudo vim index.php

▼ 開始行番号を指定する

行番号を指定するlinenumsに、:xxで数字を指定します。

<pre class="prettyprint linenums:15">hoge</pre>

参考にした記事
http://knk-n.com/
http://komitsudo.blog70.fc2.com/