Search- 2008年9月25日 23:20
- JS Code | Javascript AJAX CSS
|
this gadget (upgrade version of code prettifier) highlights syntax code of javascript just copy and paste, and RegExp in a code will be highlighted by midnight Blue. font-size, font-family are changeable. As additional option, text view and print view button will highlight and show source code to new window. print view is for color print. it's not necessary to set up js file. it's easy to use and very accurate.
ガジェットの貼り付けコード |
このガジェットは前回紹介した Javascript の Syntax Highlighter ガジェット（JS Code）に機能を追加したものです。 このツールの特徴は、外部 js ファイルなどのセッティングなどを必要とせず、Javascript のコードをコピーして貼り付けるだけです。グローバル変数、ファンクション名、CSSのクラス名なども毎回違う名前になるようにしてますので、ブログなどに何ヶ所もソースコードを貼り付けても名前がかぶることがありません。 正規表現(RegExp)の部分が青(midnightBlue)でハイライトされます。他にあまり見られないものです。 追加機能は、Text view ボタンを追加しています。IE7, FireFox3, Safari, Google Chrome でテストしています。 Opera でテキストエリアの表示(text view)がうまくいきません。Operaはとても優秀なブラウザなので文字化け等への対応がされているためだと思います。文字コードは、現時点ではUnicode のみになります。ガジェットの charset は UTF-8 で設定してます。print view でソースコードをそのままカラープリントが出来ます。 font (font-family)は前のガジェットと変わらず以下の4種類のタイプに変更できます。
Last Modified : 26 Sep. 2008 |
1 /****************************************************************
2
3 23 Sep. 2008 (C)samurai-logic.com
4
5
6 Code Prettifier
7
8 Modified on 26 Sep. 2008
9
10 /****************************************************************/
11
12 function $code(str,rnd){
13
14 /*--------------------------------------------------------------
15 str = string of javascript code
16 rnd = random 5 digits number for
17 name of temporary var, class,id and function name
18 /*---------------------------------------------------------------*/
19
20 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;
21
22 var key="";
23
24 //replace \b to key()just before keywords of javascript
25
26 str=str.replace(/\t/g," ").replace(js_key,key).replace(/&/g,"&")+"\n";
27
28 var CODE = ''; //CODE is string to modify code
29 var arg = -1; //arg is selectors of key
30 var pos = end = 0; //pos = end = position of slice str
31 var last=" "; //last is char. before pos
32 var temp=""; //temp
33 var LEN=str.length; //LEN is for end of ' and "
34
35 var spn ="<span style='color:";
36 var spn_c="<span class='";
37 var _col = "green;'>";
38
39 var code_e='<br /></span>';
40
41 var retrn = false; // for regexp "return /pat/.test()"
42
43 chr=/(\(|\=|\[|\:|\||\&|\!|\,)/; // RegExp in front of /pattern/
44
45 d_q=/([^\\]\"[^\"]*[^\:]|[^\"]\"[\s]*[\:\,\}\]\)\;\.])/; //RegExp of double quot. case "\\"", "\":,;.)}]
46 s_q=/([^\\]\'[^\']*[^\:]|[^\']\'[\s]*[\:\,\}\]\)\;\.])/; //RegExp of single quot
47
48 Exp=/\/[^\/]*([\s\,\;]*)((\,\s*(\"|\')|(e|h|t)\s*\(\s*\/)[\s\S]+|\/\/[\s\S]+|\/\*[\s\S]+|\s{2,}[\s\S]+|\s)\n*/;
49
50 while (pos >= 0){
51 var cls = "</span>";
52 var key_q = str.charAt(pos);
53 var key_c = str.substr(pos,2);
54 var key_r = last + key_c;
55 var key_w = str.substr(pos,7);
56
57 if (key_q=="'") { arg = 0; pos++; } //find pos of keyword '
58 else if (key_q=='"') { arg = 1; pos++; } //find pos of keyword "
59 else if ((key_q=='/') && (key_c!="//") && (key_c!="/*") && ((chr.test(last) || (retrn))))
60 { arg = 4; pos++; } //find pos of keyword /
61 else if (key_c=="//") { arg = 2; pos+=2; } //find pos of keyword //
62 else if (key_c=="/*") { arg = 3; pos+=2; } //find pos of keyword /*
63 else if (key_w==key) { arg = 5; pos+=8; } // find pos of js_key (//.test(key_w))
64 else { arg =-1; pos++; }
65
66 if (arg>=0){ //if keyword is found
67 if (arg==0) { temp=(str.substring(pos-1, LEN));
68 end = temp.search(s_q)+pos; _col = spn+"#DC143C;'>";}//s_q=2char
69
70 else if (arg==1) { temp=(str.substring(pos-1, LEN));
71 end = temp.search(d_q)+pos; _col = spn+"#DC143C;'>";}
72
73 else if (arg==4) { end = str.indexOf("\n", pos); // find end of line
74 temp=(str.substring(pos,end+2)); //temp start from pos to EOL(\n) or use LEN
75 end = temp.search(Exp)+pos; _col = spn+"#0000CD;'>"; //midnightblue
76 retrn=false; //set retrn false
77 }
78 else if (arg==2) { end = str.indexOf("\n", pos); pos--;
79 _col = spn+"green;'><small>";
80 cls+="</small>\n";
81 }
82 else if (arg==3) { end = str.indexOf("*/", pos); pos--; end++; _col = spn+"green;'><small>";
83 /*if(end==0)*/ cls+="</small>";
84 }
85 else/*if(arg==5)*/{ end = str.indexOf("\n", pos); //find EOL
86 temp=str.substring(pos,end+2); //+"\n";
87 end = eval(temp.search(/[^\w\d]/)+pos-1); //search \W
88 _col = spn_c+"c5"+rnd+"'>";
89 retrn = ((/return/.test(str.substring(pos-1,end+1))))? true:false;
90 } //if found keyword "return" then retrn is true
91 temp=null; // release memory
92
93 if (end <= 0) end=str.length-1; end++; //in case end=-1 : end is length of str
94
95 var tmp=str.charAt(end-1); // store last char if code is not comments (except comments from code)
96
97 if((/[^\s\n]/.test(tmp)) && (arg>=5 || arg<=1)) { last=tmp;}
98
99 if ((arg==3)) CODE+=_col + (str.substring(pos-1,end).replace(//g,"").replace(/</g,"<").replace(/>/g,">").replace(/\n/g,"</small></span>\n<span style='color:green;'><small>"))+cls;
100
101 else CODE += _col + (str.substring(pos-1,end).replace(//g,"").replace(/</g,"<").replace(/>/g,">").replace(/\s/g," ")) + cls;
102
103 pos=end; cmt=false; //at last, end up with pos=0
104
105 }else{ // else keyword is not found
106
107 if (/\n/.test(key_q)) CODE += "\n";
108 else if (/\s/.test(key_q)) CODE += " ";
109 else if (/\t/.test(key_q)) CODE += "    ";
110 else if (/</.test(key_q)) CODE += "<";
111 else if (/>/.test(key_q)) CODE += ">";
112 else CODE += key_q;
113
114 if(/[^\s\n]/.test(key_q))last=key_q; //if key_q isn't \s nor \n then last=key_q
115
116 if(pos>=str.length) pos=-1; //if pos rearch eof
117 }
118 }
119
120 delete str;
121
122 return(CODE);
123 }
124