html 注释不高亮是因 tokenization 失败或主题未映射 comment token；script/style 块需正确 type 属性且子语言已加载；标签补全依赖内置 html 语言服务，非手动注册可替代；cdn 下 monaco.languages.html 需在 onlanguage('html') 回调中使用。
language 设置为 html 时为什么注释不高亮？
Monaco 默认对 html 语言启用基础语法高亮，但文档注释（如 <!-- comment -->）是否高亮，取决于内置的 Monarch 规则是否将 comment token 映射到有效样式类。默认主题（如 vs 或 vs-dark）通常已定义 comment 类，但若你自定义了 theme 或覆盖了 token 颜色配置，就可能丢失注释颜色。
验证方式：打开开发者工具，选中一段注释文字，检查其 DOM 元素是否带有 mtk7（Monaco 默认 comment 类名）；如果没有，说明 tokenization 失败或 theme 未映射该 token。
- 确保初始化时未误设
language: "plaintext"或漏传language - 不要手动修改
monaco.editor.defineTheme中的comments字段却遗漏token键（应写成"comments": { "token": "comment" }） - 避免在
registerLanguage中覆盖 HTML 语言定义——除非你明确重写了整个 Monarch 配置
如何让 <script> 和 <style> 块内也高亮 JS/CSS？</script>
原生 html language 支持嵌入式语言高亮，但需满足两个前提：容器元素必须有正确属性，且 Monaco 已加载对应子语言支持模块。
默认情况下，<script></script> 标签只有带 type="text/javascript"（或无 type）才触发 JS 高亮；<style></style> 只有 type="text/css"（或无 type）才触发 CSS 高亮。若用 type="module" 或 type="text/tsx"，Monaco 不会自动识别。
- 显式声明语言类型：写成
<script type="text/javascript"></script>、<style type="text/css"></style> - 提前加载子语言：在
monaco.editor.create前，确保已执行monaco.languages.typescript.javascriptDefaults和monaco.languages.css.cssDefaults初始化（尤其使用 CDN 时） - 对非标 type（如
type="application/json"），需调用monaco.languages.html.setHtmlConfiguration扩展规则，否则会被当作文本处理
注册 HTML 补全项后，输入
Monaco 的 HTML 补全是基于语言服务（html language server）的，不是靠 registerCompletionItemProvider 简单挂载就能生效。手动注册只对特定触发字符（如 .、/）起作用，而标签补全由内置 HTML 提供者控制，依赖完整的 HTML 模式解析上下文。
常见失效原因：编辑器实例创建时 language 是 "html"，但实际内容里混用了 JSX 或 Vue 模板语法；或者未等待 monaco.languages.html.htmlDefaults 加载完成就调用 create。
- 确认
value字符串是纯 HTML 片段（不含{}插值、v-if等） - 使用
monaco.languages.registerCompletionItemProvider("html", {...})仅用于补充自定义标签或属性，不能替代原生标签补全逻辑 - 若需 Vue/JSX 支持，必须集成
monaco-html+volar或volar-server，而非仅靠前端注册
CDN 引入后 monaco.languages.html 报 undefined？
CDN 版本（如 https://unpkg.com/monaco-editor@latest/min/vs/loader.js）采用异步模块加载机制。monaco.languages.html 属于“延迟加载语言模块”，它不会随主编辑器一起初始化，而是在首次设置 language: "html" 时按需加载。因此，在 require(['vs/editor/editor.main'], ...) 回调内直接访问该命名空间，大概率是 undefined。
正确时机是等语言模块加载完毕——可通过监听 monaco.languages.getLanguages() 返回列表含 html 后再操作，或更稳妥地用 monaco.languages.onLanguage 事件：
monaco.languages.onLanguage('html', () => {
// 此处可安全调用 monaco.languages.html.htmlDefaults
});
- 不要在
require回调第一层就调用monaco.languages.html - 避免用
setTimeout等“猜时机”方式，容易在低网速下失败 - 如果项目允许，改用 ESM +
import * as monaco from 'monaco-editor'可规避此问题，因为构建工具会静态分析并预加载依赖
HTML 语言的补全和高亮深度耦合于 Monaco 内置的 HTML 语言服务模块，它不像 JavaScript 那样允许你通过简单注册 provider 就接管全部行为。最容易被忽略的是：语言模块的加载时机与编辑器实例初始化不是同步的，而多数人把这两件事当成一回事来处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
