extending-language-services-color-provider-example.html 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  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: "colorLanguage"
  31. })
  32. monaco.editor.create(document.getElementById("container"), {
  33. value: "red\nblue\ngreen",
  34. language: "colorLanguage",
  35. colorDecorators: true
  36. });
  37. monaco.languages.registerColorProvider("colorLanguage", {
  38. provideColorPresentations: (model, colorInfo) => {
  39. var color = colorInfo.color;
  40. var red256 = Math.round(color.red * 255);
  41. var green256 = Math.round(color.green * 255);
  42. var blue256 = Math.round(color.blue * 255);
  43. var label;
  44. if (color.alpha === 1) {
  45. label = "rgb(" + red256 + ", " + green256 + ", " + blue256 + ")";
  46. } else {
  47. label = "rgba(" + red256 + ", " + green256 + ", " + blue256 + ", " + color.alpha + ")";
  48. }
  49. return [
  50. {
  51. label: label
  52. }
  53. ];
  54. },
  55. provideDocumentColors: () => {
  56. return [
  57. {
  58. color: { red: 1, blue: 0, green: 0, alpha: 1 },
  59. range:{
  60. startLineNumber: 1,
  61. startColumn: 0,
  62. endLineNumber: 1,
  63. endColumn: 0
  64. }
  65. },
  66. {
  67. color: { red: 0, blue: 1, green: 0, alpha: 1 },
  68. range:{
  69. startLineNumber: 2,
  70. startColumn: 0,
  71. endLineNumber: 2,
  72. endColumn: 0
  73. }
  74. },
  75. {
  76. color: { red: 0, blue: 0, green: 1, alpha: 1 },
  77. range:{
  78. startLineNumber: 3,
  79. startColumn: 0,
  80. endLineNumber: 3,
  81. endColumn: 0
  82. }
  83. }
  84. ]
  85. }
  86. })
  87. /*----------------------------------------SAMPLE JS END*/
  88. });
  89. </script>
  90. </body>
  91. </html>