Vim OSX HTML高亮

如何解决Vim OSX HTML高亮

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

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

我使用不带vimrc的vim，并在初始化后运行“ syntax on”。

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

vim版本：8.2.10650

通过空中更改颜色方案可以解决这种情况，但这不是解决方案。

代码示例：

<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>

解决方法

您在这里看到的是Vim在斜体中显示缓冲区的那些部分。它认为文本是斜体的，因为它看到了标签，但是却从未看到相应的标签。您实际上在那里写了一个标记，但是Vim的HTML语法高亮显示并没有准备好处理它。（而且我不认为这是应该的，因为实际上没有这样的想法标签没有内容。）

为了能够查看语法引擎的功能，我的建议是安装并启用vim-scriptease插件，该插件定义一个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使用一种更合适的格式（或至少使用一种带有较少语义的标签格式），以便它不会尝试解释您不是用标签来表达的意思。在我看来，XML至少更接近一点，标签附加的语义很少或没有。

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

:set ft=xml

这将消除工件。

为了使Vim始终将此文件检测为XML，最好的方法是实际使用.xml扩展名，前提是有可能。如果不是这样，您可以通过其他方法进行配置，但是您的问题没有足够的有关文件名或内容其他特征的详细信息，无法让我对如何完成此操作提出建议。。如果您接下来需要解决该问题，请作为一个后续问题再问一个问题。

如何解决Vim OSX HTML高亮

解决方法

相关推荐