sample.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. /** @type {monaco.languages.SemanticTokensLegend} */
  2. const legend = {
  3. tokenTypes: [
  4. 'comment', 'string', 'keyword', 'number', 'regexp', 'operator', 'namespace',
  5. 'type', 'struct', 'class', 'interface', 'enum', 'typeParameter', 'function',
  6. 'member', 'macro', 'variable', 'parameter', 'property', 'label'
  7. ],
  8. tokenModifiers: [
  9. 'declaration', 'documentation', 'readonly', 'static', 'abstract', 'deprecated',
  10. 'modification', 'async'
  11. ]
  12. };
  13. /** @type {(type: string)=>number} */
  14. function getType(type) {
  15. return legend.tokenTypes.indexOf(type);
  16. }
  17. /** @type {(modifier: string[]|string|null)=>number} */
  18. function getModifier(modifiers) {
  19. if (typeof modifiers === 'string') modifiers = [modifiers];
  20. if (Array.isArray(modifiers)) {
  21. let nModifiers = 0;
  22. for (let modifier of modifiers) {
  23. nModifier = legend.tokenModifiers.indexOf(modifier);
  24. if (nModifier > -1) {
  25. nModifiers |= (1 << nModifier) >>> 0;
  26. }
  27. }
  28. return nModifiers;
  29. } else {
  30. return 0;
  31. }
  32. }
  33. const tokenPattern = new RegExp('(?<=\\[)([a-zA-Z]+)((?:\\.[a-zA-Z]+)*)(?=\\])', 'g');
  34. monaco.languages.registerDocumentSemanticTokensProvider('plaintext', {
  35. getLegend: function () {
  36. return legend;
  37. },
  38. provideDocumentSemanticTokens: function (model, lastResultId, token) {
  39. const lines = model.getLinesContent();
  40. /** @type {number[]} */
  41. const data = [];
  42. let prevLine = 0;
  43. let prevChar = 0;
  44. for (let i = 0; i < lines.length; i++) {
  45. const line = lines[i];
  46. for (let match = null; match = tokenPattern.exec(line);) {
  47. // translate token and modifiers to number representations
  48. let type = getType(match[1]);
  49. if (type === -1) continue;
  50. let modifier = match[2].length
  51. ? getModifier(match[2].split('.').slice(1))
  52. : 0;
  53. data.push(
  54. // translate line to deltaLine
  55. i - prevLine,
  56. // for the same line, translate start to deltaStart
  57. prevLine === i ? match.index - prevChar : match.index,
  58. match[0].length,
  59. type,
  60. modifier
  61. );
  62. prevLine = i;
  63. prevChar = match.index;
  64. }
  65. }
  66. return {
  67. data: new Uint32Array(data),
  68. resultId: null
  69. };
  70. },
  71. releaseDocumentSemanticTokens: function (resultId) { }
  72. });
  73. // add some missing tokens
  74. monaco.editor.defineTheme('myCustomTheme', {
  75. base: 'vs',
  76. inherit: true,
  77. rules: [
  78. { token: 'comment', foreground: 'aaaaaa', fontStyle: 'italic' },
  79. { token: 'keyword', foreground: 'ce63eb' },
  80. { token: 'operator', foreground: '000000' },
  81. { token: 'namespace', foreground: '66afce' },
  82. { token: 'type', foreground: '1db010' },
  83. { token: 'struct', foreground: '0000ff' },
  84. { token: 'class', foreground: '0000ff', fontStyle: 'bold' },
  85. { token: 'interface', foreground: '007700', fontStyle: 'bold' },
  86. { token: 'enum', foreground: '0077ff', fontStyle: 'bold' },
  87. { token: 'typeParameter', foreground: '1db010' },
  88. { token: 'function', foreground: '94763a' },
  89. { token: 'member', foreground: '94763a' },
  90. { token: 'macro', foreground: '615a60' },
  91. { token: 'variable', foreground: '3e5bbf' },
  92. { token: 'parameter', foreground: '3e5bbf' },
  93. { token: 'property', foreground: '3e5bbf' },
  94. { token: 'label', foreground: '615a60' },
  95. { token: 'type.static', fontStyle: 'bold' },
  96. { token: 'class.static', foreground: 'ff0000', fontStyle: 'bold' }
  97. ]
  98. });
  99. const editor = monaco.editor.create(document.getElementById("container"), {
  100. value: `Available token types:
  101. [comment] [string] [keyword] [number] [regexp] [operator] [namespace]
  102. [type] [struct] [class] [interface] [enum] [typeParameter] [function]
  103. [member] [macro] [variable] [parameter] [property] [label]
  104. Available token modifiers:
  105. [type.declaration] [type.documentation] [type.member] [type.static]
  106. [type.abstract] [type.deprecated] [type.modification] [type.async]
  107. Some examples:
  108. [class.static.token] [type.static.abstract]
  109. [class.static.token] [type.static]
  110. [struct]
  111. [function.private]
  112. An error case:
  113. [notInLegend]`,
  114. language: "plaintext",
  115. theme: 'myCustomTheme',
  116. // semantic tokens provider is disabled by default
  117. 'semanticHighlighting.enabled': true
  118. });
  119. // currently there isn't builtin token handling
  120. editor._themeService._knownThemes.forEach(function (theme) {
  121. theme.getTokenStyleMetadata = (type, modifiers) => {
  122. // use theme rules match
  123. const style = theme._tokenTheme._root.match([type, ...modifiers].join('.'));
  124. return {
  125. foreground: style._foreground,
  126. italic: style._fontStyle & 1,
  127. bold: style._fontStyle & 2,
  128. underline: style._fontStyle & 4
  129. };
  130. };
  131. });
  132. // press F4 to change theme
  133. editor.addCommand(monaco.KeyCode.F4, function () {
  134. switch (editor._themeService.getTheme().themeName) {
  135. case 'vs': monaco.editor.setTheme('vs-dark'); break;
  136. case 'vs-dark': monaco.editor.setTheme('hc-black'); break;
  137. case 'hc-black': monaco.editor.setTheme('myCustomTheme'); break;
  138. case 'myCustomTheme': monaco.editor.setTheme('vs'); break;
  139. }
  140. });