Format code with line number.
This task use javascript to format code in <pre> tag with line number.
Format code with line number using jQuery
- Put code in <pre class='code'></pre> tags.
- Add following code at the end of page.
| 1 | <style> |
| 2 | .code-viewer { border: solid 1px silver; font-family: monospace; font-size: 12px; padding: 5px; background-color: white; margin-bottom: 10px; } |
| 3 | .code-viewer-inner { width: 100%; border-top: solid 1px #E3E3E3; } |
| 4 | .code-viewer .line .number { width: 40px; background-color: teal; color: white; border-bottom: solid 1px #E3E3E3; padding: 0px 5px 0px 5px; } |
| 5 | .code-viewer .line .data { border-bottom: solid 1px #E3E3E3; white-space: pre-wrap; padding-left: 5px; } |
| 6 | .code-viewer .action { padding: 0px 0px 5px 0px; } |
| 7 | .code-viewer .action a { text-decoration: none; color: teal; font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; margin: 0px 5px 0px 5px; } |
| 8 | .code-viewer .action a:hover { text-decoration: underline; } |
| 9 | .code-viewer .raw-code { display: none; } |
| 10 | </style> |
| 11 | <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> |
| 12 | <script> |
| 13 | var cv_ids = new Array(); |
| 14 | function cv_getId() { |
| 15 | var id = 'E' + Math.floor(Math.random() * 100000); |
| 16 | while (cv_ids.indexOf(id) >= 0) { |
| 17 | id = 'E' + Math.floor(Math.random() * 100000); |
| 18 | } |
| 19 | cv_ids.push(id); |
| 20 | return id; |
| 21 | } |
| 22 | function cv_process(esrc) { |
| 23 | esrc = $(esrc); |
| 24 | var src = esrc.html(); |
| 25 | esrc.hide(); |
| 26 | var id = cv_getId(); |
| 27 | var id2 = cv_getId(); |
| 28 | var id3 = cv_getId(); |
| 29 | esrc.after("<div id='" + id + "' class='code-viewer'><div id='" + id2 + "' class='action'></div><table cellspacing='0' cellpadding='0' class='code-viewer-inner'></table><div id='" + id3 + "' class='raw-code'></div></div>"); |
| 30 | var etag = $('#' + id + ' .code-viewer-inner'); |
| 31 | var eaction = $('#' + id2); |
| 32 | eaction.append("<a href='javascript:return false;' onclick=\"var e1 = $('#" + id + " .code-viewer-inner'); var e2 = $('#" + id3 + "'); e1.show(); e2.hide();\">formatted</a>"); |
| 33 | eaction.append("<a href='javascript:return false;' onclick=\"var e1 = $('#" + id + " .code-viewer-inner'); var e2 = $('#" + id3 + "'); e2.show(); e1.hide();\">raw</a>"); |
| 34 | var eraw = $('#' + id3); |
| 35 | var lines = src.split('\n'); |
| 36 | var src2 = ''; |
| 37 | for (var i = 0; i < lines.length - 1; i++) { |
| 38 | var line = lines[i]; |
| 39 | line = line.replace(/\</g, '<'); |
| 40 | line = line.replace(/\>/g, '>'); |
| 41 | id = cv_getId(); |
| 42 | etag.append("<tr id='" + id + "' class='line'></tr>"); |
| 43 | var eline = $('#' + id); |
| 44 | id = cv_getId(); |
| 45 | id2 = cv_getId(); |
| 46 | eline.append("<td id='" + id + "' class='number'></td><td id='" + id2 + "' class='data'></td>"); |
| 47 | var enumber = $('#' + id); |
| 48 | enumber.text(i + 1); |
| 49 | var edata = $('#' + id2); |
| 50 | edata.html(line); |
| 51 | edata.css('white-space', 'pre-wrap'); |
| 52 | edata.css('font-family', 'monospace'); |
| 53 | src2 += line + '\n'; |
| 54 | } |
| 55 | eraw.append("<pre>" + src2 + "</pre>"); |
| 56 | } |
| 57 | var items = $('pre.code'); |
| 58 | for (var i = 0; i < items.length; i++) { |
| 59 | cv_process(items[i]); |
| 60 | } |
| 61 | </script> |
<style>
.code-viewer { border: solid 1px silver; font-family: monospace; font-size: 12px; padding: 5px; background-color: white; margin-bottom: 10px; }
.code-viewer-inner { width: 100%; border-top: solid 1px #E3E3E3; }
.code-viewer .line .number { width: 40px; background-color: teal; color: white; border-bottom: solid 1px #E3E3E3; padding: 0px 5px 0px 5px; }
.code-viewer .line .data { border-bottom: solid 1px #E3E3E3; white-space: pre-wrap; padding-left: 5px; }
.code-viewer .action { padding: 0px 0px 5px 0px; }
.code-viewer .action a { text-decoration: none; color: teal; font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; margin: 0px 5px 0px 5px; }
.code-viewer .action a:hover { text-decoration: underline; }
.code-viewer .raw-code { display: none; }
</style>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
var cv_ids = new Array();
function cv_getId() {
var id = 'E' + Math.floor(Math.random() * 100000);
while (cv_ids.indexOf(id) >= 0) {
id = 'E' + Math.floor(Math.random() * 100000);
}
cv_ids.push(id);
return id;
}
function cv_process(esrc) {
esrc = $(esrc);
var src = esrc.html();
esrc.hide();
var id = cv_getId();
var id2 = cv_getId();
var id3 = cv_getId();
esrc.after("<div id='" + id + "' class='code-viewer'><div id='" + id2 + "' class='action'></div><table cellspacing='0' cellpadding='0' class='code-viewer-inner'></table><div id='" + id3 + "' class='raw-code'></div></div>");
var etag = $('#' + id + ' .code-viewer-inner');
var eaction = $('#' + id2);
eaction.append("<a href='javascript:return false;' onclick=\"var e1 = $('#" + id + " .code-viewer-inner'); var e2 = $('#" + id3 + "'); e1.show(); e2.hide();\">formatted</a>");
eaction.append("<a href='javascript:return false;' onclick=\"var e1 = $('#" + id + " .code-viewer-inner'); var e2 = $('#" + id3 + "'); e2.show(); e1.hide();\">raw</a>");
var eraw = $('#' + id3);
var lines = src.split('\n');
var src2 = '';
for (var i = 0; i < lines.length - 1; i++) {
var line = lines[i];
line = line.replace(/\</g, '<');
line = line.replace(/\>/g, '>');
id = cv_getId();
etag.append("<tr id='" + id + "' class='line'></tr>");
var eline = $('#' + id);
id = cv_getId();
id2 = cv_getId();
eline.append("<td id='" + id + "' class='number'></td><td id='" + id2 + "' class='data'></td>");
var enumber = $('#' + id);
enumber.text(i + 1);
var edata = $('#' + id2);
edata.html(line);
edata.css('white-space', 'pre-wrap');
edata.css('font-family', 'monospace');
src2 += line + '\n';
}
eraw.append("<pre>" + src2 + "</pre>");
}
var items = $('pre.code');
for (var i = 0; i < items.length; i++) {
cv_process(items[i]);
}
</script>
No comments:
Post a Comment