creating-the-editor-syntax-highlighting-for-html-elements.html 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <!DOCTYPE html>
  2. <!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
  3. <html>
  4. <head>
  5. <base href="..">
  6. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  7. </head>
  8. <body>
  9. <style>
  10. /*----------------------------------------SAMPLE CSS START*/
  11. /*----------------------------------------SAMPLE CSS END*/
  12. </style>
  13. <a class="loading-opts" href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
  14. THIS IS A GENERATED FILE VIA `npm run simpleserver`
  15. <div id="bar" style="margin-bottom: 6px;"></div>
  16. <div style="clear:both"></div>
  17. <div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
  18. <!-- ----------------------------------------SAMPLE HTML START-->
  19. <pre id="code" data-lang="text/css" style="width: 500px">
  20. /* Some example CSS */
  21. @import url("something.css");
  22. body {
  23. margin: 0;
  24. padding: 3em 6em;
  25. font-family: tahoma, arial, sans-serif;
  26. color: #000;
  27. }
  28. #navigation a {
  29. font-weight: bold;
  30. text-decoration: none !important;
  31. }
  32. h1 {
  33. font-size: 2.5em;
  34. }
  35. h2 {
  36. font-size: 1.7em;
  37. }
  38. h1:before, h2:before {
  39. content: "some contents";
  40. }
  41. code {
  42. font-family: courier, monospace;
  43. font-size: 80%;
  44. color: #418A8A;
  45. }
  46. </pre>
  47. <!-- ----------------------------------------SAMPLE HTML END-->
  48. </div>
  49. <div style="clear:both"></div>
  50. <script src="../../metadata.js"></script>
  51. <script src="dev-setup.js"></script>
  52. <script>
  53. loadEditor(function() {
  54. /*----------------------------------------SAMPLE JS START*/
  55. // The colorizeElement-function will read the data-lang-attribute
  56. // from the element to select the correct language mode. In this
  57. // sample it is text/css.
  58. monaco.editor.colorizeElement(document.getElementById('code'));
  59. /*----------------------------------------SAMPLE JS END*/
  60. });
  61. </script>
  62. </body>
  63. </html>