Возвышенный текст без выделения кода

Обновлено: 21.11.2024

DigitalOcean объединяет усилия с CSS-Tricks! Специальное приветственное предложение: получите бесплатный кредит в размере 100 долларов США.

Когда я работал над проектом, в котором требовался компонент редактора для исходного кода, мне очень хотелось, чтобы этот редактор выделял вводимый синтаксис. Есть такие проекты, как CodeMirror, Ace и Monaco, но все они представляют собой тяжелые полнофункциональные редакторы, а не просто редактируемые текстовые области с подсветкой синтаксиса, как я хотел.

Пришлось немного повозиться, но в итоге я сделал нечто, что делает свою работу, и хотел поделиться тем, как я это сделал, потому что это включает в себя интеграцию популярной библиотеки подсветки синтаксиса с возможностями редактирования HTML, а также несколько интересных пограничных случаев. принять во внимание.

Давай, попробуй, пока мы копаем!

По предложению я также разместил его в качестве пользовательского элемента на GitHub, чтобы вы могли быстро использовать этот компонент на веб-странице как отдельный элемент.

Сначала я попытался использовать атрибут contenteditable для элемента div. Я набрал исходный код в div и пропустил его через Prism.js, популярную подсветку синтаксиса, oninput через JavaScript. Кажется, неплохая идея, правда? У нас есть элемент, который можно редактировать во внешнем интерфейсе, и Prism.js применяет стиль синтаксиса к тому, что вводится в элементе.

В этом видео Крис рассказывает, как использовать Prism.js.

Но это было невозможно. Каждый раз, когда содержимое элемента изменяется, DOM манипулируется, и курсор пользователя перемещается обратно к началу кода, что означает, что исходный код отображается задом наперед, с последними символами в начале и первыми символами в конце.

Затем я попытался использовать

Теперь, когда текстовое поле редактируется — например, нажатая клавиша на клавиатуре возвращается — код с подсветкой синтаксиса изменяется. Есть несколько ошибок, к которым мы еще вернемся, но сначала я хочу сосредоточиться на том, чтобы выглядело так, будто вы редактируете непосредственно элемент с выделенным синтаксисом, а не отдельную текстовую область.

Сделайте его похожим на редактор кода

Идея состоит в том, чтобы визуально объединить элементы, чтобы казалось, что мы взаимодействуем с одним элементом, когда на самом деле работают два элемента. Мы можем добавить немного CSS, который позволяет

Некоторые браузеры также позволяют изменять размер текстовой области, но это означает, что текстовая область и результат могут иметь разные размеры. Может ли CSS исправить это? Конечно, может. Мы просто отключим изменение размера:

Спасибо этому комментарию за указание на эту ошибку.

Теперь прокрутка почти всегда синхронизирована, но есть еще один случай, когда она все еще не работает. Когда пользователь создает новую строку, курсор и текст текстовой области временно находятся в неправильном положении, прежде чем какой-либо текст будет введен в новую строку. Это потому, что

Одним из самых сложных моментов настройки является обработка отступов строк в результатах. При текущей настройке редактора отступы строк с пробелами работают нормально. Но если вам больше нравятся табуляции, чем пробелы, вы могли заметить, что они не работают должным образом.

JavaScript можно использовать для корректной работы клавиши Tab. Я добавил комментарии, чтобы было понятно, что происходит в функции.

Чтобы убедиться, что символы табуляции имеют одинаковый размер в обоих

Моя функция выделения добавляет … в элемент pre, а иногда и наложение не очень хорошо (без промежутков она работает хорошо, но у меня больше нет выделения). У вас есть идея решить мою проблему? Я предполагаю, что это также иногда появляется в вашем решении.

Мне нравится, как вы используете CSS Grid для наложения элементов. Однако я не совсем понимаю проблему, которую вы обнаружили. Я думаю, что это может быть связано с моим ответом Томасу, но если это не так, уточните суть проблемы, и я отвечу как можно скорее.

Попробуйте печатать, пока не активируется переполнение div, и вы увидите первую проблему, которую вы проигнорировали.

для горизонтальной прокрутки. Я добавил это в сообщение, а также прикрепил фрагмент кода ниже:

Выделить все копии выбранного слова.

Эта фиксация не принадлежит ни к одной из веток в этом репозитории и может принадлежать ответвлению за пределами репозитория.

