javascript - vue - 自定义 block - 语法高亮

Question

Vue 单文件组件可以创建自定义 block (除了众所周知的脚本、模板和风格)。官方文档:https://vue-loader.vuejs.org/guide/custom-blocks.html#example但是有没有办法让语法高亮在这样的自定义 block 中工作？我尝试插入 JS 代码以及其他 lang 类型，但没有语法突出显示。

Answer 1

Vetur 支持 custom block 中的语法高亮显示:

Vetur provides a setting vetur.grammar.customBlocks that defaults to:

"vetur.grammar.customBlocks": {
  "docs": "md",
  "i18n": "json"
}

You can

• Change vetur.grammar.customBlocks, for example:

"vetur.grammar.customBlocks": {
  "docs": "md",
  "i18n": "json",
  "page-query": "graphql",
  "static-query": "graphql"
}

• Run the command Vetur: Generate grammar from vetur.grammar.customBlocks (via the Command Palette)

• Restart VS Code to get syntax highlighting for custom > blocks.

Valid language value for custom blocks:

• All lang values in the support table.
• md | yaml | json | php | graphql