ソースコードを見やすく表示してくれるgoogle-code-prettifyが便利

Javascript

ソースコードを表示する際、以前はSyntaxHighlighterを使っていたのですが指定の仕方が自分的に面倒だったのと、少し動作が重い気がしたので使うのを止めていました。

そしてとある訪れたサイトでソースコードを表示してるの何を使ってるのだろうと思って調べたら、google-code-prettifyというのでした。

ダウンロードと設置

ダウンロードは以下のページから。

解凍するとたくさんのjsファイルと1つのcssファイルがあります。

基本的に使うのはこの中の

  • prettify.js
  • prettify.css

になります。これをHTMLで読み込み実行します。

<link href="prettify.css">
<script src="prettify.js"></script>
<script>prettyPrint();</script>

preタグにclassをつける

そして適用したいpreタグに"prettyprint"とclassを指定します。

<pre class="prettyprint">

これだけで動いてくれます。

また、ソースコードの行数を付けたい場合はclassをもう一つ付けます。

<pre class="prettyprint linenums">

これで中のコードの種類も自動判別して色付けなど見やすく整えてくれます。

見た目を変更する場合

このソースの色を変えたいなというときは先ほど読み込んだ「prettify.css」を修正するか、そのclassの値を別のCSSで上書きすれば変更できます。

テーマを入れて簡単にデザインを変えてみる

自分でCSSを変更するのもよいですが、ちょっと面倒だという人はテーマを入れてみてはどうでしょうか。

この「google-code-prettify」に合わせたCSSを配布してくれているサイトがあります。検索するといくつか出てきますが、自分が使ってみたのは以下のサイトのです。

こちらから好きなデザインを選んでCSSファイルをダウンロード。そしてCSSファイルを読み込むと、そのデザインが適用されます。

他にもいっぱいjsファイルがあるけど

解凍したフォルダにはほかにも「lang-●●.js」というのがたくさんあって何に使うのか分からなかったのですが、そのコード言語が自動判別ができないときに使うようです。

自動判別してくれないときは言語に合わせた「lang-●●.js」を使用してみてください。