Highlight HTML inside of template strings

[mhartington]

Would it be possible to properly add syntax highlighting to template strings? Similar to this issue for atom-typescript

TypeStrong/atom-typescript#948

Looking into it, it doesn't seem impossible, this tsx.vim plugin loads the xml syntax file and then targets the proper files for jsx-style code.

" Prologue; load in XML syntax.
if exists('b:current_syntax')
  let s:current_syntax=b:current_syntax
  unlet b:current_syntax
endif
syn include @XMLSyntax syntax/xml.vim
if exists('s:current_syntax')
  let b:current_syntax=s:current_syntax
endif

" typescriptBlock seems to have been removed from the latest typescript-vim
" syntax using @typescriptAll in it's place works (leaving typescriptBlock for
" backwards compatiblity
syn region tsxRegion contains=@XMLSyntax,tsxRegion,typesciptBlock,@typescriptAll
  \ start="\%(<\|\w\)\@<!<\z([a-zA-Z][a-zA-Z0-9:\-.]*\)"
  \ skip="<!--\_.\{-}-->"
  \ end="</\z1\_\s\{-}>"
  \ end="/>"
  \ keepend
  \ extend

" TSX attributes should color as TS.  Note the trivial end pattern; we let
" typescriptBlock or @typescriptAll take care of ending the region.
syn region xmlString contained start="{" end="" contains=typescriptBlock,@typescriptAll

" Add tsxRegion to the lowest-level TS syntax cluster.
syn cluster typescriptExpression add=tsxRegion

Could be possible to do the same for this plugin and match atom.

[HerringtonDarkholme]

Of course! It is possible.
You can add several lines like this

syn include @XMLSyntax syntax/xml.vim
syn region tsxRegion contains=@XMLSyntax,tsxRegion,typesciptBlock,@typescriptExpression
  \ containedin=typescriptTemplate
  \ start="\%(<\|\w\)\@<!<\z([a-zA-Z][a-zA-Z0-9:\-.]*\)"
  \ skip="<!--\_.\{-}-->"
  \ end="</\z1\_\s\{-}>"
  \ end="/>"
  \ keepend
  \ extend

It should work... But it makes error in dtd.vim... I don't know why...

[HerringtonDarkholme]

OK, I make it work.

I don't think this code will be merged into master because it is not in typescript's highlighting spec.
Yet users can extends yats by adding their own syntax plugin like tsx.vim.

syn include @htmlsyntax syntax/html.vim
syn region tsxRegion contains=@htmlsyntax,tsxRegion,typescriptTemplateSubstitution
  \ containedin=typescriptTemplate
  \ start="\%(<\|\w\)\@<!<\z([a-zA-Z][a-zA-Z0-9:\-.]*\)"
  \ skip="<!--\_.\{-}-->"
  \ end="</\z1\_\s\{-}>"
  \ end="/>"
  \ keepend
  \ extend

[mhartington]

So I ended up with something like this.

if exists('b:current_syntax')
  let s:current_syntax=b:current_syntax
  unlet b:current_syntax
endif
syn include @HTMLSyntax syntax/html.vim
if exists('s:current_syntax')
  let b:current_syntax=s:current_syntax
endif

syn region typescriptTemplateString contains=@HTMLSyntax,typescriptTemplateSubstitution
  \ containedin=typescriptTemplate,javascriptTemplate
  \ start=+\%(<\|\w\)\@<!<\z([a-zA-Z][a-zA-Z0-9:\-.]*\)+
  \ skip=+<!--\_.\{-}-->+
  \ end=+</\z1\_\s\{-}>+
  \ end=+/>+
  \ keepend
  \ extend

Thanks for the point in the right direction.

[michel]

So I ended up with something like this.

if exists('b:current_syntax')
  let s:current_syntax=b:current_syntax
  unlet b:current_syntax
endif
syn include @HTMLSyntax syntax/html.vim
if exists('s:current_syntax')
  let b:current_syntax=s:current_syntax
endif

syn region typescriptTemplateString contains=@HTMLSyntax,typescriptTemplateSubstitution
  \ containedin=typescriptTemplate,javascriptTemplate
  \ start=+\%(<\|\w\)\@<!<\z([a-zA-Z][a-zA-Z0-9:\-.]*\)+
  \ skip=+<!--\_.\{-}-->+
  \ end=+</\z1\_\s\{-}>+
  \ end=+/>+
  \ keepend
  \ extend

Thanks for the point in the right direction.

