Search- 2008年9月23日 20:29
- JS Code | Javascript AJAX CSS
|
this gadget highlights syntax code of javascript just copy and paste. no necessary to set up js file. it's easy to use.
ガジェットの貼り付けコード(Upgraded version) |
Javascript の Syntax Highlighter ガジェットが完成しました。 このツールの特徴は、外部 js ファイルなどのセッティングなどを必要とせず、Javascript のコードをコピーして貼り付けるだけです。グローバル変数、ファンクション名、CSSのクラス名なども毎回違う名前になるようにしてますので、ブログなどに何ヶ所もソースコードを貼り付けても名前がかぶることがありません。 正規表現がなければ大きな問題もなくソースコードはもっとコンパクトで解りやすく書けたのですが、複雑で少々粗めになってしまいました。いろんなタイプの正規表現が見られる prototype.js , jQuery.js でテストしてクリアしましたので綺麗に使えると思います。（下にサンプルページのリンクがあります） Scroll Width & Height の初期設定値は600px、250px になっています。これはスクロールさせる範囲の大きさです。ページのサイズに合わせて変更できます。使用できる単位は、px, in, %, cm, mm, pc, pt です。 font ボタンで以下のfont-family に変更できます。
|
ソースコードは「CONTINUE READING」の下に紹介しています。このソースコードはこのガジェットで作ったものです。スクロールサイズは、Scroll Width = 850px Height = 400px で設定しています。
1
2 function $run(){
3
4 var out=$id("D"); //output tab
5
6 var exp=$id("regular").value; //select tag match, search, replace
7
8 var temp=new String(tt[N]); // "A" to "D" tabs
9
10 var data=$id(temp).value; // data is code in textarea
11
12 if(data=="") {out.value="no data"+parseInt(N+1); $cc(4); return;}
13
14 var result="";
15
16 switch(exp){
17 case "tag" : result=data.replace(/<\/?[^>]+>/gi," ").replace(/\n\s*/g,"\n")
18 .replace(/^\s+|\s+$|\s+(?!\S)/g,"");
19 break;
20
21 case "escape" : result=data.replace(/&/g,"&").replace(/</g,"<")
22 .replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'");
23 break;
24
25 case "unescape": result=data.replace(/&/g,"&").replace(/</g,"<")
26 .replace(/>/g,">").replace(/"/g,'"').replace(/'/g,"'");
27 break;
28
29 case "code": var Rnd=new String((Math.random().toFixed(5)).replace(/0\./,""));
30
31 var SW=($id("wt").value).replace(/[\s\n]*/g,""); //scroll width
32 var SH=($id("ht").value).replace(/[\s\n]*/g,""); //scroll height
33
34 // check start from integer and end with unit(px,%,in etc)
35 if(!(/^\d+(px|%|in|cm|mm|pc|pt)$/.test(SW))) SW="600px";
36 if(!(/^\d+(px|%|in|cm|mm|pc|pt)$/.test(SH))) SH="250px";
37
38 try{ var result=$code(data,Rnd);} catch(e){ out.value=e; $cc_n(4); return;}
39
40 var lines=result.split("\n");
41
42 result='<div class="c2'+Rnd+'">';
43
44 var code_1='<br /></div><div class="c1'+Rnd+'">';
45 var code_2='<br /></div><div class="c2'+Rnd+'">';
46 var code_s=code_1;
47
48 var spaces="    ";
49
50 for (var i=1; i<=lines.length; i++) {
51 if(i==lines.length) {result+="<small>"+i+"</small>"+spaces+lines[i-1]+'<br /></div>'; break;}
52
53 result+="<small>"+i+"</small>"+spaces+lines[i-1]+code_s;
54
55 if((i+2)%2==1) code_s=code_2; else code_s=code_1;
56
57 if((i==9) || (i==99) || (i==999)) spaces=spaces.replace(/\&ensp\;/,"");
58 }
59
60 var js=$id("js").value; //textarea
61
62 result=(js.replace(/<\<\<\!\-\-\>\>\>/g,Rnd).replace(/<<\!--w>>/,SW)
63 .replace(/<<\!--h>>/,SH))+result.replace(/^\d/,'<div class="c2'+Rnd+'">1')+"</div>";
64 break;
65
66 default: break;
67 }
68 out.value=result;
69
70 if (data.length>=2000) { large=true; $cc_n(4); }
71 else $cc(4);
72
73 delete data; delete result; //don't need this
74 }
75
76 /****************************************************************
77
78 23 Sep. 2008 (C)samurai-logic.com
79
80
81 Code Prettifier
82
83 ****************************************************************/
84
85 function $code(str,rnd){
86
87 /*--------------------------------------------------------------
88 str = string of javascript code
89 rnd = random 5 digits number for
90 name of temporary var, class,id and function name
91 ---------------------------------------------------------------*/
92
93 js_key=/\b(?=(alert|array|arguments|Boolean|break|caller|callee|case|catch|class|confirm|const|constructor|continue|Date|default|delete|do|else|eval|false|final|finally|for|function|if|isFinite|isNaN|Math|NaN|new|null|Number|Object|parseFloat|parseInt|prompt|prototype|return|String|switch|this|throw|throws|toString|toExponential|toFixed|toPrecision|true|try|typeof|value|valueOf|var|void|while|with)(\W))/g;
94
95 var key="<!-->>>";
96
97 //replace \b to key(<!-->>>)just before keywords of javascript
98
99 str=str.replace(/\t/g," ").replace(js_key,key).replace(/&/g,"&")+"\n";
100
101 //.replace(/ /g,"&ensp;").replace(/>/g,"&gt;").replace(/</g,"&lt;")+"\n";
102
103 var CODE = ''; //CODE is string to modify code
104 var arg = -1; //arg is selectors of key
105 var pos = end = 0; //pos = end = position of slice str
106 var last=" "; //last is char. before pos
107 var temp=""; //temp
108
109 var spn ="<span style='color:";
110 var spn_c="<span class='";
111 var _col = "green;'>";
112
113 var code_e='<br /></span>';
114
115 var retrn = false; // for regexp "return /pat/.test()"
116
117 chr=/(\(|\=|\[|\:|\||\&|\!|\,)/;
118
119 Exp=/\/[^\/]*([\s\,\;]*)((\,\s*(\"|\')|(e|h|t)\s*\(\s*\/)[\s\S]+|\/\/[\s\S]+|\/\*[\s\S]+|\s{2,}[\s\S]+|\s)\n*/;
120
121 while (pos >= 0){
122 var cls = "</span>";
123 var key_q = str.charAt(pos);
124 var key_c = str.substr(pos,2);
125 var key_r = last + key_c;
126 var key_w = str.substr(pos,7);
127
128 if (key_q=="'") { arg = 0; pos++; } //find pos of keyword '
129 else if (key_q=='"') { arg = 1; pos++; } //find pos of keyword "
130 else if ((key_q=='/') && (key_c!="//") && (key_c!="/*") && ((chr.test(last) || (retrn))))
131 { arg = 4; pos++; } //find pos of keyword /
132 else if (key_c=="//") { arg = 2; pos+=2; } //find pos of keyword //
133 else if (key_c=="/*") { arg = 3; pos+=2; } //find pos of keyword /*
134 else if (key_w==key) { arg = 5; pos+=8; } // find pos of js_key (/<!-->>>/.test(key_w))
135 else { arg =-1; pos++; }
136
137 if (arg>=0){ //if keyword is found
138 if (arg==0) { end = str.indexOf("'", pos); _col = spn+"#DC143C;'>"; }
139 else if (arg==1) { end = str.indexOf('"', pos); _col = spn+"#DC143C;'>";}
140 else if (arg==4) { end = str.indexOf("\n", pos); // find end of line
141 temp=(str.substring(pos,end+2)); //temp start from pos to EOL
142 end = temp.search(Exp)+pos; _col = spn+"#0000CD;'>"; //midnightblue
143 retrn=false; //set retrn false
144 }
145 else if (arg==2) { end = str.indexOf("\n", pos); pos--;
146 _col = spn+"green;'><small>";
147 cls+="</small>\n";
148 }
149 else if (arg==3) { end = str.indexOf("*/", pos); pos--; end++; _col = spn+"green;'><small>";
150 /*if(end==0)*/ cls+="</small>";
151 }
152 else /*if(arg==5)*/{ end = str.indexOf("\n", pos); //find EOL
153 temp=str.substring(pos,end+2); //+"\n";
154 end = eval(temp.search(/[^\w\d]/)+pos-1); //search \W
155 _col = spn_c+"c5"+rnd+"'>";
156 retrn = ((/return/.test(str.substring(pos-1,end+1))))? true:false;
157 } //if found keyword "return" then retrn is true
158
159 if (end <= 0) end=str.length-1; end++; //in case end=-1 : end is length of str
160
161 var tmp=str.charAt(end-1); // store last char if code is not comments (except comments from code)
162
163 if((/[^\s\n]/.test(tmp)) && (arg>=5 || arg<=1)) { last=tmp;}
164
165 if ((arg==3)) CODE+=_col + (str.substring(pos-1,end).replace(/<!-->>>/g,"").replace(/\n/g,"</small></span>\n<span style='color:green;'><small>"))+cls;
166
167 else CODE += _col + (str.substring(pos-1,end).replace(/<!-->>>/g,"")
168 .replace(/</g,"<").replace(/>/g,">").replace(/\s/g," ")) + cls;
169
170 pos=end; cmt=false; //at last, end up with pos=0
171
172 }else{ // else keyword is not found
173
174 if (/\n/.test(key_q)) CODE += "\n";
175 else if (/\s/.test(key_q)) CODE += " ";
176 else if (/\t/.test(key_q)) CODE += "    ";
177 else if (/\</.test(key_q)) CODE += "<";
178 else if (/\>/.test(key_q)) CODE += ">";
179 else CODE += key_q;
180
181 if(/[^\s\n]/.test(key_q))last=key_q; //if key_q isn't \s nor \n then last=key_q
182
183 if(pos>=str.length) pos=-1; //if pos rearch eof
184 }
185 }
186
187 delete str;
188
189 return(CODE);
190 }
191