static-highlighter.html 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>Static Code highlighter using Ace</title>
  6. <meta name="author" content="Matthew Kastor">
  7. <style type="text/css">
  8. .code {
  9. width: 50%;
  10. white-space: pre-wrap;
  11. border: solid lightgrey 1px
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <h2>Client Side Syntax Highlighting</h2>
  17. <p>Syntax highlighting using Ace language modes and themes.</p>
  18. <div class="code" ace-mode="ace/mode/css" ace-theme="ace/theme/chrome" ace-gutter="true">
  19. .code {
  20. width: 50%;
  21. white-space: pre-wrap;
  22. border: solid lightgrey 1px
  23. }
  24. </div>
  25. <pre class="code" ace-mode="ace/mode/javascript" ace-theme="ace/theme/twilight">
  26. function wobble (flam) {
  27. return flam.wobbled = true;
  28. }
  29. </pre>
  30. <div class="code" ace-mode="ace/mode/lua" ace-theme="ace/theme/chrome" ace-gutter="true" style="width: 30em;">
  31. --[[--
  32. num_args takes in 5.1 byte code and extracts the number of arguments from its function header.
  33. --]]--
  34. function int(t)
  35. return t:byte(1) + t:byte(2) * 0x100 + t:byte(3) * 0x10000 + t:byte(4) * 0x1000000
  36. end
  37. function num_args(func)
  38. local dump = string.dump(func)
  39. local offset, cursor = int(dump:sub(13)), offset + 26
  40. --Get the params and var flag (whether there's a ... in the param)
  41. return dump:sub(cursor):byte(), dump:sub(cursor+1):byte()
  42. end
  43. </div>
  44. <!-- load ace -->
  45. <script src="../src/ace.js"></script>
  46. <!-- load ace static_highlight extension -->
  47. <script src="../src/ext-static_highlight.js"></script>
  48. <script>
  49. var highlight = ace.require("ace/ext/static_highlight")
  50. var dom = ace.require("ace/lib/dom")
  51. function qsa(sel) {
  52. return Array.apply(null, document.querySelectorAll(sel));
  53. }
  54. qsa(".code").forEach(function (codeEl) {
  55. highlight(codeEl, {
  56. mode: codeEl.getAttribute("ace-mode"),
  57. theme: codeEl.getAttribute("ace-theme"),
  58. startLineNumber: 1,
  59. showGutter: codeEl.getAttribute("ace-gutter"),
  60. trim: true
  61. }, function (highlighted) {
  62. });
  63. });
  64. </script>
  65. </body>
  66. </html>