Блог

Когда я пытаюсь отредактировать HTML-файл, у меня появляются странные белые выделенные строки.

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

Я использую vim без vimrc и запускаю «синтаксис включен» после инициализации.

Терминал: iTerm2 (та же ситуация в терминале по умолчанию)

Версия vim: 8.2.1650

Изменение цветовой схемы в 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>  

Здесь вы видите, что Vim отображает эти части буфера курсивом. Он считает, что текст выделен курсивом, потому что он видит <i> тег, но он никогда не видит соответствующий </i> тег. На самом деле вы написали там <i .../> тег, но подсветка синтаксиса HTML в Vim не готова для этого. (И я не думаю, что это действительно должно быть, поскольку на самом деле нет такого понятия, как <i> тег без содержимого.)

Чтобы иметь возможность видеть, что делает синтаксический движок, я рекомендую установить и включить подключаемый модуль vim-scriptease, который определяет zS сопоставление для отображения синтаксических групп, задействованных в текущей позиции курсора. Если вы используете его для любого из пробелов, выделенных белым цветом, вы увидите, что он будет отображаться htmlItalic как единственная активная группа.

Затем вы можете просмотреть выделение htmlItalic с помощью:

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

Вы увидите xxx видео, оформленное в обратном порядке, на белом фоне. Здесь происходит то, что терминалам (или приложениям, работающим в терминалах) обычно требуется дополнительная настройка для включения поддержки курсива. Если эта поддержка не была должным образом включена и настроена (часто это не из коробки), они, как правило, возвращаются к обратному видео, что вы и видите.

Вы заметите, что проблема начинается сразу после <i .../> тега, так что, я думаю, к этому моменту вы уже подозреваете это… Если вы посмотрите на соответствие правил синтаксиса 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> тегов, либо <em> тэгам. Но он всегда ищет пару, что разумно.

То, что у вас есть, будет соответствовать «началу», но не «концу» такой синтаксической группы:

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

Я бы сказал, что настоящая проблема здесь в том, что это не HTML! Притворство, что это так, означает, что вы просите Vim попытаться неправильно интерпретировать теги, и именно поэтому вы в конечном итоге получаете части вашего буфера в обратном видео…

Я предлагаю, чтобы вы сказали Vim использовать более подходящий формат (или, по крайней мере, один с меньшим количеством семантики, встроенной в теги), чтобы он не пытался интерпретировать то, что вы не имели в виду в своих тегах. Мне кажется, что XML, по крайней мере, немного ближе, с меньшим количеством семантики, привязанной к тегам, или вообще без нее.

Вы можете попросить Vim использовать подсветку синтаксиса XML для этого файла с помощью следующей команды:

 :set ft=xml
  

Это позволит избавиться от артефактов.

Чтобы Vim всегда определял этот файл как XML, лучшим способом было бы фактически использовать .xml расширение, предполагая, что это возможно. Если это не так, есть другие способы, которыми вы можете настроить это, но в вашем вопросе недостаточно подробных сведений об именах файлов или других характеристиках содержимого, чтобы я мог дать рекомендацию о том, как это сделать здесь… Если вам нужно решить эту проблему в следующий раз, пожалуйста, задайте отдельные вопросы в качестве продолжения.