vue-syntax-highlight
vue-syntax-highlight copied to clipboard
Does not recognize custom elements or elements with dash (eg. `<q-page>`)
trafficstars
<template>
<q-page class="row">
<q-scroll-area id="content" class="col">
<p class="caption">Main Colors</p>
<div class="main-color shadow-1 row inline flex-center text-white" v-for="color in main" :key="color" :class="`bg-${color}`">
{{ color }}
</div><br><br>
<div class="main-color shadow-1 row inline flex-center text-white" v-for="color in alert" :key="color" :class="`bg-${color}`">
{{ color }}
</div><br><br>
<div class="main-color shadow-1 row inline flex-center text-white" v-for="color in dark" :key="color" :class="`bg-${color}`">
{{ color }}
</div><br><br>
<div class="main-color shadow-1 row inline flex-center text-dark" v-for="color in light" :key="color" :class="`bg-${color}`">
{{ color }}
</div><br><br>
<p class="caption">Full Palette</p>
<q-tabs inverted>
<q-tab default slot="title" name="tab-default" label="red" color="red" />
<q-tab-pane name="tab-default">
<div class="detailed-color column flex-center" v-for="n in 14" :key="n" :class="`bg-red-${n}`">red-{{ n }}</div>
</q-tab-pane>
<q-tab v-for="(color, index) in colors" :key="color" slot="title" :name="`tab-${index}`" :label="color" :color="color" />
<q-tab-pane v-for="(color, index) in colors" :key="color" :name="`tab-${index}`">
<div class="detailed-color column flex-center" v-for="n in 14" :key="n" :class="`bg-${color}-${n}`">{{ color }}-{{ n }}</div>
</q-tab-pane>
</q-tabs>
</q-scroll-area>
</q-page>
</template>
The color of <q-*> elements should be green and not the same color than an attribute.
Currently:

Expected:

Yeah this definitely is an issue, I'll see if I can fix it in the next few days.
Github's syntax highlighting uses the old tmLanguage which is not particularly fun to update. Lemme see if I can backport some fixes from vetur and update the old language syntax.
Any news? @skyronic