0

Vue single file components enable to create custom blocks (apart from the well-known script, template and style). Official docs: https://vue-loader.vuejs.org/guide/custom-blocks.html#example But is there a way to get syntax highligting to work inside such a custom block? I tried inserting JS code as well as other lang types but there is no syntax highlighting.

1
  • Syntax highlighting depends on your IDE doesn't it? Chances are the extension/plugin you've installed does not recognize custom blocks.
    – Terry
    Apr 11, 2020 at 21:53

1 Answer 1

3

Vetur supports syntax highlighting in a 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
2
  • Can you run the Vetur: Generate grammar command from a terminal in VScode? I keep getting the "command not found: Vetur" error and I've checked that the Vue Language Server is indeed running.... (Mac OS)
    – songololo
    Dec 6, 2020 at 10:34
  • 1
    @songololo That command needs to be run from the Command Palette, not from a terminal/shell.
    – tony19
    Dec 28, 2020 at 21:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.