【问题标题】:How to update Vim to color-code new html elements如何更新 Vim 以对新的 html 元素进行颜色编码
【发布时间】:2016-12-16 01:41:31
【问题描述】:

我想知道如何设置 vim 来为新的 html5 元素(即“canvas”和“video”)着色,就像它对现有的“script”、“body”元素(或其他语言中的保留字,如 python's "def") 等。当前版本来自通常用于终端仿真器的 MacPorts。

【问题讨论】:

    标签: vim html


    【解决方案1】:

    html.vim 是 Vim 用来确定哪些标签将被着色的语法文件。它的位置取决于您安装的 Vim。在这个语法文件中,您会看到许多如下所示的行:

    " new html 4.0 tags
    syn keyword htmlTagName contained abbr acronym bdo button col label
    syn keyword htmlTagName contained colgroup del fieldset iframe ins legend
    syn keyword htmlTagName contained object optgroup q s tbody tfoot thead
    

    这些行定义语法关键字。在这种情况下,它们专门定义 HTML 标记名称。第一行告诉 Vim 为 abbracronymbdobuttoncollabel 标签着色。您可以使用以下语法告诉 Vim 为其他标签着色:

    " new html 5 tags
    syn keyword htmlTagName contained video canvas
    

    Vim 现在将为 videocanvas 标签以及您添加的任何其他关键字着色。

    但是,如果您更新内置 html.vim,它将在您下次更新 Vim 时被覆盖,因此最佳做法是将您的规则附加到这些内置规则中。为此,请在您的 .vim 文件夹中创建文件夹路径 after/syntax,并在其中放置一个 html.vim

    下面@user240515 提到的gist 中有大量的HTML 5 元素和参数。将其内容粘贴到您新创建的html.vim

    更多信息请咨询:help html.vim

    【讨论】:

    • @michaelmichael 谢谢,但对我来说不起作用,我添加了@johan 在他的回答中所说的行,但我没有在<footer> 标签中突出显示......文件夹/文件与常规语法文件中的相同。这里有文件的内容:pastebin.com/cp8qYDze
    • 我从 othree project 下载了 HTML5 的完整语法文件并将其保存到推荐的路径 vimfiles/after/syntax(我在 Windows 上),但这对我也不起作用。但是一旦我把它移到vimfiles/syntax(如预期的那样),它就开始工作了! <main><footer> 等等,一切都色彩斑斓。但我不得不保留原来的名字html.vim。首先,我将它保存为html5.vim,无论出于何种原因,它都不起作用。我不明白为什么接受的答案推荐after/syntax path...
    【解决方案2】:

    感谢您提出这个问题,并感谢您接受的答案!这是为 html 5 添加的新标签的完整列表,因为它们是在撰写本文时定义的:

    " new html 5 tags
    syn keyword htmlTagName contained article aside audio canvas command datalist
    syn keyword htmlTagName contained details embed figcaption figure footer header
    syn keyword htmlTagName contained hgroup keygen mark meter nav output progress
    syn keyword htmlTagName contained rp rt ruby section source summary time video
    

    【讨论】:

      【解决方案3】:

      我正要试试这个:

      http://github.com/othree/html5.vim

      看起来很完整。

      编辑:我没有看到任何关于缩进的信息。 :(

      编辑 [12/23/2012]:我愿意 :) 但也许是后来添加的:https://github.com/othree/html5.vim/tree/master/indent

      【讨论】:

      • 很好,对大量 html5 javascript api 的全能(“onmousewheel”,“ondragstart”)
      • 一种安装方式是:git clone https://github.com/othree/html5.vim,然后转到该目录并执行:make install。它会将所有需要的文件安装到您的 ~/.vim 目录中。大约需要 1 秒。
      【解决方案4】:

      只需将以下文件放入 ~/.vim/syntax:

      http://gist.github.com/390929

      【讨论】:

      • 我在这样做时遇到了麻烦;而是将其重命名为“html.vim”并将其放入 .vim/after/syntax
      【解决方案5】:

      可以使用类似于 michaelmichael 描述的用于扩展html.vim 语法文件的方法来支持缩进。如果您在~/.vim/indent 中还没有html.vim,您可以使用here 找到的内容创建它。在~/.vim/indent/html.vim 中,您会看到一组函数调用组合了一个 HTML 元素名称列表,如下所示:

      " [-- <ELEMENT ? - - ...> --]
      call <SID>HtmlIndentPush('a')
      call <SID>HtmlIndentPush('abbr')
      call <SID>HtmlIndentPush('acronym')
      call <SID>HtmlIndentPush('address')
      " ...and many more...
      

      这些行定义将触发基本标签缩进的标签。使用您希望触发缩进的任何 HTML5 标记扩展此列表。我在此列表的末尾添加了以下内容:

      " New HTML 5 elements
      call<SID>HtmlIndentPush('table')
      call<SID>HtmlIndentPush('article')
      call<SID>HtmlIndentPush('aside')
      call<SID>HtmlIndentPush('audio')
      call<SID>HtmlIndentPush('canvas')
      call<SID>HtmlIndentPush('command')
      call<SID>HtmlIndentPush('datalist')
      call<SID>HtmlIndentPush('details')
      call<SID>HtmlIndentPush('embed')
      call<SID>HtmlIndentPush('figcaption')
      call<SID>HtmlIndentPush('figure')
      call<SID>HtmlIndentPush('footer')
      call<SID>HtmlIndentPush('header')
      call<SID>HtmlIndentPush('hgroup')
      call<SID>HtmlIndentPush('keygen')
      call<SID>HtmlIndentPush('mark')
      call<SID>HtmlIndentPush('meter')
      call<SID>HtmlIndentPush('nav')
      call<SID>HtmlIndentPush('output')
      call<SID>HtmlIndentPush('progress')
      call<SID>HtmlIndentPush('rp')
      call<SID>HtmlIndentPush('rt')
      call<SID>HtmlIndentPush('ruby')
      call<SID>HtmlIndentPush('section')
      call<SID>HtmlIndentPush('source')
      call<SID>HtmlIndentPush('summary')
      call<SID>HtmlIndentPush('time')
      call<SID>HtmlIndentPush('video')
      

      现在将在上面列出的 HTML5 标记上触发缩进。

      【讨论】:

        【解决方案6】:

        根据上面的建议,我在 othree/html5.vim 的 fork 中添加了一个 html5 缩进文件。

        http://github.com/briangershon/html5.vim

        【讨论】:

          【解决方案7】:

          vim (8.0) 附带的syntax/html.vim 文件非常过时了。保持语法高亮更新的一个好方法是使用维护良好的插件,例如 vim-polygot,它会保持最新状态。 html.vim syntax 支持、canvasvideosectionmain(其他答案不支持)等等。

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 2023-03-07
            • 2019-06-14
            • 1970-01-01
            • 1970-01-01
            • 2019-01-04
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多