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

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