search

yuezk / vim-js

💯The most accurate syntax highlighting plugin for JavaScript and Flow.js
MIT License
140 stars 8 forks source link

Highlights in `<script type="text/x-template">` don't become HTML #1

Closed tamago324 closed 4 years ago

tamago324 commented 4 years ago

Thank you for a great plugin.

The highlight when the <script> tag type is text/x-template is not as expected. In the above case, I want to highlight HTML instead of JavaScript.

Is this fixable?

image

> gvim.exe -u min_vimrc sample.html

min_vimrc

set encoding=utf-8
scriptencoding utf-8

syntax enable
filetype plugin indent on

set nocompatible

call plug#begin('~/vimfiles/plugged')

Plug 'othree/html5.vim'
Plug 'yuezk/vim-js'

call plug#end()

sample.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>fruits-list</h1> 
    <script type="text/x-template" id="fruits-list">
      <h1>fruits-list</h1>
    </script>
  </body>
</html>
yuezk commented 4 years ago

I see, will take a look later.

tamago324 commented 4 years ago

Thanks!

yuezk commented 4 years ago

@tamago324 This is an issue from the built-in html.vim syntax file. It didn't distinct the normal script tag from the script tag with a non-standard type.

The workaround for this issue should be something like this:

augroup ft_html
    au!
    autocmd FileType html :syn region htmlTemplate matchgroup=htmlScriptTag start=+<script type="text/x-template"\_[^>]*>+ keepend end=+</script\_[^>]*>+ contains=@htmlTop
augroup END

You can add it to your vimrc. And it will be highlighted as below. DeepinScreenshot_select-area_20191216223734

Note that the content inside the script tag can be highlighted well, but the script itself is not well highlighted.

tamago324 commented 4 years ago

Thank you for explaining carefully!

A deeper understanding of syntax highlight. I don't understand matchgroup yet, but I'll investigate more.

Thank you very much!