Представляем темы
Начните использовать любую тему VSCode прямо в CodeSandbox
Индивидуальная настройка цветовых схем - одна из самых важных вещей, которые необходимо иметь в приложении. Он используется не только как способ стилизовать под личные предпочтения, он также очень важен для обеспечения доступности.
У CodeSandbox не было возможности персонализировать цвета в редакторе с момента выпуска, но я рад сообщить, что это есть сейчас. Самое приятное то, что мы смогли повторно использовать большую часть логики из VSCode напрямую, и, таким образом, мы поддерживаем любую тему VSCode изначально в CodeSandbox!
Сначала я выделю наши предустановленные темы и шрифты, затем объясню, как установить вашу собственную тему VSCode, и закончу объяснением того, как она работает (предупреждение о спойлере: WebAssembly).
Предустановленные темы и шрифты
Мы сделали набор тем VSCode, которые, по нашему мнению, важно предустановить. На самом деле мы по-прежнему загружаем их по запросу, но вы можете легко выбрать одну из этих тем, не открывая VSCode. Если у вас есть предложение по предустановленной теме, не стесняйтесь открывать вопрос!
CodeSandbox (новая подсветка синтаксиса)
Ночная сова Сары Драснер
Atom One Dark Махмуд Али
Atom One Light Махмуд Али
VSCode Light от Microsoft
Dank Mono (шрифт), автор Phil Plückthun
Теперь мы также включаем Dank Mono в качестве предустановленного шрифта по умолчанию. Это замечательный шрифт, созданный Филом Плюктуном. Он поддерживает курсив и лигатуры шрифтов (вы можете включить их в настройках). Он объясняет здесь, какой выбор дизайна стоит за Dank Mono.
Вы можете выбирать между шрифтами «Dank Mono», «Menlo» и «Source Code Pro». У вас также есть возможность установить любой шрифт, который вы установили локально.
Установка собственной темы
Вот несколько простых шагов, чтобы переместить вашу собственную тему VSCode в CodeSandbox, описанные здесь:
- Открыть VSCode
- Нажмите (CMD / CTRL) + Shift + P
- Введите «Разработчик: создать цветовую тему из текущих настроек».
- Скопируйте содержимое
- Вставьте их в настройки CodeSandbox
Вот GIF-изображение копирования темы:
Как это работает
CodeSandbox уже почти год использует Монако в качестве основного редактора кода. Monaco - это основная часть редактора (часть, в которой вы пишете код) VSCode, и команда, стоящая за VSCode, была настолько замечательной, что заставила эту часть работать напрямую в браузере.
Однако подсветка синтаксиса VSCode использует .tmLanguage (от TextMate) для токенизации всего кода. А для синтаксического анализа .tmLanguage требуется библиотека C под названием Oniguruma для синтаксического анализа и выполнения регулярных выражений, которые имеют определенный синтаксис. Вот почему команда VSCode добавила в версию браузера другой токенизатор под названием Monarch. Этот токенизатор не полностью совместим с темами VSCode, что затрудняет их прямой перенос.
Однако прошел год, и WebAssembly набирает обороты. Мы выяснили, что выпущена библиотека под названием Onigasm (получи, OnigurumaASM ?!), это скомпилированная WebAssembly-версия Oniguruma с поддержкой 1: 1. Вскоре после этого я узнал, что тот же автор (!), NeekSandhu, также опубликовал monaco-editor-textmate, который позволяет токенизировать .tmLanguage файлы для Монако!
Этой информации было достаточно, чтобы темы VSCode поддерживались непосредственно в редакторе CodeSandbox через токенизатор tmLanguage. Единственное, что нам нужно было добавить, - это сопоставление остальной части пользовательского интерфейса с цветами VSCode. Мы используем styled-components для стилизации, поэтому нужно было поместить стили VSCode в ThemeProvider и изменить стиль всех элементов один за другим.
Другие особенности
Мы также обновили наш редактор Monaco до последней версии (мы использовали v8, которой исполнился год). Благодаря этому мы теперь получаем правильную поддержку клавиатуры для iPad в редакторе. Я также переписал логику в самом редакторе, которая теперь дает:
- Более надежный CodeSandbox Live, ошибок должно быть меньше
- Больше производительности в самом редакторе и при переключении файлов (я использовал трюк, описанный здесь)
- Автозаполнение для операторов импорта (я узнал об этом здесь)
- Меньше ошибок при переключении файлов
Спасибо
Я хочу выразить огромную благодарность Саре Виейре, она пришла с идеей сделать это, когда мы ехали в Брайтон, и она очень помогла в создании и отладке этой функции. 10 👍 для нее!
