1
0

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

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