CYOKODOG

JS DEVELOPER BLOG

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

  • 2014-11-16

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

使い方

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

BACKRAW
  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 内にコードの記述が有る場合は以下のように実行します。

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

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

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

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

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

css

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

html

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

script

BACKRAW
  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 のいづれかを記述します。

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

CSSBACKRAW
  1. .logo{
  2.     text-align : center;
  3.     font-size : 20px;
  4.     opacity:.3;
  5.     font-family:impact;
  6.     color:#5588cc;
  7. }
HTMLBACKRAW
  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 と記述します。

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

CSSBACKRAW
  1. .logo{
  2.     text-align : center;
  3.     font-size : 20px;
  4.     opacity:.3;
  5.     font-family:impact;
  6.     color:#5588cc;
  7. }
HTMLBACKRAW
  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
CSSBACKRAW
  1. .logo{
  2.     text-align : center;
  3.     font-size : 20px;
  4.     opacity:.3;
  5.     font-family:impact;
  6.     color:#5588cc;
  7. }
HTMLBACKRAW
  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
CSSSAVECANCELEDIT
  1. .logo{
  2.     text-align : center;
  3.     font-size : 20px;
  4.     opacity:.3;
  5.     font-family:impact;
  6.     color:#5588cc;
  7. }
HTMLSAVECANCELEDIT
  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
CSSSAVECANCELEDIT
  1. .logo{
  2.     text-align : center;
  3.     font-size : 20px;
  4.     opacity:.3;
  5.     font-family:impact;
  6.     color:#5588cc;
  7. }
HTMLSAVECANCELEDIT
  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
編集する
CSS FileSAVECANCELEDIT
  1. http://cyokodog.github.io/jquery.ex-code-prettify/jquery.ex-inplace-editor/jquery.ex-inplace-editor.css
JS FileSAVECANCELEDIT
  1. http://cyokodog.github.io/jquery.ex-code-prettify/jquery.ex-inplace-editor/jquery.ex-inplace-editor.js
CSSSAVECANCELEDIT
  1. form{
  2.     padding: 16px;
  3. }
  4. input.inplace-editor,
  5. a.ex-ipe-label{
  6.     padding: 4px;
  7. }
HTMLSAVECANCELEDIT
  1. <form>
  2.     <input type="text" class="inplace-editor"/>
  3. </form>
JavaScriptSAVECANCELEDIT
  1. $('input.inplace-editor').exInplaceEditor({
  2.     nullText : '編集する'
  3. });

パラメータ

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

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

所感

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

ダウンロード

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

All Posts