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

<!-- TEXTAREA Markup -->
<textarea class="code" data-ex-code-prettify-param="{codeType:'html'}">
<div class="container">
    <div class="page-header">
        <h1>Ex Code Prettify</h1>
    </div>
</div>
</textarea>
 
<!-- PRE Markup -->
<pre class="code" data-ex-code-prettify-param="{codeType:'html'}">
&lt;div class="container"&gt;
    &lt;div class="page-header"&gt;
        &lt;h1&gt;Ex Code Prettify&lt;/h1&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>

$('.code').exCodePrettify();

$('.code').exCodePrettify({tabToSpace:true});

<!-- コンテナ要素 -->
<div class="ex-code-prettify">
    <textarea class="code" data-ex-code-prettify-param="{codeType:'html'}">.
        <!-- ソースコード -->
    </textarea>
</div>

$('.code').exCodePrettify({showDemo:true});

<script src="behave/behave.js"></script>

$('.code').exCodePrettify({
    showDemo : true,
    editCode : true,
    behaveJS : true
});

<!-- コンテナ要素 -->
<div class="ex-code-prettify demo-bottom">
    <textarea class="code" data-ex-code-prettify-param="{codeType:'html'}">.
        <!-- ソースコード -->
    </textarea>
</div>

<div class="ex-code-prettify demo-right">
    <textarea data-ex-code-prettify-param="{codeType:'css'}">...
    <textarea data-ex-code-prettify-param="{codeType:'html'}">...
    <textarea data-ex-code-prettify-param="{codeType:'script'}">...
</div>

<textarea data-ex-code-prettify-param="{codeType:'script', autoRun:false}">...

$('.code').exCodePrettify({
    showRunButton : true,
    showResetButton : true,
    showDemo : true,
    editCode : true
});

<textarea data-ex-code-prettify-param="{codeType:'cssFile'}">
jquery.ex-inplace-editor/jquery.ex-inplace-editor.css
</textarea>
 
<textarea data-ex-code-prettify-param="{codeType:'jsFile'}">
jquery.ex-inplace-editor/jquery.ex-inplace-editor.js
</textarea>

<style>
    div.demo-contents .row > *{
        margin-bottom:8px;
    }
    div.demo-contents div.demo-area{
        padding:8px;
        border:solid 1px #eee;
    }
</style>
<div class="demo-contents">
    <div class="row">
        <div class="col-md-12">
            <button type="button" class="run-button btn btn-success">RUN</button>
            <button type="button" class="reset-button btn btn-default">RESET</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="demo-area"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <textarea class="code" data-ex-code-prettify-param="{codeType:'css'}"></textarea>
        </div>
        <div class="col-md-6">
            <textarea class="code" data-ex-code-prettify-param="{codeType:'html'}"></textarea>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <textarea class="code" data-ex-code-prettify-param="{codeType:'script',autoRun:false}"></textarea>
        </div>
    </div>
</div>

$('textarea.code').exCodePrettify({
    container : 'div.demo-contents',
    showDemo : true,
    editCode : true,
    behaveJS : true
});

