jonsmithers / vim-html-template-literals

Syntax highlighting for html template literals in javascript (as in lit-html and polymer 3)
MIT License
71 stars 10 forks source link

Integrate othree html5 plugin for the HTML highlighting? #3

Closed dman777 closed 6 years ago

dman777 commented 6 years ago

Thanks for the effort in this.

The highlighting is a bit off... for instance, a opening <div> tag would be a different color than the closing </div> tag.

Looking at the source code it is pulling all of it coloring from vim-javascript(which is great for Js...it is my favorite plugin).

Is there a way to also integrate https://github.com/othree/html5.vim for the HTML highlighting portion? The html5 plugin is much cleaner and does a better job on the HTML portion than the JS does.

I spent about 5 hours trying to make it work with no success.

dman777 commented 6 years ago

UPDATE: I found a way to incorporate the syntax objects from html5.vim to vim-html-template-literals. I was going to submit a PR with it but still needs some work... not sure how much work is worth putting into if the indention doesn't work.

@jonsmithers is there anyway you can get the indention working? I took a stab at it and didn't get anywhere.

jonsmithers commented 6 years ago

I think it's normal for </div> to be a different color than <div>. A lot of colorschemes seem to do that intentionally for xml syntax.

It would be nice to use html syntax instead of xml syntax. When I initially tried using html, I would get an infinite loop issue because javascript syntax would include html syntax which would then re-include javascript syntax. Maybe you've seen this too? I think this can be avoided by including html syntax inside a filetype autocommand instead of in the javascript syntax definition. This is how cdata/vim-tagged-template applies custom js syntax and thus avoids the infinite loop issue.

All I'm really saying is that we could try using html syntax by writing the js syntax in a filetype autocommand instead of inside syntax/javascript.vim. Any html syntax plugins like othree/html5 would then apply naturally.

autocmd FileType javascript,typescript : call htmltemplateliterals#amendSyntax()

I've had to write custom code to make css work inside <style> tags. I could delete that code if we switch from xml to actual html because it will just work.

jonsmithers commented 6 years ago

Regarding indentation....that's been a real challenge. Most of the issues arise at the seems between 2 different syntaxes (html`...` or ${...} or <style>...</style>), and I just haven't been able to find a simple algorithm that handles everything correctly. There's a lot of edge cases. I'm definitely open to ideas. Or re-writing indent/javascript.vim from scratch.

Switching from xml to html would help by taking care of all the <style> tag indentation.

dman777 commented 6 years ago

I think it's normal for

to be a different color than
. A lot of colorschemes seem to do that intentionally for xml syntax.

I dont know about XML, but not for HTML... pygmentize does not and nether does html5.vim. But I have this fixed already.

Switching from xml to html would help by taking care of all the