search

sumcumo / nuxt-styleguide

Increase the quality and efficiency of product design and development workflows
https://sumcumo.github.io/nuxt-styleguide/
Apache License 2.0
16 stars 2 forks source link

Code highlighting in VS Code (using Vetur for Vue) is funky #8

Closed escapedcat closed 6 years ago

escapedcat commented 6 years ago

image

<styleguide-states> looks funny now.
Nothing serious. Just opening this for transparency.

Xiphe commented 6 years ago

Vetur supports highlighting for custom blocks: https://github.com/vuejs/vetur/blob/master/docs/highlighting.md

But there seems to be an issue when the block starts with style... - so I added support for nsg-

So to get this to work you need to

  1. install nuxt-styleguide@^5.2.0
  2. Add this to your vscode config: 
    "vetur.grammar.customBlocks": {
    "nsg-doc": "md",
    "nsg-states": "js"
}
  3. Run the command "Vetur: Generate grammar from vetur.grammar.customBlocks" (via Command+Shift+P)
  4. Close and re-open vscode
  5. Refactor use of styleguide-doc to nsg-doc
  6. Refactor use of styleguide-states to nsg-states
  7. enjoy