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 Answer
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
fromvetur.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
-
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) Dec 6, 2020 at 10:34 -
1@songololo That command needs to be run from the Command Palette, not from a terminal/shell.– tony19Dec 28, 2020 at 21:02