// local storage 保存コードの削除
clearStorage: function(prefix){
 
// コードの local storage への保存
saveCodeToStorage : function(prefix){
 
// local storage 保存コードの取得
getCodeFromStorage : function(prefix){
 
// local storage 保存コードのロード
loadCodeFromStorage : function(prefix){

var api = $('.code').exCodePrettify({
    api : true,
    autoSaveToStorage : true,
    autoLoadFromStorage : true,
    savePrefix : 'demo',
    showDemo : true,
    editCode : true
});
$('a.code-reset').on('click', function(){
    api.clearStorage();
    location.reload();
    return false;
});

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

defaults : {
    api : false, // true の場合 api オブジェクトを返す。
    prettyClass : 'linenums', // linenums を指定すると行番号が表示される。
    title : '', // コードのヘッダタイトルを指定。
    codeTypeTitle : { // title パラメータ未指定時に設定されるコードのヘッｓダタイトル。
        css : 'CSS',
        html : 'HTML',
        script : 'JavaScript',
        jsFile : 'JS File',
        cssFile : 'CSS File'
    },
    editCode : false, // true でコードの編集が可能になる。
    tabIndent : true, // true でコード編集時 Tab キーによるインデントが可能になる。
    tabToSpace : false, // true で Google Code Prettify によるコード表示時、Tab をスペースに置換する。
    tabToSpaceSize: 4, // tabToSpace が true 時に置換するスペースの数を指定。
 
    behaveJS : false, // true で Behave.js を有効にする。
    behaveJSParam : { // Behave.js の初期パラメータ。
        textarea: null,
        replaceTab: true,
        softTabs: true,
        tabSize: 4,
        autoOpen: true,
        overwrite: true,
        autoStrip: true,
        autoIndent: true,
        fence: false
    },
 
    codeType : '', // "css","html","script","jsFile","cssFile" のいずれかを指定。
    autoRun : true, // true でデモを自動実行する。
    container : '.ex-code-prettify', // デモ、コードのコンテナ要素のセレクタを指定。
    codeArea : 'div.code-area', // コードの出力先要素のセレクタを指定。
    demoArea : 'div.demo-area', // デモの出力先要素のセレクタを指定。
    editLabel : 'EDIT', // 編集ボタンのラベル。
    saveLabel : 'SAVE', // 編集内容の確定ボタンのラベル。
    cancelLabel : 'CANCEL', // 編集内容の取り消しボタンのラベル。
    rawLabel : 'RAW', // プレーン表示モードボタンのラベル。
    backLabel : 'BACK', // プレーン表示モードから戻るボタンのラベル。
    demoLabel : 'DEMO', // デモコンテンツのタイトルラベル。
    showRunButton : false, // true でデモ実行ボタンが表示される。
    runButton : '.run-button', // デモ実行ボタンのセレクタを指定。
    runLabel : 'RUN', // デモ実行ボタンのラベル。
    showResetButton : false, // true でデモリセットボタンが表示される。
    resetButton : '.reset-button', // デモリセットボタンのセレクタを指定。
    resetLabel : 'RESET', // デモリセットボタンのラベル。
    adjustEditorHeight : true, // true で編集モード時のテキストエリアの高さを自動調整する。
    showCode : true, // true でコードを表示する。
    showDemo : false, // true でデモを表示する。
    autoSaveToStorage : false, // true でコードを local storage に自動保存する。
    autoLoadFromStorage : false, // true で local storage 保存コードの自動ロードする。
    clearStorage : false, // true で local storage 保存コードの自動削除する。
    savePrefix : '', // local storage 保存キーのプレフィックスを指定。
    onSave : function(api){} // 確定ボタンクリック時のコールバック処理を指定。
},

// config の取得
getConfig : function(){
 
// json 形式の独自データ属性 の取得
getJsonData : function(target,name){
 
// 特定パラメータの取得
getParam : function(name){
 
// プラグイン適用オブジェクトの取得
getTarget : function(){
 
// 編集モードへの切り替え
editMode : function(){
 
// 表示モードへの切り替え
viewMode : function(){
 
// デモの実行
runDemo : function(){
 
// デモのリセット
resetDemo : function(){
 
// コード種別の取得
getCodeType : function(){
 
// コードの取得
getCode : function(){
 
// 全てのコードの取得（json形式）
getAllCode : function(){
 
// local storage 保存コードの削除
clearStorage: function(prefix){
 
// コードの local storage への保存
saveCodeToStorage : function(prefix){
 
// local storage 保存コードの取得
getCodeFromStorage : function(prefix){
 
// local storage 保存コードのロード
loadCodeFromStorage : function(prefix){

var api = $(target).exCodePrettify().data($.ex.codePrettify.id);

var api = $(target).exCodePrettify({api:true});