client.html 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>Static Code highlighter using Ace</title>
  7. <meta name="author" content="Fabian Jakobs">
  8. </head>
  9. <body>
  10. <h2>Client Side Syntax Highlighting</h2>
  11. <p>Syntax highlighting using Ace language modes and themes.</p>
  12. <div id="code"></div>
  13. <script type="text/javascript">
  14. var require = {
  15. paths: {
  16. demo: "..",
  17. ace: "../../lib/ace"
  18. }
  19. };
  20. </script>
  21. <script src="../kitchen-sink/require.js"></script>
  22. <script>
  23. require(["ace/ext/static_highlight", "ace/mode/javascript", "ace/theme/twilight", "ace/lib/dom"], function() {
  24. var highlighter = require("ace/ext/static_highlight");
  25. var JavaScriptMode = require("ace/mode/javascript").Mode;
  26. var theme = require("ace/theme/twilight");
  27. var dom = require("ace/lib/dom");
  28. var codeEl = document.getElementById("code");
  29. var data = document.body.innerHTML;
  30. var highlighted = highlighter.render(data, new JavaScriptMode(), theme);
  31. dom.importCssString(highlighted.css, "ace_highlight");
  32. codeEl.innerHTML = highlighted.html;
  33. });
  34. </script>
  35. </body>
  36. </html>