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つ。
- 組み込まれている５種類から選ぶ
- 新たにカラーテーマを追加する
共通して必要なのは、組み込みJSを編集する任意のJavaScriptファイル
// 保存先 /themes/テーマフォルダ/js/sample.js // head 内にリンク // 注） acms.js より後に読み込む <script type="text/javascript" src="/js/sample.js" charset="UTF-8"></script>
1. 組み込まれている５種類から選ぶ
まず、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';
});
Release Note | ドキュメント | a-blog cms developer
a-blog cms developer
Ver. 2.9.0 Released on 2001/10/09 features CMS-4180 MySQL8.0対応 CMS-4198 OpenStreetMap対応（ユニット・カスタムフィールド） CMS-4193 PC, スマホ, タブレットのプレビュー機能を追加...