Vim osx html highlights

Question

When I try to edit html file I've strange white highlighted lines.

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

I use vim without vimrc and run "syntax on" after initialize.

Terminal: iTerm2 (same situation in the default terminal)

Version of vim: 8.2.1650

Change colorscheme on air fix this situation, but it isn't solution.

Example of code:

<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

What you're seeing here is Vim is displaying those portions of the buffer in italic. It thinks that text is in italic because it sees an <i> tag but it doesn't ever see the corresponding </i> tag. You actually wrote an <i .../> tag in there, but Vim's HTML syntax highlighting is not prepared to handle that. (And I don't think it really ought to, since there's really no such think as an <i> tag without contents.)

To be able to see what the syntax engine is doing, my recommendation is that you install and enable the vim-scriptease plug-in, which defines a zS mapping to display the syntax groups involved in the current cursor position. If you use it on any of the blank spaces displayed in white, you'll see it will show htmlItalic as the only active group.

You can then look up highlighting of htmlItalic with:

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

You'll see the xxx styled in reverse video, with white background. What is happening here is that terminals (or applications running in terminals) usually need additional configuration to enable support for italic. If that support hasn't been properly enabled and configured (it often isn't out of the box), they will typically fallback to reverse video instead, which is what you're seeing.

You'll notice the issue starts right after the <i .../> tag, so I guess by this point you already suspect it... If you look at the syntax rule matching htmlItalic, you'll see:

: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 

You'll see it matches either a pair of <i> tags or <em> tags. But it always looks for the pair, which is sensible.

What you have will match the "start", but not the "end" of such syntax group:

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

I'd say the real problem here is that this is not HTML! Pretending it is such means you're asking Vim to try to interpret tags incorrectly and that's why you're ultimately ending up with parts of your buffer in reverse video...

My suggestion is that you tell Vim to use a more appropriate format (or at least one with fewer semantics baked in for the tags), so that it doesn't try to interpret things you didn't meant with your tags. It seems to me that XML is at least a bit closer, with fewer or no semantics attached to tags.

You can ask Vim to use XML syntax highlighting on this file by using the following command:

:set ft=xml

This will get rid of the artifacts.

In order to have Vim always detect this file as XML, the best way would be to actually use a .xml extension, assuming that's a possibility. If it's not, there are other ways in which you can get that configured, but your question doesn't have enough details about the file names or other characteristics of the contents to allow me to make a recommendation on how to accomplish that here... If you need to solve that problem next, please ask a separate questions as a follow up.