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

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

【追記】

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

追加された機能

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

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

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

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

demo1

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

demo2

API を参照する

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

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

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

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


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

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