Последняя фиксация

Статистика Git

Файлы

Не удалось загрузить последнюю информацию о коммите.

README.markdown

Этот подключаемый модуль выделяет все копии слова, которое в данный момент выбрано, или, при желании, выделяет все копии слова, над которым в данный момент находится курсор вставки.

Кроме того, вы можете выделить все эти слова, выделенные с помощью ALT + ENTER , или также можете добавить к выделению эти слова одно за другим, аналогично CTRL + D .

Проще всего установить с помощью Package Control. Убедитесь, что у вас установлена последняя версия, перейдя по этой ссылке, затем откройте палитру команд, введите «Установить пакет» и выполните поиск «WordHighLight».

Кроме того, для установки вручную перейдите в подкаталог Packages в каталоге данных ST, где X — версия ST:

Windows: %APPDATA%\Sublime Text X
OS X: ~/Library/Application Support/Sublime Text X
Linux: ~/.config/sublime-text-X
Портативная установка: Sublime Text X/Data

Затем клонируйте этот репозиторий:

В подкаталоге Packages/WordHighlight отредактируйте файл Word Highlight.sublime-settings:

Это приводит к тому, что блики отображаются как контуры, а не как закрашенные блики.

Если это произойдет, значки будут использоваться для обозначения всех вхождений выбранных слов на полосе поля. Для настройки значков полезно использовать свойство "icon_type_on_gutter".

Обычно существует 4 допустимых типа: точка, круг, закладка и крест. Если вам нужно больше, загляните в папку «Тема — по умолчанию» в разделе «Пакеты» Sublime Text (это можно сделать через меню «Настройки > Обзор пакетов»).

При этом слова выделяются, когда точка вставки находится внутри них, но на самом деле они не выделены.

Когда включена предыдущая опция, это выделяет слово под курсором

Это задерживает выделение всех вхождений с использованием заданного времени (в миллисекундах), чтобы пользователи могли перемещать курсор, не отвлекаясь на немедленные выделения. Значение по умолчанию 0 означает почти полное отсутствие задержки.

Этот параметр позволяет выбрать, хотите ли вы, чтобы в строке состояния отображалось количество вхождений выделенного слова. Если вы смешаете это с "highlight_word_under_cursor_when_selection_is_empty": false, количество вхождений не будет учитывать слово, на котором находится ваш курсор.

Обычно цвет выделения совпадает с цветом комментариев в вашем коде. Если вы хотите настроить цвет, добавьте приведенный ниже файл цветовой схемы .tmTheme и измените EDF2E9 на любой цвет, который вы хотите, затем измените color_scope_name на имя области в добавленном вами блоке. Если вы хотите указать цвет фона, раскомментируйте фоновую часть в приведенном ниже примере и установите для «draw_outlined» значение «false»).

Обратите внимание, что некоторые другие подключаемые модули, такие как Color Hightlighter и SublimeLinter, копируют вашу тему tmTheme и добавляют свои собственные модификации, и если вы используете подключаемый модуль, который делает это, ваши изменения в файле .tmTheme могут не отражаться в пользовательском интерфейсе. немедленно.

Файлы большего размера, чем это число, переведут WordHighlight в режим "выделения вокруг окна просмотра" (часть документа)

Когда размер файла превышает предыдущую настройку. Это определяет, сколько символов ниже и выше области просмотра вы хотите найти для слов, чтобы выделить

По умолчанию он предоставляет клавишу ALT + ENTER для выбора всех слов, выделенных этим пакетом (вы можете выделить несколько слов, а затем выбрать все экземпляры)

У него также есть две функции без определенной раскладки клавиш, чтобы имитировать CTRL + D и CTRL + K , CTRL + D . Вы можете использовать альтернативы, добавив (после настройки) следующее в файл раскладки ( Packages/User/Default (Windows).sublime-keymap ):

Выделение цветом управляющих кодов ANSI для SublimeText 3

Последняя фиксация

Статистика Git

Файлы

Не удалось загрузить последнюю информацию о коммите.

README.md

Выделение цветом управляющих кодов ANSI для ST3

Время от времени в редакторе появляется файл с управляющими кодами ANSI в виде обычного текста, что очень затрудняет чтение содержимого. То, что было добавлено, чтобы облегчить вашу жизнь, стоит на вашем пути и очень раздражает.

