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のソースコピー問題の対応方法
スポンサーリンク
関連記事
公開日：2015年01月07日 最終更新日：2015年12月02日
記事NO：00083
