vue - custom blocks - syntax highlighting

Question

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.

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

tony19 · Accepted Answer · 2021-07-13 15:18:29Z

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

edited Jul 13, 2021 at 15:18

answered Apr 11, 2020 at 22:21

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

songololo Over a year ago

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)

tony19 Over a year ago

@songololo That command needs to be run from the Command Palette, not from a terminal/shell.

Collectives™ on Stack Overflow

vue - custom blocks - syntax highlighting

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related