【ハウツー】

ハイライトもGoogle流 - "google-code-prettify"でソースコードに色付けを

1 簡単&便利な"google-code-prettify"

 
  • <<
  • <

1/2

google-code-prettifyとは?

統合開発環境や高機能エディタでは、編集するソースコードやテキストファイルの種類に応じてテキストがハイライト表示されることが多い。ハイライト表示はきれいで見やすくなるし、コーディング上の問題を発見しやすくなるという実用上の利点もある。

となるとWebで掲載するソースコードも、ぜひともハイライト表示させたいところだ。Web掲載するソースコードやテキストのハイライト表示化の方法はいくつもあるが、ここではGoogleで公開されている「google-code-prettify」を紹介したい。

google-code-prettifyはApache License Version 2.0のもとで公開されているシンタックスハイライトモジュール。JavaScriptモジュールとCSSファイルの2つから構成されたシンプルな成果物で、HTML文書内に直接記述されたソースコードをシンタックスハイライト化する機能を提供する。なんといっても導入が簡単なところがポイントが高い。

google-code-prettifyの使い方

google-code-prettifyの導入は非常に簡単だ。とりあえずgoogle-code-prettifyのサイトから成果物をダウンロードしておく。JavaScriptファイルとCSSファイルがそれぞれ1つづつだ。

まず、シンタックスハイライトしたいHTML文書のヘッダにリスト1を追加する。script要素とlink要素で指定するファイルはそれぞれパスが通ったところに書き換えるように。

リスト1 ヘッダでgoogle-code-prettifyのJavaScriptファイルとCSSファイルを指定する

<script src="src/prettify.js" type="text/javascript"></script>
<link href="src/prettify.css" rel="stylesheet" type="text/css"/>

次にbody要素にonload="prettyPrint()"属性を追加する。これによってgoogle-code-prettifyを使ったシンタックスハイライト処理が実施させるようになる。

リスト2 body要素でprettyPrint()が動作するように属性を追加

<body onload="prettyPrint()">

そしてシンタックスハイライトさせたいソースコードを「<pre class="prettyprint"><pre>」要素の中にコピーすればよい。

リスト3

<pre class="prettyprint">
...
ここにハイライト表示させたいソースコード
...
</pre>

あとはページが読み込まれるときにgoogle-code-prettifyが実行され、表示されるソースコードのシンタックスハイライトが実施されるという寸法だ。ソースコード部分が書き変わるわけではないので、HTMLのソースコードを表示させてpre要素に書き込まれているソースコードをそのままコピーして使うことができる。掲載も簡単、コピーして使うのも簡単だ。

  • <<
  • <

1/2

インデックス

目次
(1) 簡単&便利な"google-code-prettify"
(2) どんな言語でも簡単に色付けできる!


転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

ときどき介護のち育児へ 第3回 要介護認定を申請するまでの過程
[10:43 9/28] ヘルスケア
ケイティ・ペリー、ヌード姿の過激な動画公開! 米大統領選への参加呼びかけ
[10:35 9/28] エンタメ
テーマは肉! 「肉屋台マルシェ」で現金つかみ取りやパイ投げ選手権も
[10:30 9/28] 趣味
夫婦のLINE 第283回 俺ディンキー派だから
[10:15 9/28] ライフスタイル
夫婦のLINE 第282回 あんまり好きじゃない
[10:14 9/28] ライフスタイル

求人情報