nvim-ts-rainbow
nvim-ts-rainbow copied to clipboard
p00f
Vue, treesitter and rainbow colors?
How can I make Vue work with this plugin?
Current look:
But other treesitter langs work fine, e.g. Fennel:
I have this one installed https://github.com/ikatyang/tree-sitter-vue
The code inside <script> is always js and the code inside <style> is always css, correct? Can you paste an example file here?
But the code in the <script> tag can also be typescript, and the style can also be scss if one wants too, for example:
<template>
<div>Hello Hello </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class HelloWorld extends Vue {
}
</script>
<style lang="scss">
$color: red;
</style>
Here is the normal example:
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
I'm also using this theme by the way: https://github.com/elianiva/gruvy.nvim
graphql inside js works, I don't know why this doesn't
Atleast the curly braces in
<style>and<script>should work :/
I've removed vue tags for now because of the wrong highlighting The vue query file is now empty, so that atleast the js/ts/css/scss inside is rainbow
I'm not sure what happened, but in Vue files the highlighting is fine and everything works, but in regular html files I see this:
https://user-images.githubusercontent.com/1857826/126076556-91033d74-1685-4fb1-aea4-97d74b4ca1f1.png
If I disable rainbow the highlighting returns to regular, which is:
I still have the problem:
I ran PackerSync, so AFAIK I should be on latest. Maybe it's a config then?
That is intended, turn off extended mode for html if you don't want to highlight tag text
Ah yup! thanks works great, thank you
EDIT: well except for the <!DOCTYPE html> part haaha
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
I expect everything inside template tag should parse like a HTML file, will this support in the future? @p00f
the code inside <template> tag can be treated as a regular HTML file with {{}} template sytax, so it'll be better to have HTML rainbow color inside the <template> tag. @p00f
Vue Template Tag
regular HTML file
@Alexie7777 That is done using injections, you have to take this up with nvim-treesitter
@p00f BTW in my experence the Vue <script> end tag is now working. Thanks for the great work 🫡
