static-highlighter.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  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. <script src="kitchen-sink/require.js"></script>
  45. <script>
  46. require.config({paths: { "ace" : "../lib/ace"}});
  47. require(["ace/ace", "ace/ext/static_highlight"], function(ace) {
  48. var highlight = ace.require("ace/ext/static_highlight")
  49. var dom = ace.require("ace/lib/dom")
  50. function qsa(sel) {
  51. return Array.apply(null, document.querySelectorAll(sel));
  52. }
  53. qsa(".code").forEach(function (codeEl) {
  54. highlight(codeEl, {
  55. mode: codeEl.getAttribute("ace-mode"),
  56. theme: codeEl.getAttribute("ace-theme"),
  57. startLineNumber: 1,
  58. showGutter: codeEl.getAttribute("ace-gutter"),
  59. trim: true
  60. }, function (highlighted) {
  61. });
  62. });
  63. })
  64. </script>
  65. </body>
  66. </html>