【ハウツー】

ハイライトも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) どんな言語でも簡単に色付けできる!


IT製品 "比較/検討" 情報

転職ノウハウ

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

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

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

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

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

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

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

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

人気記事

一覧

イチオシ記事

新着記事

【レポート】妊活は女性だけの問題にあらず! 男性不妊の原因や検査を知る
[11:00 6/29] ヘルスケア
家族の夏のおでかけに使える無印良品のオススメグッズ5選
[11:00 6/29] ライフスタイル
デル、2U4ソケットサーバの第13世代「Dell PowerEdge R830」を提供開始
[10:58 6/29] 企業IT
【特別企画】ピアノの先生も興味津々! - カシオの電子ピアノ「CELVIANO Grand Hybrid」
[10:52 6/29] 家電
Google、2016年上半期検索ランキングを発表
[10:38 6/29] 企業IT

求人情報