Syntax highlighting and indentation for html inside of tagged template literals, as seen in lit-html and Polymer 3.
html`...`
<style>
tags)${...}
)html`${html`${}`}`
)See Configuration for support for css tagged literals (css`...`
).
This plugin requires vim-javascript (or typescript-vim if you're using typescript). If you use vim-plug for package management, installation looks like this:
Plug 'jonsmithers/vim-html-template-literals'
Plug 'pangloss/vim-javascript'
NOTE: it's generally a good idea to have let g:html_indent_style1 = "inc"
in your vimrc for reasonable indentation of <style>
tags. See :help html-indenting
.
Flag | Description |
---|---|
g:htl_css_templates |
Enable css syntax inside css-tagged template literals (css`...` ). Indentation behavior is currently not implemented. |
g:htl_all_templates |
(Experimental) Enable html syntax inside all template literals (`...` ). |
g:htl_tag_names |
(Experimental) Specify the tag names in which to enable html syntax highlighting (default ['html'] ). |
You can configure the vim-closetag plugin to work inside html template literals:
let g:closetag_filetypes = 'html,xhtml,phtml,javascript,typescript'
let g:closetag_regions = {
\ 'typescript.tsx': 'jsxRegion,tsxRegion,litHtmlRegion',
\ 'javascript.jsx': 'jsxRegion,litHtmlRegion',
\ 'javascript': 'litHtmlRegion',
\ 'typescript': 'litHtmlRegion',
\ }