シンプルでカッチョイイスタイルなコードハイライトを実現する「Google-Code-Prettify」

最終更新日:
Screenshot 2012 05 03 17 13 27

コードハイライトのために以前苦労して導入したSyntax Highlighterですが、もっと簡単にコードハイライトできる方法があったので紹介します。

WordPressプラグイン「Syntax Highlighter」も外せそうなので外してみた | けんけん.com

SPONSORED LINK

Twitter Bootstrapを使ったWordPressテーマを作りました!

20120503171725

関連事項なので軽く書いておきますが、この度Twitter Bootstrapを使ってWordPressテーマを作ってみました。

[WordPress] Twitter Bootstrap でモバイルテーマを組んでみたので、いろいろとまとめてみた * ラクイシロク
これ見てから気になってたもので。

ドットインストールやりながらちょこちょこやってたら数時間でこそこそのものができちゃいました。
左右の余白が固定なのでiPhoneに適応させるにはけっこう面倒ですね。

PC向けテーマをもう一回作りたくなる。 PCテーマも作ってしまった。この流れ何回目だろう。

Twitter Bootstrapで使われてた「Google-Code-Prettify」が気になる

iPhoneのテーマづくりの参考にTwitter Bootstrapのページを見ていたら

Screenshot 2012 05 03 17 21 00

このコードハイライト、カッケー!
私もかっこよくて見やすいコードハイライトを求めてSynatx Highlighterを入れたりしてましたが、どうもそれとは違う。

調べてみたら、Googleが提供している「Google-Code-Prettify」というヤツだとわかりました。

Google-Code-Prettifyとは

Googleが提供しているコードハイライトのJavaScriptライブラリです。
JavaScriptファイルをアップロードするだけで言語に応じて自動でコードのハイライト・色分けを行なってくれます。

codeタグで囲む
赤くなります。
preタグで囲む
囲み枠がつき、灰色になります。
Preタグ+Google Prettifyを使う
preタグのclassに、prettyprint linenums を入れましょう。
これが超かっこいい!!コードを見せるならこれがよさそうですね!

via: 超便利!Twitter BootstrapでさくさくWeb開発 : アシアルブログ

導入方法

  1. 公式ページからファイルをダウンロード
  2. ファイルを解凍し「src」フォルダの「prettify.js」をサーバの適当なところにアップロード
  3. 「prettify.js」を読みこませるコードを書く
  4. prettyPrintをbodyで呼び出す

ざっくりと書けばこんな感じです。2と3はもう少し補足が必要ですかね。

2. 「src」フォルダの「prettify.js」をサーバの適当なところにアップロード

私はテーマフォルダの下に「js」フォルダを作ってその中に入れました。基本はテーマファイルの中に作ればいいです。

3. 「prettify.js」を読みこませるコードを書く

<script src="<?php bloginfo('template_directory');?>/js/prettify.js"></script>

</body>の前にでも書けばいいかな。

4. prettyPrintをbodyで呼び出す

小難しいことが書いてありますが、<body>タグを

<body onload="prettyPrint()">

に置き換えるだけです。

これだけです。Syntax Highlighterと比べるとカンタンでちょっと物足りな(ry いや、なんでもないです。

via: JavaScriptでソースコードに簡単色付け google-code-prettify – むかぁ~ どっとこむ

あとは、埋め込みたいコードを<pre>〜</pre>で囲んで、classprettyprintをつける。

<pre class="prettyprint">&lt;a href=&quot;knk-n.com&quot;&gt;けんけん.com&lt;/a&gt;</pre>

と書けば、

<a href="knk-n.com">けんけん.com</a>

こうなる。ヽ(・∀・ )ノ カッコイイナー

<pre class="prettyprint">
&lt;a href=&quot;knk-n.com&quot;&gt;けんけん.com&lt;/a&gt;
&lt;a href=&quot;knk-n.com&quot;&gt;けんけん.com&lt;/a&gt;
&lt;a href=&quot;knk-n.com&quot;&gt;けんけん.com&lt;/a&gt;
&lt;a href=&quot;knk-n.com&quot;&gt;けんけん.com&lt;/a&gt;
&lt;a href=&quot;knk-n.com&quot;&gt;けんけん.com&lt;/a&gt;
</pre>

linenums追加して<pre class="prettyprint linenums">と書くと


<a href="knk-n.com">けんけん.com</a>
<a href="knk-n.com">けんけん.com</a>
<a href="knk-n.com">けんけん.com</a>
<a href="knk-n.com">けんけん.com</a>
<a href="knk-n.com">けんけん.com</a>

行番号を表示することもできます。

CSSの調整

このままでもいいのですが、もう少しかっこよくするにはCSSを読み込ませます。


.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: 0 0 0 33px;
}
ol.linenums li {
  color: #BEBEC5;
  line-height: 18px;
  padding-left: 12px;
  text-shadow: 0 1px 0 #FFFFFF;
}

Twitter Bootstrap本家と同じCSSです。「prettify.css」とでも名前をつけて保存し、

<link href="<?php bloginfo('template_directory');?>/css/prettify.css" rel="stylesheet">

で読みこませるとよいでしょう。

via: 超便利!Twitter BootstrapでさくさくWeb開発 : アシアルブログ

おわりに

Syntax Highlighter導入に比べると、使うファイル数も手間もかかりませんでした。

Twitter Bootstrapも思いの外面白かったので、もう少しいじってみようかな。

参考: google-code-prettify – syntax highlighting of code snippets in a web page – Google Project Hosting

Categories:
Tags: ,
記事が気に入ったらシェアお願いします!