Hi i've also trying to get HTML syntax highlighting working for template strings (angular). It's exactly the same usecase as @mhartington. But after several hours of trying the things described in this ticket i'm getting nowhere. Things probably must have changed internally. Can you point me in the right direction? @mhartington do you still have this working with the latest revision of yats?

[michel]

So I ended up with something like this.

if exists('b:current_syntax')
  let s:current_syntax=b:current_syntax
  unlet b:current_syntax
endif
syn include @HTMLSyntax syntax/html.vim
if exists('s:current_syntax')
  let b:current_syntax=s:current_syntax
endif

syn region typescriptTemplateString contains=@HTMLSyntax,typescriptTemplateSubstitution
  \ containedin=typescriptTemplate,javascriptTemplate
  \ start=+\%(<\|\w\)\@<!<\z([a-zA-Z][a-zA-Z0-9:\-.]*\)+
  \ skip=+<!--\_.\{-}-->+
  \ end=+</\z1\_\s\{-}>+
  \ end=+/>+
  \ keepend
  \ extend

Thanks for the point in the right direction.

Hi i've also trying to get HTML syntax highlighting working for template strings (angular). It's exactly the same usecase as @mhartington. But after several hours of trying the things described in this ticket i'm getting nowhere. Things probably must have changed internally. Can you point me in the right direction? @mhartington do you still have this working with the latest revision of yats?

Ok, I've figured it out that the custom configuration was set to early when just dumped in .vimrc.
And got it working for me with the following config:

function! EnableInlineHtmlSyntaxHighlightingForTypescript()
  if exists('b:current_syntax')
    let s:current_syntax=b:current_syntax
    unlet b:current_syntax
  endif
  syn include @HTMLSyntax syntax/html.vim
  if exists('s:current_syntax')
    let b:current_syntax=s:current_syntax
  endif

  syn region typescriptTemplateString contains=@HTMLSyntax,typescriptTemplateSubstitution
    \ containedin=typescriptTemplate,javascriptTemplate
    \ start=+\%(<\|\w\)\@<!<\z([a-zA-Z][a-zA-Z0-9:\-.]*\)+
    \ skip=+<!--\_.\{-}-->+
    \ end=+</\z1\_\s\{-}>+
    \ end=+/>+
    \ keepend
    \ extend
endfunction


augroup myTypeScriptStuff
    autocmd!
    autocmd FileType typescript call EnableInlineHtmlSyntaxHighlightingForTypescript()
augroup END

[joeveiga]

So I ended up with something like this.

if exists('b:current_syntax')
  let s:current_syntax=b:current_syntax
  unlet b:current_syntax
endif
syn include @HTMLSyntax syntax/html.vim
if exists('s:current_syntax')
  let b:current_syntax=s:current_syntax
endif

syn region typescriptTemplateString contains=@HTMLSyntax,typescriptTemplateSubstitution
  \ containedin=typescriptTemplate,javascriptTemplate
  \ start=+\%(<\|\w\)\@<!<\z([a-zA-Z][a-zA-Z0-9:\-.]*\)+
  \ skip=+<!--\_.\{-}-->+
  \ end=+</\z1\_\s\{-}>+
  \ end=+/>+
  \ keepend
  \ extend

Thanks for the point in the right direction.

Hi i've also trying to get HTML syntax highlighting working for template strings (angular). It's exactly the same usecase as @mhartington. But after several hours of trying the things described in this ticket i'm getting nowhere. Things probably must have changed internally. Can you point me in the right direction? @mhartington do you still have this working with the latest revision of yats?

Ok, I've figured it out that the custom configuration was set to early when just dumped in .vimrc. And got it working for me with the following config:

function! EnableInlineHtmlSyntaxHighlightingForTypescript()
  if exists('b:current_syntax')
    let s:current_syntax=b:current_syntax
    unlet b:current_syntax
  endif
  syn include @HTMLSyntax syntax/html.vim
  if exists('s:current_syntax')
    let b:current_syntax=s:current_syntax
  endif

  syn region typescriptTemplateString contains=@HTMLSyntax,typescriptTemplateSubstitution
    \ containedin=typescriptTemplate,javascriptTemplate
    \ start=+\%(<\|\w\)\@<!<\z([a-zA-Z][a-zA-Z0-9:\-.]*\)+
    \ skip=+<!--\_.\{-}-->+
    \ end=+</\z1\_\s\{-}>+
    \ end=+/>+
    \ keepend
    \ extend
endfunction


augroup myTypeScriptStuff
    autocmd!
    autocmd FileType typescript call EnableInlineHtmlSyntaxHighlightingForTypescript()
augroup END

Hey @michel 👋 . Did you end up getting it to work. I tried your solution but it breaks with nested elements: