code-prettifyの実装方法について

code-prettifyの実装方法については、色々なバージョンがあることで、実装方法も色々な方法があります。
色々なページを参考にして実装してみましたが、うまく動作しませんでした。

そのため、このページでは、非常にシンプルなサンプルを示しながら、実装手順を記載しています。
参考にしてみて下さい。

code-prettifyについて

code-prettifyは、googleが公開しているHTMLにソースコードを表示するためのライブラリとなります。
実装は、CDN版を利用する方法と、ダウンロード版を利用する方法があります。

CDN版は、利用が簡単ですが、
デフォルトのスタイルが、下記の5種類しかなく、お気に入りのスタイルがない場合もあるかと思います。

・デフォルト
・desert.css
・doxy.css
・sons-of-obsidian.css
・sunburst.css

その場合には、標準のスタイルシートをカスタマイズする必要があるので、ダウンロード版を利用してカスタマイズする必要があります。

code-prettifyは、下記の公式サイトから、ダウンロードできます。
code-prettify

ダウンロード版の利用方法

先ほどの公式ページから、ソースファイルをダウンロードし、利用しているサーバーへアップロードします。

ダウンロード版のファイル構成は、すべてのファイルがまとまっているので、
下記のようにスタイルシートと、javascriptのファイルを、フォルダ分けした方が、管理しやすいと思います。

色のカスタマイズ方法

色をカスタマイズする方法も、色々な方法があります。
ここでは、ベースとなる「prettify.css」を直接編集して、色を変更します。

※必要に応じて、元のソースファイルのバックアップはとっておいて下さい。

このファイルの各属性に対応した、色の定義がありますので、好みの色に変更します。
また、行番号を表示する場合のスタイル定義は、「ol.linenums」以降を変更することになります。

ダウンロード版のファイルパス修正

ダウンロード版を利用する場合には、下記のファイルの参照先URLを変更する必要があります。

run_prettify.js　230行目付近

var LOADER_BASE_URL =
'https://cdn.rawgit.com/google/code-prettify/master/loader';

↓

var LOADER_BASE_URL =
'./loader';　　←　アップロード先のパスに変更します。

HTMLファイルへの適用方法

preタグに、下記の定義を追加します。

HTMLに適用するには、下記のように
pre、codeタグを組み合わせます。

langの指定方法

preタグに指定するlangは、jsフォルダにある「lang-xxx.js」を指定します。
CSSを表示するには「lang-css.js」、
SQLを表示するには「lang-sql.js」を指定して利用します。

skinの指定方法

preタグに指定するskinは、css/skinsフォルダにある「xxx.css」を指定します。
desertを利用するには「desert.css」、
sunburst.cssを利用するには「sunburst.css」を指定して利用します。

また、下記のようニア、
../run_prettify.js?lang=css&skin=sunburst
jsファイルにパラメータとして設定することも可能です。

変換ツールについて

ソースコード表示用の変換ツールを下記のページに公開しています。
この変換ツールには、必要なファイルを埋め込むので、上記のような設定作業が必要なく、ソースコードをとても簡単に表示することができます。
もしよろしければ、利用してみて下さい。

ソースコード表示用の変換ツール