customizing-the-appearence-exposed-css-classes.html 2.0 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. .monaco-editor, .monaco-editor-background {
  13. background: #EDF9FA;
  14. }
  15. /* Cursor */
  16. .monaco-editor .cursor {
  17. background: darkred !important;
  18. }
  19. /* Current line */
  20. .monaco-editor .current-line {
  21. background: rgba(0, 0, 255, 0.1);
  22. }
  23. /* Line Numbers */
  24. .monaco-editor .line-numbers {
  25. background-color: #EDF9FA;
  26. color: green;
  27. }
  28. /* Line Decorations */
  29. .monaco-editor .lines-decorations {
  30. background-color: #EDF9FA;
  31. }
  32. /* Selection */
  33. .monaco-editor .view-overlays.focused .selected-text {
  34. background: rgba(128, 0, 0, 0.2) !important;
  35. }
  36. .monaco-editor .view-overlays .selected-text {
  37. background: rgba(128, 0, 0, 0.1) !important;
  38. }
  39. /*----------------------------------------SAMPLE CSS END*/
  40. </style>
  41. <a class="loading-opts" href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
  42. THIS IS A GENERATED FILE VIA gulp generate-test-samples
  43. <div id="bar" style="margin-bottom: 6px;"></div>
  44. <div style="clear:both"></div>
  45. <div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
  46. <!-- ----------------------------------------SAMPLE HTML START-->
  47. <div id="container" style="height:100%;"></div>
  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 editor exposes a set of CSS classes that can be overwritten.
  57. monaco.editor.create(document.getElementById("container"), {
  58. value: "My to-do list:\n* buy milk\n* buy coffee\n* write awesome code",
  59. language: "text/plain",
  60. fontFamily: "Arial",
  61. fontSize: 20
  62. });
  63. /*----------------------------------------SAMPLE CSS END*/
  64. });
  65. </script>
  66. </body>
  67. </html>