cdata / vim-tagged-template

Highlights JavaScript/TypeScript tagged Template Strings with custom syntaxes

vim-tagged-template

NOTE: This plugin is a fork of vim-js-pretty-template. I began this fork as an attempt to patch vim-js-pretty-template with new features, but before I got very far I had already redesigned the API substantially and decided that this should live as its own plugin until such time as it can be upstreamed.

This plugin lets you configure tags for JavaScript/TypeScript Template Strings (aka Template Literals) with special highlighting for their contents. For example, you may want to highlight the contents of a template string tagged with html as actual HTML.

Here is a short demo of the syntax highlighting that this plugin enables:

How to install

You can use your Vim plugin manager of choice to install the plugin. For example, with vim-plug you would add this to your .vimrc:

Plug 'cdata/vim-tagged-template'

Usage

In order to map template tags to file syntaxes, you need to set the global g:taggedtemplate#tagSyntaxMap. Here is an example that configures syntax highlighting for HTML, CSS and Markdown:

" NOTE: Tag on the left, filetype on the right
let g:taggedtemplate#tagSyntaxMap = {
  \ "html": "html",
  \ "md":   "markdown",
  \ "css":  "css" }

Then, you need to configure it to apply for the appropriate filetypes. Here is an example to configure it to apply to JavaScript and TypeScript files:

autocmd FileType javascript,typescript : call taggedtemplate#applySyntaxMap()

License

This plugin is released under the MIT license, see LICENSE.txt.