Repository navigation
Expand file tree
/
Copy pathsimple_code_formatter.html
More file actions
125 lines (119 loc) · 4.63 KB
/
Copy pathsimple_code_formatter.html
File metadata and controls
125 lines (119 loc) · 4.63 KB
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<html>
<head>
<script type="text/javascript">
var format = function (type) {
var value = document.getElementById('tx').value,
length = value.length,
newValue = [],
j = 0,
isXhtml = (type == 'xhtml'),
isMix = (type == 'mix'),
c, mlen, markstr, inCommentLine, inCommentBlock, inDocBlock;
for (var i = 0; i < length; i++) {
c = value.charAt(i);
if (inCommentLine && c == '\n') {
newValue.push(encode(value.substring(j, i)), '</span>\n');
j = i+1;
inCommentLine = false;
} else if (inCommentBlock && c == '*'
&& (i+1) < length && value.charAt(i+1) == '/') {
newValue.push(encode(value.substring(j, i)), '*/</span>');
j = i+2;
i++;
inCommentBlock = false;
} else if (inDocBlock) {
if (markstr == '/**' && c == '*'
&& i+1 < length && value.charAt(i+1) == '/') {
newValue.push(encode(value.substring(j, i)), '*/</span>');
j = i+2;
i += 1;
inDocBlock = false;
} else if (markstr == '<!--' && c == '-'
&& i+2 < length && value.charAt(i+1) == '-' && value.charAt(i+2) == '>') {
newValue.push(encode(value.substring(j, i)), encode('--'+'>'), '</span>');
j = i+3;
i += 2;
inDocBlock = false;
}
} else if ( !inCommentLine && !inCommentBlock && !inDocBlock) {
var possibleCommentPrefix = (c == '/' && (!isXhtml || isMix))
|| (c == '#');
if (possibleCommentPrefix) {
if (c == '/') {
if (isCommentLineStartChar(value, length, i)) {
inCommentLine = true;
markstr = '//';
} else if (isDocBlockStartChar(value, length, i)) {
inDocBlock = true;
markstr = '/**';
} else if (isCommentBlockStartChar(value, length, i)) {
inCommentBlock = true;
markstr = '/*';
}
} else {
inCommentLine = true;
markstr = '#';
}
if (inCommentLine || inCommentBlock || inDocBlock) {
newValue.push(encode(value.substring(j, i)), inDocBlock? '<span style="color: #0b5394;">'+markstr : '<span style="color: '+ (c == '#'? '#6fa8dc;' : '#38761d;') + '">'+markstr);
mlen = markstr.length;
j = i+mlen;
i += mlen - 1;
}
} else if ((isXhtml || isMix) && i+3 < length && value.substring(i, i+4) == '<!--') {
inDocBlock = true;
markstr = '<!--';
newValue.push(encode(value.substring(j, i)), '<span style="color: #0b5394;">'+encode(markstr));
mlen = markstr.length;
j = i+mlen;
i += mlen - 1;
}
}
}
if (j < length)
newValue.push(encode(value.substring(j, value.length)));
if (inCommentLine || inCommentBlock || inDocBlock)
newValue.push('</span>');
value = newValue.join('');
document.getElementById('output').value =
document.getElementById('preview').innerHTML = '<pre style="background-color: #222222; border: 1px dashed #999999; font-family: Arial; font-size: 14px; line-height: 16px; overflow: auto; padding: 5px; width: 100%;"><code style="word-wrap: normal;">'
+ value
+ '</code></pre>';
};
var encode = function (value) {
return value.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/\t/g,' ');
}
var isCommentLineStartChar = function (value, length, index) {
return (index+1) < length && value.substring(index-5, index+2) != 'http://'
&& value.charAt(index+1) == '/';
}
var isCommentBlockStartChar = function (value, length, index) {
return (index+1) < length && value.charAt(index+1) == '*';
}
var isDocBlockStartChar = function (value, length, index) {
return (index+2) < length && value.charAt(index+1) == '*'
&& value.charAt(index+2) == '*';
}
</script>
</head>
<body>
This is the code formatter for my preferred style, <br />
effect:<br />
encode special char '<', '>', '"' and '&'<br />
change 'tab' to space x 4<br />
color comment line/block (starts with '//' or '/*') to dark green<br />
color doc block (starts with '/**' or '<!--') to dark blue<br />
no break line, has horizontal scroll bar<br />
** tested at blogger and chrome only :)<br />
<textarea id="tx" style="height: 200px; width: 550px;">input code here</textarea><br />
<input onclick="format('code');" type="button" value="encode program" /><br />
<input onclick="format('xhtml');" type="button" value="encode XML/HTML" /><br />
<input onclick="format('mix');" type="button" value="encode XML/HTML" /><br />
<textarea id="output" style="height: 200px; width: 550px;"></textarea>
<span id="preview" />
</body>
</html>