[Google General] google-code-prettify をローカルにインストールする方法

公開日: 2017/08/18
更新日: 2019/07/25

CDN ではなくサーバに設置する手順。

Contents

インストール

最新バージョンは Releases に含まれておらず、distrib ディレクトリからダウンロード。

ダウンロードされたファイルの構成は以下のようになっている。

google-code-prettify
├── lang-aea.js
├── lang-agc.js
├── lang-apollo.js
├── lang-basic.js
├── lang-cbm.js
├── lang-cl.js
├── lang-clj.js
├── lang-css.js
├── lang-dart.js
├── lang-el.js
├── lang-erl.js
├── lang-erlang.js
├── lang-fs.js
├── lang-go.js
├── lang-hs.js
├── lang-lasso.js
├── lang-lassoscript.js
├── lang-latex.js
├── lang-lgt.js
├── lang-lisp.js
├── lang-ll.js
├── lang-llvm.js
├── lang-logtalk.js
├── lang-ls.js
├── lang-lsp.js
├── lang-lua.js
├── lang-matlab.js
├── lang-ml.js
├── lang-mumps.js
├── lang-n.js
├── lang-nemerle.js
├── lang-pascal.js
├── lang-proto.js
├── lang-r.js
├── lang-rd.js
├── lang-rkt.js
├── lang-rust.js
├── lang-s.js
├── lang-scala.js
├── lang-scm.js
├── lang-splus.js
├── lang-sql.js
├── lang-ss.js
├── lang-swift.js
├── lang-tcl.js
├── lang-tex.js
├── lang-vb.js
├── lang-vbs.js
├── lang-vhd.js
├── lang-vhdl.js
├── lang-wiki.js
├── lang-xq.js
├── lang-xquery.js
├── lang-yaml.js
├── lang-yml.js
├── prettify.css
├── prettify.js
├── run_prettify.js
└── skins
    ├── desert.css
    ├── doxy.css
    ├── sons-of-obsidian.css
    └── sunburst.css
1 directory, 62 files

設定

CSS

prettify.css をプロジェクトファイルに @import する。
skin が必要であれば追加する。

style.scss
@import '../vendors/google-code-prettify/prettify';
@import '../vendors/google-code-prettify/skins/sunburst';

JavaScript

prettify.js をプロジェクトファイルに import もしくは concat する。
他に必要な言語があれば、関連ファイルも追加する。
load イベントで呼び出す。

app.js
import '../vendors/google-code-prettify/prettify';
import '../vendors/google-code-prettify/lang-css';
import '../vendors/google-code-prettify/lang-yaml';
import '../vendors/google-code-prettify/lang-sql';
import '../vendors/google-code-prettify/lang-tex';
addEventListener('load', function(event) { PR.prettyPrint(); }, false);

CDN を利用する場合

CDN を利用する場合、以下を追加するだけで同等の表示がされる。

<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&amp;lang=yaml&amp;lang=sql&amp;lang=tex&amp;skin=desert"></script>

補遺

過去バージョンの手順。