ホーム > カテゴリ > HTML5・JavaScript >

Google-Code-Prettifyの使い方

ソースコードを自動で判別してハイライト表示をしてくれるGoogle-Code-Prettify(Javascriptライブラリ)の使い方です。Syntax Highlighterと比べると初心者でも簡単に設置可能です。

この記事で紹介している「googlecode.com」は2016年1月で終了します。その代わりに「GitHub」で公開されるようですのでそちらの方も参照してください。

設置方法

Google-Code-Prettifyを自分の環境に設置する方法もありますが、転送量が増えてしまいますのでHTMLのscriptタグで「googlecode.com」から読み込む方法を取り上げたいと思います。Google-Code-Prettifyを読み込ませる方法はheadタグ内で下記のようにするだけで設置完了です。

<head>
  <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
</head>

ソースコードをハイライト表示させるにはpreタグをこのようにする必要があります。

<pre class="prettyprint">
 ... ここにソースコードを記述する
</pre>

これだけで自動でソースコードをハイライト表示してくれます。

応用編

ソースコードに行番号を表示させてCSSのスタイルを指定するにはscriptタグに「?lang=css」を追加してpreタグのclassに「linenums lang-css」を追加します。

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css"></script>

<pre class="prettyprint linenums lang-css">
 ... ここにソースコードを記述する
</pre>

prettyprint
　ハイライト表示をさせる(必須項目)
linenums
　行番号を表示させる(任意項目)
lang-css
　ハイライト表示にCSSを指定する(任意項目)
　※CSSの部分をpascalなどに変更も可能

公式サイト

もっと詳細な事を知りたい方は公式サイト(英語)をご覧下さい。

このブログで使用されているハイライト表示のようにするには？

・Google-Code-PrettifyをSyntax Highlighterのようなデザインにする
・Google-Code-Prettifyのソースコピー問題の対応方法





関連記事


前の記事：レスポンシブウェブデザイン対応のWEBサイトの作成方法
次の記事：SyntaxHighlighterの使い方

公開日：2015年01月07日 最終更新日：2015年12月02日
記事NO：00083