Ex Code Prettify をバージョンアップしました【追記あり】

2014-11-06

その場で編集／実行できるシンタックスハイライター jQuery プラグイン Ex Code Prettify をバージョンアップしました。

【追記】

外部 css, js ファイルの読み込み指定時、それらファイルが読み込まれた後にコードが実行されるように修正しました。

追加された機能

以下の機能を追加しました。

JavaScript のコード内で自身のデモエリアを格納した$DEMO、API オブジェクトを格納した API という変数を参照できるようにしました。
code / demo を横並びレイアウトで表示した際、画面幅に応じたレスポンシブレイアウトになるようにしました。

$DEMO で自身のデモエリアを参照する

１つのページに複数のデモエリアがある場合、自身のデモエリアの要素を取得するようにする配慮が必要です。

demo1

$DEMO.find( element ) と記述することで自身のデモエリアの要素を参照できるようになります。（グローバル空間は汚染されてません）

demo2

Demo | $DEMO で自身のデモエリアを参照する

API を参照する

API という変数名で API オブジェクトを参照することができます。（グローバル空間は汚染されてません）

BACKRAW

//自身のコードを取得
var code = API.getCode();
 
//デモエリアに pre を生成
var pre = $DEMO.html('<pre/>').find('pre');
 
//pre にコードをセットし fade で表示
pre.text(code).hide().fadeIn(3000, function(){
 
    // fade が完了したらデモを再実行
    API.runDemo();
});

Demo | API を参照する

code / demo を横並びレイアウト時のレスポンシブ表示

以下デモにて画面幅を縮めてご確認ください。

Demo | デモを右側に表示する(幅768px以上時)

Demo | デモを左側に表示する(幅768px以上時)

以上です。本プラグインの詳細は以下をご覧ください。

[Ex Code Prettify] その場で編集／実行できるシンタックスハイライター jQuery プラグイン

CYOKODOG