Добрый день!
Сегодня поговорим о полях работы с кодом (JavaScript) и немного о HTML/CSS.
В основе полей типа Script лежит библиотека CodeMirror, превращающая текстовый редактор в некое подобие IDE, с автозаполнением, табуляцией и подсветкой синтаксиса.
Библиотека имеет довольно объемную документацию, но в рамках SimpleOne нас могут заинтересовать горячие клавиши для быстрой и удобной работы.
CTRL + D - подсветит все совпадения переменной, метода да и в целом чего угодно (вплоть до символа) на том месте, где установлен курсор.
Повторные нажатия комбинации клавиш будут выделять следующие совпадения (сверху вниз). Не будут забыты и совпадения, находящие выше от курсора - поиск автоматически перейдет в начало когда, если есть такие совпадения.
ALT + Arrow Up or Arrow Down - перемещение строки, на которой установлен курсор, вверх/вниз
SHIFT + ALT + A - закомментировать/раскомментировать выделенный блок кода
CTRL + / - закомментировать/раскомментировать выделенный блок кода построчно
CTRL + ] or [ - добавить/убрать единицу отступа с выделенного блока кода
С полным списком горячих клавиш можно ознакомиться здесь
А еще на их сайте можно поиграться со всеми настройками CodeMirror, а также поделиться своим кодом с кем угодно.
Надеюсь, что в следующих обновлениях платформы, CodeMirror будет задействован и в написании HTML/CSS.
И, кстати, немного о работе с HTML/CSS
Забавный факт:
Если через контекстное меню показать информацию о содержании HTML поля, вы увидите верстку без стилей
Через <link> вы можете подключать сторонние шрифты или CSS стили
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
При написании CSS стилей можно определять переменные как в классе,
.arrow {
--arrow-size: .3em;
width: var( --arrow-size, .5em);
height: var( --arrow-size, .5em);
}
так и в псевдоклассе :root
:root {
--text-color-primary: #202020;
}
И не забывайте о резервных значениях переменной!