Syntax Highlighting - Vue Files - HTML Attributes


I have several vue packages installed including language-vue, language-vue-component and vue-format.

While working in a Webpack environment, the HTML attributes contained within .vue files (for example App.vue), are not highlighted…it’s all the same color.

Anyone else have this issue?
Anyone know how to fix it?

Atom : 1.17.2
Electron: 1.3.15
Chrome : 52.0.2743.82
Node : 6.5.0


It’s not a bug. The authors of the language-vue package just haven’t set it up to recognize HTML tags. You should make a feature request or add it yourself.


Okay, thanks! I’ll make a request and see if I can figure it out. If anyone knows how to set it up, please reply. Thanks again :slight_smile:


You can see an example here. Atom matches the outer patterns (begin: "(?<!</(?:script|SCRIPT))(>)" and end: "(</)((?i:script))"), then everything inside those tokens is matched against the grammar that matches source.css. I have an annotated grammar boilerplate that explains the parts of the grammar.


Honestly, I didn’t think I was going to be able to get that to work…but I GOT IT!!!

Thanks DS! :slight_smile:


Can you share your solution? Or post here:



Did you get it worked out?


I did, just had two highlighters installed. Thanks!