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

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

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

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

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

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

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

call yarn init

call yarn add -D vuepress
call yarn add -D markdown-it-attrs

pause
1
2
3
4
5
6

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

module.exports = {
    base: "/VuePress/",
    markdown: {
        plugins: {
            'markdown-it-attrs': {}
        }
    }
}
1
2
3
4
5
6
7
8

Маркировка Markdown

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

# Проверим работу

## Новая модель {.red}

С другой стороны новая модель организационной деятельности напрямую зависит от системы масштабного изменения ряда параметров.

## Системный анализ {.blue}

Практический опыт показывает, что консультация с профессионалами из IT требует от нас системного анализа экономической целесообразности принимаемых решений?
1
2
3
4
5
6
7
8
9

Такой код

# header {.style-me}
1

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

<h1 class="style-me">header</h1>
1

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

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

.red {
    color: red;
}

.blue {
    color: blue;
}
1
2
3
4
5
6
7

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

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

Последниее изменение: 03.04.2022, 12:50:42