Как включить подсветку объекта HTML в коде VS?

На странице VS Code UserVoice появился запрос, чтобы добавить предложения и выделения для объектов HTML, таких как &. Microsoft поместила это как дополнение комментария с сообщением "Эта функция была реализована в Visual Studio 2013 для документов HTML и Razor". Я предполагаю, что это означает, что он был реализован в VS 2013, но не VS Code.

Предполагая, что правильно, как я могу добавить выделение для этих элементов в HTML-документы? Кажется, они правильно выделяют документы XML. Глядя на синтаксисы /html.plist, похоже, что он должен захватывать объекты HTML, поэтому я бы предположил, что тема будет соответствующим образом окрашивать их, но я действительно не понимаю, как это работает на бэкэнд.

Мои вопросы:

  • Должен ли VS-код выделять эти элементы?

  • Если нет, могу ли я изменить файл синтаксиса HTML или файл темы, чтобы он сделал это? Если да, то как мне это сделать?

Здесь html.plist(который по умолчанию установлен по умолчанию):

<key>entities</key>
        <dict>
            <key>patterns</key>
            <array>
                <dict>
                    <key>captures</key>
                    <dict>
                        <key>1</key>
                        <dict>
                            <key>name</key>
                            <string>punctuation.definition.entity.html</string>
                        </dict>
                        <key>3</key>
                        <dict>
                            <key>name</key>
                            <string>punctuation.definition.entity.html</string>
                        </dict>
                    </dict>
                    <key>match</key>
                    <string>(&amp;)([a-zA-Z0-9]+|#[0-9]+|#x[0-9a-fA-F]+)(;)</string>
                    <key>name</key>
                    <string>constant.character.entity.html</string>
                </dict>
                <dict>
                    <key>match</key>
                    <string>&amp;</string>
                    <key>name</key>
                    <string>invalid.illegal.bad-ampersand.html</string>
                </dict>

--- EDIT ---

Вот несколько скриншотов, чтобы прояснить, что я имею в виду (оба взяты с той же темой):

xml doc с подсветкой

html без выделения

XML.plist выглядит довольно похоже на HTML.plist, когда дело доходит до этих объектов, но я не буду добавлять XML.plist к этому уже длинному вопросу, если у кого-то нет собственной копии и не хочет, чтобы я это сделал.

Ответы

Ответ 1

Вы можете сделать это с помощью расширений

Вы можете добавить новые файлы темы TextMate (.tmTheme) в свою установку кода VS с помощью генератора расширения VS Code Yeoman, yo code. Генератор расширений принимает существующий файл темы TextMate и упаковывает его для использования в VS Code.

В ColorSublime есть сотни существующих тем TextMate на выбор. Выберите понравившуюся тему и скопируйте ссылку "Скачать", чтобы использовать ее в генераторе "Йомен". Он будет в формате "http://colorsublime.com/theme/download/(number)". Генератор "code" предложит вам указать URL-адрес или местоположение файла .tmTheme, имя темы и другую информацию, связанную с темой.

Скопируйте папку сгенерированной темы в новую папку в папке .vscode/extensions и перезапустите код VS.

Откройте тему выбора темы "Цвет темы" с помощью "Файл" > "Настройки" > "Цветная тема", и вы можете увидеть свою тему в раскрывающемся меню. Стрелка вверх и вниз, чтобы просмотреть предварительный просмотр вашей темы.

Вы можете сами создать тему

Вы также можете создавать собственные темы TextMate с нуля. Подробные сведения см. В документации по документам именования грамматики TextMate.

Помимо стандартных областей грамматики языка TextMate, VS Code также имеет настраиваемые параметры темы, которые вы можете использовать для настройки вашей собственной темы:

rangeHighlight: выделен цвет фона выделенного диапазона, например, функции быстрого открытия и поиска.

selectionHighlight: цвет фона выделенных регионов при выборе.

inactiveSelection: цвет фона для выбора, если он не находится в фокусе.

wordHighlight: Цвет фона символа во время чтения, например, чтение переменной.

wordHighlightStrong: Цвет фона символа во время записи, например запись в переменную.

findMatchHighlight: Цвет фона регионов, соответствующих поиску. currentFindMatchHighlight: цвет фона текущей области, соответствующей поиску.

findRangeHighlight: Цвет фона регионов, выбранных для поиска.

linkForeground: Цвет ссылок.

activeLinkForeground: Цвет активных ссылок.

hoverHighlight: цвет фона при наведении курсора.

referenceHighlight: Цвет фона ссылки при поиске всех ссылок.

guide: Цвет направляющих, отображаемых для указания уровней вложенности.

Здесь вы можете найти пример темы VS Code, который включает пользовательские настройки.

Создание темы довольно сложно, поскольку все грамматики ведут себя по-другому. Попытайтесь следовать соглашениям TextMate и избегать языковых правил в вашей теме, поскольку грамматики также могут быть заменены расширениями.