ソースコードを表示する際、以前は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」を使用してみてください。
コメント