Панель предпросмотра Markdown в MarkNode можно оформлять с помощью различных тем. Выберите один из встроенных вариантов, позвольте предпросмотру автоматически следовать теме приложения или напишите собственный CSS, чтобы соответствовать площадке, на которой будут опубликованы ваши документы.
Следование теме приложения
По умолчанию для предпросмотра задан режим Как в приложении: используется встроенный стиль, сочетающийся с текущей темой приложения, поэтому переключение с Paper на Midnight (или на любую другую тему) одним действием перекрашивает предпросмотр в тон. Вам вообще не нужно выбирать тему предпросмотра, если только вы не хотите оформление, отличное от остального приложения.
Встроенные темы
MarkNode поставляется с набором встроенных тем предпросмотра, доступных каждому пользователю. Они доступны только для чтения и не могут быть изменены, но вы всегда можете скопировать любую из них как отправную точку для собственной темы. Помимо стилей, сочетающихся с каждой темой приложения (Paper, Midnight, Sepia, Nord, Solarized Dark, High Contrast), есть варианты оформления под конкретные площадки и настроения, например:
- GitHub Light и GitHub Dark — отображение в стиле GitHub для документации
- Solarized Light и Solarized Dark — палитры Solarized
- Serif — центрированная колонка с засечками для длинных текстов
- Compact — более плотная вёрстка для насыщенных справочных материалов
- Academic, Newsprint, Dracula и другие
Встроенные темы берут базовые цвета фона, текста, ссылок и границ из вашей активной темы приложения, поэтому они хорошо выглядят и в светлом, и в тёмном оформлении без каких-либо дополнительных настроек. (Есть также внутренний стиль Default, лежащий в основе режима Как в приложении; в меню вы выбираете именно Как в приложении, а не Default напрямую.)
Чтобы сменить тему, нажмите кнопку стиля предпросмотра в заголовке панели предпросмотра либо щёлкните правой кнопкой мыши в любом месте предпросмотра и воспользуйтесь списком стилей. Выберите Как в приложении, чтобы снова следовать теме приложения, или выберите конкретный стиль, чтобы закрепить его. Изменение немедленно применяется ко всем поверхностям предпросмотра — как к закреплённому предпросмотру рядом с редактором, так и к любым откреплённым окнам предпросмотра — и сохраняется между сеансами.
Создание собственной темы
В меню стилей предпросмотра выберите Новый стиль на основе текущего…, чтобы создать собственную тему на основе активной в данный момент:
- Введите имя новой темы. Имена не могут совпадать с именами встроенных тем.
- Откроется редактор CSS с предзаполненным исходным кодом — отредактируйте его по своему вкусу.
По мере ввода предпросмотр перерисовывается в реальном времени. CSS хранится в памяти до сохранения, поэтому вы можете свободно экспериментировать; если передумаете, закройте редактор, чтобы отменить изменения.
Чтобы отредактировать уже созданную собственную тему, выберите её и в том же меню выберите Изменить текущий стиль….
Сохранение и обмен
Когда вы сохраняете собственную тему, она помещается в вашу глобальную библиотеку тем, поэтому доступна во всех проектах на этом компьютере. Вы также можете отметить Сохранить копию в текущем проекте, чтобы записать её в проект — тогда тема будет перемещаться вместе с проектом. Если вы добавите проект в Git, каждый участник, клонирующий репозиторий, увидит такой же предпросмотр.
Когда вы открываете проект, содержащий собственную тему предпросмотра, которой у вас ещё нет, эта тема появляется в вашем списке стилей на всё время, пока проект открыт.
Что можно оформить с помощью собственного CSS
Собственный CSS ограничен контейнером предпросмотра (.markdown-preview), поэтому он не влияет на редактор, боковую панель и любые другие части MarkNode. Вы можете оформлять:
- Шрифты и размеры основного текста
- Заголовки, списки, цитаты и таблицы
- Блоки кода, встроенный код и цвета подсветки синтаксиса
- Отступы, поля и максимальную ширину содержимого
Если вы хотите, чтобы ваша собственная тема автоматически адаптировалась к светлому и тёмному оформлению так же, как встроенные, начните с дублирования встроенной темы — ваша копия унаследует эту адаптивную основу, и вы сможете доработать её.
Глубокая перестройка DOM невозможна, поскольку CSS изменяет только визуальное представление, но не лежащий в основе HTML.
Удаление собственной темы
Выберите собственную тему и воспользуйтесь действием удаления в меню стилей. Сначала появится запрос на подтверждение. Если удаляемая тема была активной, MarkNode вернётся к встроенной теме по умолчанию. У встроенных тем действия удаления нет, и удалить их нельзя.