Feature request: syntax highlighting for vue language code blocks in markdown

[h0adp0re]

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Info

• Platform: macOS
• Vetur version: 0.14.3
• VS Code version: 1.29.1

Problem

When writing documentation for vue SFCs, it's often needed to provide examples. It'd be great if those examples would be as readable as the real SFCs.

Reproducible Case

Create a code block in markdown. Set the block's language to vue.

    ```vue
      ...

    ```

<template>
  <div class="custom-component">
    <slot />
  </div>
</template>

<script>
  export default {
    name: 'custom-component',
  };
</script>

<style lang="scss">
  .custom-component {
    padding: 1rem;
  }
</style>

GitHub highlights it, why shouldn't Vetur?

[octref]

That's an upstream issue:

• gql inside vue file not properly highlighted #701
• When A grammar injects to B, grammars embedding B should get A's injection microsoft/vscode#44056

@mjbvz Do you have any insights? Should we try to fix this?

[octref]

In short, this needs:

1. Markdown uses vue grammar injection (doable)
2. Markdown uses the js, html, css grammar injection inside the vue grammar injection (doesn't work in VS Code now)

[mjbvz]

New fenced code block highlighting can be contributed by extensions, see: https://github.com/mjbvz/vscode-fenced-code-block-grammar-injection-example

[h0adp0re]

Any progress or ideas on this?