highlight.html 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <script src="js/highlight.js" type="text/javascript"></script>
  4. <script src="js/stringstream.js" type="text/javascript"></script>
  5. <script src="js/tokenize.js" type="text/javascript"></script>
  6. <script src="js/tokenizejavascript.js" type="text/javascript"></script>
  7. <script src="js/parsejavascript.js" type="text/javascript"></script>
  8. <title>CodeMirror: String highlight demonstration</title>
  9. <link rel="stylesheet" type="text/css" href="css/jscolors.css"/>
  10. </head>
  11. <body style="padding: 20px;">
  12. <div style="border: 1px solid black; padding: .4em;">
  13. <textarea id="code" cols="120" rows="20" style="border-width: 0">
  14. // Demo for running a CodeMirror parser over a piece of code without
  15. // creating an actual editor.
  16. (function(){
  17. function normaliseString(string) {
  18. var tab = "";
  19. for (var i = 0; i &lt; indentUnit; i++) tab += " ";
  20. string = string.replace(/\t/g, tab).replace(/\u00a0/g, " ").replace(/\r\n?/g, "\n");
  21. var pos = 0, parts = [], lines = string.split("\n");
  22. for (var line = 0; line &lt; lines.length; line++) {
  23. if (line != 0) parts.push("\n");
  24. parts.push(lines[line]);
  25. }
  26. return {
  27. next: function() {
  28. if (pos &lt; parts.length) return parts[pos++];
  29. else throw StopIteration;
  30. }
  31. };
  32. }
  33. window.highlightText = function(string, output, parser) {
  34. var parser = (parser || Editor.Parser).make(stringStream(normaliseString(string)));
  35. try {
  36. while (true) {
  37. var token = parser.next();
  38. var span = document.createElement("SPAN");
  39. span.className = token.style;
  40. span.appendChild(document.createTextNode(token.value));
  41. output.appendChild(span);
  42. }
  43. }
  44. catch (e) {
  45. if (e != StopIteration) throw e;
  46. }
  47. }
  48. })();
  49. </textarea>
  50. </div>
  51. <button onclick="highlight()">Run highlighter</button>
  52. <div>
  53. <div id="numbers" style="float: left; width: 2em; margin-right: .5em; text-align: right; font-family: monospace; color: #CCC;"></div>
  54. <pre id="output" style="font-family: monospace"></pre>
  55. </div>
  56. <script type="text/javascript">
  57. // Simple hack to demonstrate adding line numbers. Just pass the DOM node as
  58. // the second argument to highlightText when you don't need those
  59. function highlight() {
  60. var lineNo = 1, output = document.getElementById("output"), numbers = document.getElementById("numbers");
  61. output.innerHTML = numbers.innerHTML = "";
  62. function addLine(line) {
  63. numbers.appendChild(document.createTextNode(String(lineNo++)));
  64. numbers.appendChild(document.createElement("BR"));
  65. for (var i = 0; i < line.length; i++) output.appendChild(line[i]);
  66. output.appendChild(document.createElement("BR"));
  67. }
  68. highlightText(document.getElementById("code").value, addLine);
  69. }
  70. </script>
  71. </body>
  72. </html>