在Vim中正确的HTML属性高亮显示？ [英] Proper html attribute highlighting in Vim?

问题描述

当我在Vim中寻找适当的html标记时，我发现这个文章。但在查看romainl的答案（和他的截图）和html语法文件之后，我想知道如何在属性之后更改=（等号）的颜色以匹配属性的颜色而不更改html标签的颜色？

解决方案

1. 探索 $ b

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

    函数！ （'*'），$（$'$'）
    
    if if！exists（* synstack）
   返回
    endif 
   回声图（synstack 'synIDattr（v：val，name）'）
    endfunc 
     

   光标放在要检查的项目上并键入：调用SynStack（）以在命令行中回显语法组。

   
   
   

   如果我将光标放在< div id =example>< / div> = c $ c>， SynStack（）的输出是 ['htmlTag'] 。

   
   
   

   当光标位于<> 时，我得到 ['htmlTag']
   $ b 当光标位于 div 时，我得到 ['htmlTag'，' htmlTagN'，'htmlTagName'] ，这意味着 div （ h1 ，通过一个名为 htmlTagName 的特殊语法组定义了 p ...），它继承自 htmlTag code>。

   
   
   

   一些替代/ cu stom语法文件可能会定义其他语法组，其名称略有不同，所以我的示例仅适用于我。您必须使用 SynStack（）来获取正确的语法组。

> Reflexion




使用我们迄今收集的信息，很明显，标签名称（ ['htmlTagName']] code>）可以独立于标签的其余部分进行样式设计，但似乎不能以不同的方式突出显示 = 。因为它是与<> 相同语法组的一部分，所以 = 必须突出显示。



我们有两种可能性：



a。 < ， = 和> 是相同的颜色而 div 是不同的。





b。 < ， div ， = 和<$ c $





原始主题遵循路径 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语法文件和你的colorscheme，cowboy style。

>


2. 动作
   
   

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

     $ cp /usr/share/vim/vim73/syntax/html.vim〜/。 vim / syntax / html.vim 
     

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

   
   

   1. 添加 htmlEqualSign 语法组

      
      
      

      第44行应该是（注意！未经彻底测试）：
      
      

        syn match htmlEqualSign contains=
        

   
   

   2. add <$ c $ htmlTag group

      
      
      

      第40行〜/ .vim / syntax / html.vim 应改为：
      
      

        syn region htmlTag start = +< [^ /] + end = +> + contains = htmlTagN，htmlString，htmlArg，htmlValue，htmlTagError，htmlEvent，htmlCssDefinition，@ htmlPreproc，@ htmlArgCluster 
        pre> 
       
       
      到： 
       
       
        syn区域htmlTag start = +< [^ /] + end = +> + contains = htmlTagN，htmlString，htmlArg，htmlValue，htmlTagError，htmlEvent，htmlCssDefinition，@ htmlPreproc，@ htmlArgCluster，htmlEqualSign 
        
       

   
   

   最后一步是编辑您的colo rscheme，以便按照你想要的方式着色 = 。你可以在你的colorscheme的某处添加这一行：



     hi htmlEqualSign guifg =＃00ff00 
     

   当然有您选择的颜色。

   
   
   

   但我认为你想让 = 与 id 相同（这个问题在你的问题中不是很清楚）。为此，我们要将 htmlEqualSign 组链接到用于属性的组。同样，：调用SynStack（）非常有帮助：属性的语法组是 htmlArg ，所以要添加的行到你的colorscheme将是：
   
   pre $ hi $ link $ html $ p>







While I was looking for proper html tag highlighting in Vim, I found this post. But after looking at romainl's answer (and his screenshot) and html syntax file, I wonder how can I change color of = (equal sign) after attribute to match the color of an attribute without changing html tag's color?

解决方案

1. Exploration

   Here is a very useful function I've found somewhere (a long time ago, probably on the Vim Wiki) that gives you the syntax group of the word/symbol under your cursor:

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

   Just place your cursor on the item you want to inspect and type :call SynStack() to echo the syntax group in the command-line.

   If I place my cursor on the = in <div id="example"></div>, the output of SynStack() is ['htmlTag'].

   With the cursor on <> I get ['htmlTag'] as well.

   With the cursor on div I get ['htmlTag', 'htmlTagN', 'htmlTagName'] which means that the color of div (h1, p…) is defined via a special syntax group called htmlTagName that inherits from htmlTag.

   Some alternative/custom syntax files may define other syntax groups with slightly varying name so my example is only valid for me. You'll have to play with SynStack() to get the correct syntax groups.

2. Reflexion

   With the info we have gathered so far, it's obvious that the tag name (['htmlTagName']) can be styled independtly from the rest of the tag but it doesn't seem doable to highlight the = differently. Because it is part of the same syntax group as <>, the = will necessarilly be highlighted the same.

   We have 2 possibilities:

   a. <, = and > are the same colour while div is different.

   b. <, div, = and > are all the same colour.

   The original theme followed path a which I didn't like, so I had to customize it a little (path b) with the few lines in my answer to the previous question:

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

   As it is, having the = coloured differently than <> is not possible. If we want to colorize the = we are going to edit the HTML syntax file and your colorscheme, cowboy style.

3. Action

   The first step is to make a local copy of the default HTMl syntax file:

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

   The next step is to edit this file. We are going to perform two changes:

   1. add the definition of the htmlEqualSign syntax group

      Line 44 should be (Attention! Not thoroughly tested.):

      syn match htmlEqualSign contained "="
      

   2. add htmlEqualSign to the htmlTag group

      Line 40 of ~/.vim/syntax/html.vim should be changed from:

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

      to:

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

   The last step is to edit your colorscheme so that it colorizes = the way you want. You do that by adding this line somewhere in your colorscheme:

   hi htmlEqualSign guifg=#00ff00
   

   With the color of your choice, of course.

   But I think that you want = to be the same color as id (that's not very clear from your question). For that, we are going to "link" the htmlEqualSign group to the one being used for attributes. Again, :call SynStack() is of great help: the syntax group for attributes is htmlArg so the line to add to your colorscheme would be:

   hi link htmlEqualSign htmlArg
   

这篇关于在Vim中正确的HTML属性高亮显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！