extending-language-services-folding-provider-example.html 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  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. <div id="container" style="height: 100%"></div>
  20. <!-- ----------------------------------------SAMPLE HTML END-->
  21. </div>
  22. <div style="clear:both"></div>
  23. <script src="../../metadata.js"></script>
  24. <script src="dev-setup.js"></script>
  25. <script>
  26. loadEditor(function() {
  27. /*----------------------------------------SAMPLE JS START*/
  28. monaco.languages.register({
  29. id: 'foldLanguage'
  30. });
  31. var value = `1. Hit F1 to bring up the Command Palette
  32. 2. Type 'fold'
  33. 3. Choose 'Fold All Block Comments' or 'Fold All Regions'
  34. 5. comment1
  35. 6. comment1
  36. 7. comment1
  37. 9. unfoldable text
  38. 10. unfoldable text
  39. 11. unfoldable text
  40. 13. comment2
  41. 14. comment2
  42. 15. comment2
  43. 16. comment2
  44. 17. comment2
  45. 19. foldable text
  46. 20. foldable text
  47. 21. foldable text
  48. 23. region1
  49. 24. region1
  50. 25. region1
  51. 27. region2
  52. 28. region2
  53. 29. region2`;
  54. monaco.editor.create(document.getElementById('container'), {
  55. value: value,
  56. language: 'foldLanguage'
  57. });
  58. monaco.languages.registerFoldingRangeProvider('foldLanguage', {
  59. provideFoldingRanges: function (model, context, token) {
  60. return [
  61. // comment1
  62. {
  63. start: 5,
  64. end: 7,
  65. kind: monaco.languages.FoldingRangeKind.Comment
  66. },
  67. // comment2
  68. {
  69. start: 13,
  70. end: 17,
  71. kind: monaco.languages.FoldingRangeKind.Comment
  72. },
  73. // foldable text
  74. {
  75. start: 19,
  76. end: 21
  77. },
  78. // region1
  79. {
  80. start: 23,
  81. end: 25,
  82. kind: monaco.languages.FoldingRangeKind.Region
  83. },
  84. // region2
  85. {
  86. start: 27,
  87. end: 29,
  88. kind: monaco.languages.FoldingRangeKind.Region
  89. }
  90. ];
  91. }
  92. });
  93. /*----------------------------------------SAMPLE JS END*/
  94. });
  95. </script>
  96. </body>
  97. </html>