ishikawa note

front-end engineer / web director / YAMAGATA

Google Code Prettify のカラーテーマを変更する

Posted in: a-blog cms組み込みJS

2018-06-12 ver.2.8 でカラーテーマの変更が反映されないようなので確認中です。
2018-06-29 ver.2.8.24〜 新たなイベントハンドラ利用で変更できました。

テキストユニットの「ソース」でシンタックスハイライトに導入されている Google Code Prettify 。そのカラーテーマを変える方法は、次の2つ。

  1. 組み込まれている5種類から選ぶ
  2. 新たにカラーテーマを追加する

共通して必要なのは、組み込みJSを編集する任意のJavaScriptファイル

// 保存先
/themes/テーマフォルダ/js/sample.js

// head 内にリンク
// 注) acms.js より後に読み込む
<script type="text/javascript" src="/js/sample.js" charset="UTF-8"></script>

1. 組み込まれている5種類から選ぶ

まず、config.js を確認する。

//----------------------
// google code prettify
googleCodePrettifyClass : 'prettyprint linenums', // prettyprint linenums, acms-admin-pre
googleCodePrettifyTheme : 'prettify', // prettify, desert, doxy, sons-of-obsidian, sunburst

初期設定は prettify 。これを別のカラーテーマに変更する。
次に、sample.js に記述する。config.js は編集しないことが基本。

// sample.js
// prettify から desert に変更する場合
ACMS.Ready(function() {
  ACMS.Config.googleCodePrettifyTheme = 'desert'
});

以上で、カラーテーマの変更が完了。

2. 新たにカラーテーマを追加する

たとえば、Color themes for Google Code Prettify を利用する。
好みのカラーテーマを見つけたら、そのスタイルシートをダウンロードし、次の場所に保存。

// tomorrow-night.css の場合
/themes/テーマフォルダ/js/library/google-code-prettify/styles/tomorrow-night.css

あとは、1. と同様に sample.js を編集して完了。
(追記)ver.2.8.24 からconfigLoadというイベントハンドラを使って設定します。このハンドラを使うことで、config.jsが読み込まれた後に処理を実行することができるとのこと。

// sample.js
ACMS.addListener('configLoad',function(){
  ACMS.Config.googleCodePrettifyTheme = 'tomorrow-night';
});