Vim osx html 亮点

Question

当我尝试编辑 html 文件时，出现奇怪的白色突出显示行。

https://i.gyazo.com/105987df80e63785f1f2361bc052961b.png

我在初始化后使用 vim 没有 vimrc 和运行 “syntax on”。

终端：iTerm2（默认终端情况相同）

vim 版本：8.2.1650

改变 colorscheme on air 修复了这种情况，但这不是解决方案。

代码示例：

<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <el-card>
          <div
            slot="header"
            class="clearfix"
          >
            <span> {{ $t('suppliers.h1') }} </span>
          </div>
          <el-table
            :data="suppliers"
            border
            fit
          >
            <el-table-column
              :label="$t('table.nameColumn')"
              prop="name"
              align="center"
              width="150"
            >
              <template slot-scope="{row}">
                <span>{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('table.syncColumn')"
              prop="name"
              align="center"
            >
              <template slot-scope="{row}">
                <span> <i :class="row.sync ? 'el-icon-check' : 'el-icon-close'" /> </span>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('table.daysLimitColumn')"
              prop="name"
              align="center"
            >
              <template slot-scope="{row}">
                <span> {{ row.daysLimit }} </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              align="center"
            >
              <template>
                <span> <i class="el-icon-delete" /></span>
              </template>
            </el-table-column>
          </el-table>
          <br>
          <el-form>
            <el-button type="success">
              {{ $t('suppliers.addButton') }}
            </el-button>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

Answer 1

您在这里看到的是 Vim 以斜体显示缓冲区的那些部分。它认为文本是斜体的，因为它看到了一个  标签，但它从来没有看到相应的  标签。你实际上在那里写了一个  标签，但是 Vim 的 HTML 语法突出显示不准备处理它。（而且我认为它真的不应该，因为没有内容的  标签真的不存在。）

为了能够看到语法引擎在做什么，我的建议是安装并启用 vim-scriptease plug-in，它定义了一个 zS 映射来显示语法当前光标位置涉及的组。如果您在任何以白色显示的空白处使用它，您会看到它将 htmlItalic 显示为唯一的活动组。

然后您可以通过以下方式查找 htmlItalic 的突出显示：

:hi htmlItalic
htmlItalic     xxx term=italic cterm=italic
                   gui=italic

您会看到 xxx 的样式为反向视频，背景为白色。这里发生的是终端（或终端中的应用程序运行）通常需要额外的配置来启用对斜体的支持。如果没有正确启用和配置该支持（它通常不是开箱即用的），它们通常会回退到反转视频，这就是您所看到的。

你会注意到问题是在  标记之后开始的，所以我想你已经怀疑了这一点......如果你查看匹配 htmlItalic 的语法规则，你会看到：

:syn list htmlItalic
--- Syntax items ---
htmlItalic     xxx start=/<i\>/ end=+</i\_s*>+me=s-1  contains=@htmlTop,htmlItalicBold,htmlItalicUnderline 
                   start=/<em\>/ end=+</em\_s*>+me=s-1  contains=@htmlTop

您会看到它与一对  标签或  标签匹配。但它总是寻找对，这是明智的。

你所拥有的将匹配这种语法组的“开始”，而不是“结束”：

<i :class="row.sync ? 'el-icon-check' : 'el-icon-close'" />

我想说这里真正的问题是这不是HTML！假装是这样意味着您要求 Vim 尝试错误地解释标签，这就是为什么您最终会在反向视频中得到部分缓冲区...

我的建议是您告诉 Vim 使用更合适的格式（或者至少使用一种为标签嵌入较少语义的格式），这样它就不会尝试解释您没有解释的内容' t 意味着你的标签。在我看来 XML 至少更接近一点，标签的语义更少或没有。

您可以要求 Vim 使用以下命令在此文件上使用 XML 语法高亮显示：

:set ft=xml

这将消除工件。

为了让 Vim 始终将此文件检测为 XML，最好的方法是实际使用 .xml 扩展名，假设这是可能的。如果不是，还有其他方法可以配置该配置，但您的问题没有足够的关于文件名或内容的其他特征的详细信息，因此我无法就如何在此处完成该操作提出建议。 .如果你接下来需要解决那个问题，请单独提问作为跟进。

Vim osx html 亮点

Vim osx html highlights

html

macos

vim