interacting-with-the-editor-rendering-glyphs-in-the-margin.html 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  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. .myGlyphMarginClass {
  12. background: red;
  13. }
  14. .myContentClass {
  15. background: lightblue;
  16. }
  17. /*----------------------------------------SAMPLE CSS END*/
  18. </style>
  19. <a class="loading-opts" href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
  20. THIS IS A GENERATED FILE VIA `npm run simpleserver`
  21. <div id="bar" style="margin-bottom: 6px;"></div>
  22. <div style="clear:both"></div>
  23. <div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
  24. <!-- ----------------------------------------SAMPLE HTML START-->
  25. <div id="container" style="height: 100%"></div>
  26. <!-- ----------------------------------------SAMPLE HTML END-->
  27. </div>
  28. <div style="clear:both"></div>
  29. <script src="../../metadata.js"></script>
  30. <script src="dev-setup.js"></script>
  31. <script>
  32. loadEditor(function() {
  33. /*----------------------------------------SAMPLE JS START*/
  34. var jsCode = [
  35. '"use strict";',
  36. 'function Person(age) {',
  37. ' if (age) {',
  38. ' this.age = age;',
  39. ' }',
  40. '}',
  41. 'Person.prototype.getAge = function () {',
  42. ' return this.age;',
  43. '};'
  44. ].join('\n');
  45. var editor = monaco.editor.create(document.getElementById('container'), {
  46. value: jsCode,
  47. language: 'javascript',
  48. glyphMargin: true
  49. });
  50. var decorations = editor.deltaDecorations(
  51. [],
  52. [
  53. {
  54. range: new monaco.Range(3, 1, 3, 1),
  55. options: {
  56. isWholeLine: true,
  57. className: 'myContentClass',
  58. glyphMarginClassName: 'myGlyphMarginClass'
  59. }
  60. }
  61. ]
  62. );
  63. // You can now use `decorations` to change or remove the decoration
  64. /*----------------------------------------SAMPLE JS END*/
  65. });
  66. </script>
  67. </body>
  68. </html>