【JavaScript】ソースコードを綺麗に表示するdp.SyntaxHighlighter

ブログなどでよく、プログラムやCSSのソースコードを記述して公開することがある。
このブログでも、自分自身の備忘録のためにいろいろとソースコードを記述していることがおおい。
今までは<blockquote>で括ってしたの画像のように表示していた。

今までのソースコード表示
今までのソースコード表示

もっとすっきりとソースコードっぽく表示したいなぁ~という願望が出てきていろいろ調べてたらやっぱりある!
dp.SyntaxHighlighter
早速ダウンロードして設置してみた。
説明はリンク先のサイトを見てもらえばよく分かると思うが、個人的には<head>内が冗長になるがいやだったので、付属のjsファイルも、shCore.jsに追加記述し、cssファイルも自分のcssファイルの末尾に追加した。
すると次の画像のようなすっきりとハイセンスなソースコードが表示できるようになった。
新しい表示のソースコード
新しい表示のソースコード

うむ。いいね。

* XMLコードの場合、class=”xml”
* PHPコードの場合、class=”php”
* CSSコードの場合、class=”css”
* JavaScriptコードの場合、class=”js”
* Rubyコードの場合、class=”ruby”
* SQLコードの場合、class=”sql”
* Visual Basicコードの場合、class=”vb”
* Javaコードの場合、class=”java”
* pythonコードの場合、class=”python”
* C#コードの場合、class=”c#”
* C++コードの場合、class=”c”
* Delphiコードの場合、class=”delphi”

【Javascript】「金額表示等で使う3桁区切りのカンマ挿入関数」

忘れそうだから書いておく。

function addComma(str)
{
 var num = new String(str).replace(/,/g, '');
 while(num != (num = num.replace(/^(-?\d+)(\d{3})/, '$1,$2')));
 return num;
}

【JavaScript】ヘッダを固定したままテーブルにスクロールをつける

テーブルが大きくなって来たときにテーブルにスクロールをつけたい時がある。

SuperTablesを使おうと思ったが。。。styleが自由に決められない。。。

そこで、なんとか簡単にスクロール出来ないものかとjavascriptで組んでみた。

スクロールをつけたいテーブルを<div>で括るだけで実装できる。

なかなかいいものができたな~

フッタも固定したいままの場合は<div class=”scrollFooterAri”>で括り、フッタは固定しない場合は<div class=”scrollFooterNashi”>で括るだけ。
なんとも簡単!!

まだまだバグも多いかもしれないけど、徐々に手直ししていこう。

※現在IE専用です。ASP.NETのGridView用に作りました。

サンプルはこちらです。要望などあればコメントください。

ヘッダを固定してテーブルにスクロールを付与

 

JavaScript 第5版

著者/訳者:David Flanagan

出版社:オライリー・ジャパン( 2007-08-14 )

定価:

大型本 ( 704 ページ )

ISBN-10 : 4873113296

ISBN-13 : 9784873113296