html - 在 Vim 中正确突出显示 html 属性？

Question

当我在 Vim 中寻找合适的 html 标记突出显示时，我发现了这个 post .但是在查看了 romainl 的答案(和他的屏幕截图)和 html 语法文件之后，我想知道如何在不更改 html 标记颜色的情况下更改属性后 =(等号)的颜色以匹配属性的颜色？

Answer 1

1. 探索

   这是我在某个地方(很久以前，可能在 Vim Wiki 上)找到的一个非常有用的函数，它可以为您提供光标下的单词/符号的语法组:

   function! SynStack()
       if !exists("*synstack")
           return
       endif
       echo map(synstack(line('.'), col('.')), 'synIDattr(v:val, "name")')
   endfunc
   

   只需将光标放在要检查的项目上并输入 :call SynStack()在命令行中回显语法组。

   如果我将光标放在 = 上在 <div id="example"></div> , SynStack() 的输出是['htmlTag'] .

   光标在 <> 上我得到 ['htmlTag']

   光标在 div 上我得到 ['htmlTag', 'htmlTagN', 'htmlTagName']这意味着 div 的颜色( h1 , p …) 是通过一个名为 htmlTagName 的特殊语法组定义的继承自 htmlTag .

   一些替代/自定义语法文件可能会定义名称略有不同的其他语法组，因此我的示例仅对我有效。你必须玩SynStack()获得正确的语法组。

2. 反射(reflection)

   根据我们目前收集到的信息，很明显标签名称 ( ['htmlTagName'] ) 可以独立于标签的其余部分设置样式，但突出显示 = 似乎不可行不同的。因为它与 <> 属于同一语法组, =将有必要以相同的方式突出显示。

   我们有两种可能性:

   一个。 < , =和 > div 颜色相同是不同的。

   < , div , =和 >都是一样的颜色。

   原始主题遵循路径 a我不喜欢，所以我不得不用我对上一个问题的回答中的几行对其进行一些自定义(路径 b):

   hi htmlTag            guifg=#90b0d1 gui=NONE 
   hi htmlSpecialTagName guifg=#90b0d1 gui=NONE 
   hi htmlTagName        guifg=#90b0d1 gui=NONE  
   hi htmlEndTag         guifg=#90b0d1 gui=NONE
   

   事实上，拥有 =颜色不同于 <>不可能。如果我们想给 = 上色我们将编辑 HTML 语法文件和您的配色方案，牛仔风格。

3. 行动

   第一步是制作默认 HTMl 语法文件的本地副本:

   $ cp /usr/share/vim/vim73/syntax/html.vim ~/.vim/syntax/html.vim
   

   下一步是编辑这个文件。我们将执行两项更改:

   1. 添加 htmlEqualSign 的定义语法组

      第 44 行应该是(注意!未经过彻底测试。):

      syn match htmlEqualSign contained "="
      

   2. 添加 htmlEqualSign到 htmlTag组

      ~/.vim/syntax/html.vim 的第 40 行应更改为:

      syn region htmlTag start=+<[^/]+ end=+>+ contains=htmlTagN,htmlString,htmlArg,htmlValue,htmlTagError,htmlEvent,htmlCssDefinition,@htmlPreproc,@htmlArgCluster
      

      到:

      syn region htmlTag start=+<[^/]+ end=+>+ contains=htmlTagN,htmlString,htmlArg,htmlValue,htmlTagError,htmlEvent,htmlCssDefinition,@htmlPreproc,@htmlArgCluster,htmlEqualSign
      

   最后一步是编辑您的配色方案，使其为 = 着色你想要的方式。您可以通过在您的配色方案中的某处添加此行来做到这一点:

   hi htmlEqualSign guifg=#00ff00
   

   当然是您选择的颜色。

   但我认为你想要=与 id 颜色相同(你的问题不是很清楚)。为此，我们将“链接”htmlEqualSign。分组到用于属性的那个。同样，:call SynStack()有很大帮助:属性的语法组是 htmlArg所以要添加到您的配色方案的行是:

   hi link htmlEqualSign htmlArg