« [VC2008MFC] クラスビュー | トップページ | iPhone4買い取ってもらった »

2011年11月 1日 (火)

jQueryでコード表示

jQueryjQuery Syntax Highlighterを使って、コード表示のテスト。

まず、スタイルだけ指定して表示。スタイルは、Visual Studio風。

$("pre.code1").snippet("javascript",{
style:"ide-msvcpp" //スタイル指定
});

続いて、行番号非表示。

$("pre.code2").snippet("javascript",{
style:"ide-msvcpp", //スタイル指定
showNum: false      //行番号非表示
});

ボックスの利用。指定行番号を枠で囲む。

$("pre.code3").snippet("javascript",{
style:"ide-msvcpp", //スタイル指定
box: "3"            //ボックス指定(3行目)
});
$("pre.code4").snippet("javascript",{
style:"ide-msvcpp", //スタイル指定
box: "3-5",         //複数行数でボックス指定(3-5行目)
boxColor: "red",    //枠線の色
boxFill: "silver"     //背景塗りつぶし色
});

クリップボードへコピー。SWFを経由してクリップボードへコピーする。

$("pre.code5").snippet("javascript",{
style:"ide-msvcpp",  //スタイル指定
clipboard: '/lib/ZeroClipboard.swf' //クリップボード(SWFファイルの指定)
});

コードを隠す。

$("pre.code6").snippet("javascript",{
style:"ide-msvcpp",
clipboard: '/lib/ZeroClipboard.swf',
collapse: true,          //コードを隠す機能をON
showMsg: 'コードを表示', //表示時のメッセージ
hideMsg: 'コードを隠す', //隠す時のメッセージ
startCollapsed: false    //初期状態(false=表示)
});

テンプレート。

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/jquery.snippet.js"></script>
<link rel="stylesheet" type="text/css" href="/lib/jquery.snippet.css" />
<script type="text/javascript">
<!--
$(document).ready(function(){
//$("pre.CLASSNAME").snippet("c",{          //for C
//$("pre.CLASSNAME").snippet("cpp",{        //for C++
//$("pre.CLASSNAME").snippet("html",{       //for HTML
//$("pre.CLASSNAME").snippet("php",{        //for PHP
//$("pre.CLASSNAME").snippet("css",{        //for CSS
$("pre.CLASSNAME").snippet("javascript",{   //for JavaScript
style: 'ide-msvcpp'
,clipboard: '/lib/ZeroClipboard.swf'
,collapse: true
,showMsg: 'コードを表示'
,hideMsg: 'コードを隠す'
,startCollapsed: false
//,showNum: false
//,menu: false
//,startText: true
//,box: '4-7'
//,boxColor: 'red'
//,boxFill: 'silver'
});
});
//-->
</script>

<div style="padding: 4px;">
<pre class="CLASSNAME">
実際のコード
</pre>
</div>

« [VC2008MFC] クラスビュー | トップページ | iPhone4買い取ってもらった »

プログラム・スクリプト」カテゴリの記事

2019年11月
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

Amazonリンク

ダイビング写真(swf)

ブログ内検索

  • Google
    WWW を検索
    ブログ内を検索

リンク(いつもお世話さま)

  • ソニーストア
     iTunes Store(Japan)
    Just MyShop(ジャストシステム)
    ブックオフオンライン
無料ブログはココログ