Этот плагин решает эту надоедливую проблему. Не просто удалив escape-коды ANSI, но вернув в эти файлы цветную подсветку.

Вы можете установить через Sublime Package Control
Или вы можете клонировать этот репозиторий в каталог SublimeText Packages и переименовать его в ANSIescape

Когда вы видите мусор в своем редакторе, измените синтаксис на ANSI, и все готово!

Подключаемый модуль обнаруживает событие изменения синтаксиса и помечает области цветных символов ANSI соответствующими областями, соответствующими стилю, определенному в файле tmTheme.

Использование этого плагина в качестве зависимости для панели вывода вашего плагина/сборки

Если вы пишете плагин, который создает что-то с помощью команды оболочки и показывает результаты на панели вывода, используйте этот плагин! Не удаляйте коды ANSI, просто установите файл синтаксиса вашего вывода в Packages/ANSIescape/ANSI.sublime-syntax, и ANSI позаботится о выделении цветом вашего вывода терминала.

Аналогичным образом, если вы хотите отображать цвета ANSI в существующих выходных данных команды сборки, вам нужно будет только установить ansi_color_build в качестве цели и Packages/ANSIescape/ANSI.sublime-syntax в качестве синтаксиса; например:

Если вы используете пользовательский скрипт сборки, а подпрограммы не выводят цвет, возможно, они предполагают, что вывод не имеет цветов. В Linux некоторые приложения можно заставить использовать цвета, установив переменную среды CLICOLOR_FORCE=1. Не рекомендуется устанавливать его постоянно, так как это может вызвать проблемы, если цвет не поддерживается, а приложения по-прежнему выводят цвет. Но в сборке SublimeANSI вы можете использовать его для использования в сценарии сборки Makefile, например:

Завершение процесса сборки

