VuePress добавление кастомных стилей

Рассмотрим задачу выделения отдельных заголовков разными цветами. Разобьём задачу на две: сначала добавим к определенным заголовкам специальные CSS-классы, а затем добавим стили для этих классов.

За основу возьмем HelloWorld проект из прошлого поста. Полная версия примера размещена в этом репозитории.

Установка плагина markdown-it-attrs

Плагин markdown-it-attrs позволяет добавить атрибуты для любого блока разметки.

Для установки плагина дополним 01_CreateProject.bat новой командой

Затем добавим плагин в config.js:

Маркировка Markdown

Теперь укажем внутри Readme.md несколько свойств.

Такой код

Преобразуется в

Добавление стиля

Для того чтобы добавить к сайту новый стиль создадим файл docs\.vuepress\styles\index.styl:

Проверим результат:

Разный цвет заголовков

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *