機能としては
- 行番号をつける
- ダブルクリックで新規ウィンドウで表示
- 指定行へのリンク機能
構文の色づけとかもしたかったけど長くなりそうなので挫折。
最新版はgitHub - yosiloveに置いておくとして、実行サンプル代わりに現在のところのソースコードを張っておく。
/*
クラス名を「code」にしたpreタグについて
- 中身を行番号付きにする
- 中身をダブルクリックで、タグを削除した内容を新規Windowで開く
- <a href="#preタグのid+行番号">でその行まで飛べる
作者:yosilove
作成:2010/11/03
*/
//=======================
// 補助用の関数
//=======================
/*タグの削除
ただし、liは改行コードに置き換え
*/
function tag_delete(html){
//liを改行に置き換える
li2n = new RegExp(/<\/li>/g);
html = html.replace(li2n, "\n");
//タグをすべて削除
rgexp = new RegExp(/<("[^"]*"|'[^']*'|[^'">])*>/g);
plain = html.replace(rgexp, "");
return plain;
}
/*olを使って行番号の追加
*/
function addLineNum(source,aid){
if(aid == "undefined") {
aid = "def";
}
//改行コードで分割
var lines = source.split("\n");
//olタグを使って行番号をつける
var newSource = "<code class\"srcFile\"><ol class=\"srcCode\">\n";
for (n = 0; n < lines.length; n++) {
//行番号へのリンク用のaタグを準備
var aTag = "<a id=\""+ aid + (n+1) + "\"></a>"
newSource = newSource + aTag + "<li class=\"lineNum\">" + lines[n] +"</li>";
}
newSource = newSource + "</ol></code>"
return newSource;
}
/*ソースコードを新しいウィンドウで表示
*/
function openByNewWindow()
{
//head内
//id要素を新しいWindowのタイトルに設定
var head = "<title>"+this.id+"</title>";
//body部分
var txt = tag_delete(this.innerHTML);
html = txt.replace('\n',"<br>");
var body = "<pre>"+html+"</pre>";
//HTMLを作る
var newhtml = "<html><head>"+head+"</head><body>"+body+"</body></html>";
//新しいWindowで表示
var win = window.open();
win.document.open();
win.document.write(newhtml);
win.document.close();
}
//=======================
// Mainの関数
//=======================
window.onload = function pre2code_exec(){
//preタグを検索
for (i = 0; i < document.all.tags("pre").length; i++) {
var preTag = document.all.tags("pre")(i);
//クラス名がcodeだったら
if(preTag.className.indexOf("code") !=-1 ){
var html = preTag.innerHTML;
//行番号を追加
preTag.innerHTML = addLineNum(html,preTag.id);
//イベントリスナを追加（ダブルクリックでopenByNewWindow実行）
preTag.addEventListener("dblclick" , openByNewWindow , true);
}
}
}
ちなみに色とかの設定は別のCSSでやってるのでスクリプトは関係ないです。
上の例では「pre class="code" id="pre2code.js"」というようにしてある。
classを「code」、idを「pre2code.js」にしてあるので、ソースコード内をダブルクリックすると「pre2code.js」というタイトルで新規ウィンドウが表示されるはず。
あと「a href="#pre2code.js31"」とするとソースコードの31行目に飛べる、、、はず。
さーて、ちゃんと動くかな？どう？Safari以外でテストしてないんだけど動いてる？
3 comments:
2010年11月3日 18:53
リンクのところ、どうやらブロッガーだとちょっとめんどくさいらしい。
というのも、Bloggerで「a href="#pre2code.js31"」としてページを保存すると、勝手に「a href="http://hogehoge/#pre2code.js31"」と補完されてしまう！ので、一度保存した後にURLを調べてリンクを指定しないといけないらしい。
ちなみに
リンクの編集で「#pre2code.js31」とすると「http:/#pre2code.js31」にアクセスしようとしてしまい、やっぱりできない orz
まぁ肝心の印刷画面表示ができたからいいか。
2010年11月3日 20:03
安全のため、普段はActiveXもJavaScriptもいろいろと無効にしている俺に死角はなかった。。。
>ソースコードの31行目に飛べる、、、はず。
世界のIEエンジン(笑)では動いてるっぽいよ！
2010年11月3日 20:18
>>匿名 さん
世界のIE(笑)で動けば問題ないなw
しかし、そうか
JavaScriptが無効な人ってのも結構いるのかもしれんね。。。
JavaScript無効でも見やすいサイト作りを心がけて行こうと思いますです。
コメントを投稿