Если вы хотите остановить процесс сборки во время выполнения, используйте эту команду в возвышенной консоли ( ctrl+` ):

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

Форматирование кодов ANSI в процессе сборки

Для форматирования кодов ANSI во время процесса сборки измените 'ANSI_process_trigger' в ansi.sublime-settings .

Настройка цветов ANSI

Все цвета, используемые для выделения escape-кода ANSI, можно настроить с помощью ansi.sublime-settings . Создайте файл с именем ansi.sublime-settings в своем пользовательском каталоге, скопируйте содержимое настроек по умолчанию и измените их на свое усмотрение.

Представления ANSI доступны только для чтения. Но вы можете вернуться к обычному тексту, чтобы отредактировать их, если хотите.
Не выделяет ANSI полужирным шрифтом, хотя мы это поддерживаем. Для элементов, выделенных жирным шрифтом, можно назначить уникальный цвет переднего плана, чтобы отличать их от остального содержимого.
Не поддерживает атрибуты dim, underscore, blink, reverse и hidden text, и это нормально, поскольку они также не поддерживаются многими терминалами и используются довольно редко.

Не удалось вставить скопированное сообщение сборки в новое представление буфера

Просто сделайте новое представление непустым, чтобы синтаксис не устанавливался автоматически. Например, введите новую строку перед вставкой.

Примечание. В ветке master находится реализация на основе tmLanguage, которая распространяется на файлы сборки Sublime Text *.vue в лингвисте.

Новую реализацию синтаксиса, которая распространяется для сборки >=3153, см. в новой ветке.

Подсветка синтаксиса Sublime Text для однофайловых компонентов Vue.js (включается vue-loader или vueify).

Через Package Control: найдите Vue Syntax Highlight .
Вручную: клонируйте этот репозиторий в папку Sublime Packages.

Дополнительные требования к установке. Чтобы получить правильную подсветку синтаксиса для препроцессоров (например, Jade, SASS, CoffeeScript), вам также потребуется установить соответствующие пакеты для каждого из них.

Включение подсветки JSX

26. Оператор распространения нарушает синтаксис

Пожалуйста, смотрите прикрепленное изображение. Похоже, что оператор Spread нарушает синтаксис внутри блока методов.

Если вы не исправляете код для Sublime Dev Builds, вы можете закрыть это.

PS, только что понял, что оставил ошибку (двойное определение метода), но это не нарушение. Мне пришлось отключить eslint, потому что в прошлые дни он тоже сильно глючил.

27. Отсутствует зависимость?

Похоже, последние изменения используют пакет YAMLMacros?

В MacOS 10.13.4 и Sublime 3175 (и 3.3.0 этого пакета).

При установке или перезапуске:

28. Синтаксис в `` не может выделяться

Я установил подсветку синтаксиса Vue, и синтаксис может нормально подсвечиваться. Но он не может работать в . Не могли бы вы сказать мне, как с этим справиться? thx

30. Обработка нескольких встраиваний в возвышенном

(Открытие вопроса для обсуждения)

В ближайшие 3 недели моя доступность будет ограничена, поэтому я хочу вернуться к старому подходу. Теперь у нас есть два варианта, хотелось бы получить ваши отзывы @yyx990803

Вариант 1. Продолжайте использовать этот подход и подождите, пока sublime исправит эту проблему.
Вариант 2. Переделайте некоторые части синтаксиса, используя альтернативный подход, который, как известно, не вызывает проблем.

@Thom1729 был бы признателен за ваше мнение по этому поводу. Я думаю, что мы можем использовать embed/extension для тегов script и CSS, но для этого, я думаю, мы должны использовать push/with_prototype для директив.

31. [ST4] Множество исправлений и улучшений.

Этот PR применяет дальнейшие исправления и улучшения в отношении правильных метаобластей, обработки закрывающих тегов и приводит общую структуру синтаксиса в соответствие с основным HTML.sublime-syntax ST.

Подробнее об отдельных изменениях см. в сообщениях о фиксации.

32. исправить: использовать синтаксис комментариев HTML Living Standard

В настоящее время двойные дефисы ( -- ) внутри комментариев не допускаются при подсветке синтаксиса лингвиста. Однако парсер разрешает их без каких-либо предупреждений.

Спецификация SFC говорит "использовать синтаксис комментариев HTML", но определение синтаксиса комментариев HTML немного двусмысленно. HTML Living Standard позволяет использовать внутри двойные дефисы, однако, в отличие от HTML 4.01 и прошлое запрещают это. Текущая версия vue-syntax-highlight, похоже, относится к последней спецификации, но фактическая реализация синтаксического анализатора соответствует первой спецификации.

Это изменение настраивает определения vue-syntax-highlight в соответствии с поведением компилятора/парсера/html-парсера vue.

33. Синтаксические тесты

34. Поддержка стилевых компонентов

35. Лучшее сокращение v-on '@'

Поддержка сокращения v-on с обработчиками событий, содержащими двоеточие (например, @hook:mounted="onChildMounted" )

36. V-on '@' ошибка раскрашивания стенографии

При использовании сокращения v-on '@' с событием, которое имеет двоеточие, цвет будет неправильным.

37. Добавление подсветки синтаксиса для тегов шаблона с `lang="haml"`

Добавление подсветки синтаксиса для тегов шаблона с lang="haml"

Жду отзывов по этому поводу, так как я новичок в .sublime-syntax и не являюсь экспертом по регулярным выражениям.

39. [Функция] Поддержка блоков Gridsome GraphQL

Мне бы хотелось, чтобы средство форматирования и подсветка синтаксиса для синтаксиса Vue включали блоки запросов Gridsome GraphQL, такие как:

В настоящее время форматирование или подсветка синтаксиса недоступны для файлов .vue, в которых используются эти блоки. Будет ли это достойным рассмотрения для этого пакета?

Ссылка

Пример

Результат

Я был бы рад помочь и отправить PR, и приведенный выше YAML является результатом того, что я потратил пару часов на изучение того, как работает .sublime-syntax, и на сборку нескольких вещей, но я беспокоюсь, что этот код не работает. недостаточно хорош, так как содержит жестко закодированный путь к внешнему пакету.

Вопрос: как я могу ссылаться на внешний возвышенный синтаксис, не используя жестко закодированные ссылки, подобные этой? Кто-нибудь может немного помочь привести это в состояние готовности к PR?

40. Атрибут Lang, установленный на scss, выдает ошибку linting

При открытии тега стиля каждого компонента, если присутствует lang="css", я получаю следующую ошибку linting: sass: error error - Не удается прочитать свойство 'toString' из undefined. (фатальный)

Удаление атрибута lang или установка для него значения css устраняет ошибку linting

Моя информация: OSX 10.15.3 SublimeText 3.2.2 Vue Syntax Highlight 3.3.6 node-sass 4.12.0

Читайте также: