マークダウンにも優しいライブデモ対応シンタックスハイライター jQuery プラグイン

Easy Code Prettify は、Ex Code Prettify(その場で編集/実行できるシンタックスハイライター jQuery プラグイン)を簡易的に実行することができる jQuery プラグインです。 クラス名等の HTML 属性値によるパラメータ指定を必要としないため、マークダウン形式でブログを書いてる場合等に利用すると便利です。

使い方

jQuery、Google Code Prettify の JS ファイル、Ex Code Prettify の JS/CSS ファイル、Easy Code Prettify の JS ファイルを読み込みます。

  1. <link href="jquery.ex-code-prettify.css" type="text/css" rel="stylesheet">
  2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  3. <script src="google-code-prettify/prettify.js"></script>
  4. <script src="jquery.ex-code-prettify.js"></script>
  5. <script src="jquery.easy-code-prettify.js"></script>


コードの記述を 含む 要素に対し、easyCodePrettify() メソッドを実行します。 例えば div.article-body 内にコードの記述が有る場合は以下のように実行します。

  1. $('div.article-body').easyCodePrettify();

コードは以下の規則に従ってマークアップすることで、実行パターンを制御できます。

コードのハイライト表示のみ行う

PRE 要素で記述した内容がハイライト表示の対象になります。

以下の様に表示されます。(コードを参照する

css

  1. .logo{
  2. text-align : center;
  3. font-size : 20px;
  4. opacity:.3;
  5. font-family:impact;
  6. color:#5588cc;
  7. }

html

  1. <div class="logo">Design</div>

script

  1. $DEMO.find('div.logo').animate(
  2. {opacity:1, 'font-size':60,'margin-top':30}, 1500,
  3. function(){
  4. var t = $(this);
  5. var method = t.is(':hidden') ? 'fadeIn' : 'fadeOut';
  6. t[method](1500,arguments.callee);
  7. }
  8. );

コード種別をヘッダに表示する

各 PRE 要素の直前に H5 要素で css、html、script のいづれかを記述します。

以下の様に表示されます。(コードを参照する

  1. .logo{
  2. text-align : center;
  3. font-size : 20px;
  4. opacity:.3;
  5. font-family:impact;
  6. color:#5588cc;
  7. }
  1. <div class="logo">Design</div>
JavaScriptBACKRAW
  1. $DEMO.find('div.logo').animate(
  2. {opacity:1, 'font-size':60,'margin-top':30}, 1500,
  3. function(){
  4. var t = $(this);
  5. var method = t.is(':hidden') ? 'fadeIn' : 'fadeOut';
  6. t[method](1500,arguments.callee);
  7. }
  8. );

コードの記述をグルーピングする

グルーピングしたいまとまりの単位で H4 要素に code と記述します。

以下の様に表示されます。(コードを参照する

  1. .logo{
  2. text-align : center;
  3. font-size : 20px;
  4. opacity:.3;
  5. font-family:impact;
  6. color:#5588cc;
  7. }
  1. <div class="logo">Design</div>
JavaScriptBACKRAW
  1. $DEMO.find('div.logo').animate(
  2. {opacity:1, 'font-size':60,'margin-top':30}, 1500,
  3. function(){
  4. var t = $(this);
  5. var method = t.is(':hidden') ? 'fadeIn' : 'fadeOut';
  6. t[method](1500,arguments.callee);
  7. }
  8. );

コードを実行する

H4 要素に demo と記述します。

以下の様に表示されます。(コードを参照する

DEMO

コードを表示・実行する

H4 要素に code + demo と記述します。

以下の様に表示されます。(コードを参照する

DEMO
  1. .logo{
  2. text-align : center;
  3. font-size : 20px;
  4. opacity:.3;
  5. font-family:impact;
  6. color:#5588cc;
  7. }
  1. <div class="logo">Design</div>
JavaScriptBACKRAW
  1. $DEMO.find('div.logo').animate(
  2. {opacity:1, 'font-size':60,'margin-top':30}, 1500,
  3. function(){
  4. var t = $(this);
  5. var method = t.is(':hidden') ? 'fadeIn' : 'fadeOut';
  6. t[method](1500,arguments.callee);
  7. }
  8. );

コードを編集し実行できるようにする

H4 要素に code + demo + edit と記述します。 コードの見出し部にある EDIT のクリックで、コードが編集可能になります。

以下の様に表示されます。(コードを参照する

DEMO
  1. .logo{
  2. text-align : center;
  3. font-size : 20px;
  4. opacity:.3;
  5. font-family:impact;
  6. color:#5588cc;
  7. }
  1. <div class="logo">Design</div>
JavaScriptSAVECANCELEDIT
  1. $DEMO.find('div.logo').animate(
  2. {opacity:1, 'font-size':60,'margin-top':30}, 1500,
  3. function(){
  4. var t = $(this);
  5. var method = t.is(':hidden') ? 'fadeIn' : 'fadeOut';
  6. t[method](1500,arguments.callee);
  7. }
  8. );

コードを手動で実行する

H4 要素に noAuto と記述すると JavaScript のコードが手動で実行できるようになります。 デモの見出し部にある RUN で実行、RESET で初期化が行われます。

以下の様に表示されます。(コードを参照する

DEMORUNRESET
  1. .logo{
  2. text-align : center;
  3. font-size : 20px;
  4. opacity:.3;
  5. font-family:impact;
  6. color:#5588cc;
  7. }
  1. <div class="logo">Design</div>
JavaScriptSAVECANCELEDIT
  1. $DEMO.find('div.logo').animate(
  2. {opacity:1, 'font-size':60,'margin-top':30}, 1500,
  3. function(){
  4. var t = $(this);
  5. var method = t.is(':hidden') ? 'fadeIn' : 'fadeOut';
  6. t[method](1500,arguments.callee);
  7. }
  8. );

外部ファイルを読み込む

H5 要素に cssFile 又は jsFile と記述することで、それぞれ js ファイルと css ファイルを読み込むことができます。CSS、HTML、JavaScript は、外部ファイルの読み込み完了後に実行されます。

以下の様に表示されます。(コードを参照する

DEMO
  1. http://cyokodog.github.io/jquery.ex-code-prettify/jquery.ex-inplace-editor/jquery.ex-inplace-editor.css
  1. http://cyokodog.github.io/jquery.ex-code-prettify/jquery.ex-inplace-editor/jquery.ex-inplace-editor.js
  1. form{
  2. padding: 16px;
  3. }
  4. input.inplace-editor,
  5. a.ex-ipe-label{
  6. padding: 4px;
  7. }
  1. <form>
  2. <input type="text" class="inplace-editor"/>
  3. </form>
JavaScriptSAVECANCELEDIT
  1. $('input.inplace-editor').exInplaceEditor({
  2. nullText : '編集する'
  3. });

パラメータ

プラグイン実行時、下記パラメータを指定できます。

  1. defaults : {
  2. codeNode : 'H4', // グルーピングを指定する要素
  3. codeTypeNode : 'H5', // コード種別を指定する要素
  4. demoText : 'demo', // コード実行の判定テキスト
  5. codeText : 'code', // コード表示の判定テキスト
  6. editText : 'edit', // コード編集の判定テキスト
  7. noAutoText : 'noAuto' // 自動実行の判定テキスト
  8. },

所感

上記のデモコードを編集して気付かれた方もいるかもしれませんが、同一ページ上にデモエリアを生成してるため、他のデモコードと干渉しあうケースがあります。 時間の余裕ができたら動的に生成した iframe 内でデモを実行する実装も検討したいと思います。

ダウンロード

MIT ライセンスです。こちらからどうぞ。