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

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