Рассмотрим задачу выделения отдельных заголовков разными цветами. Разобьём задачу на две: сначала добавим к определенным заголовкам специальные CSS-классы, а затем добавим стили для этих классов.
За основу возьмем HelloWorld проект из прошлого поста. Полная версия примера размещена в этом репозитории.
Установка плагина markdown-it-attrs
Плагин markdown-it-attrs позволяет добавить атрибуты для любого блока разметки.
Для установки плагина дополним 01_CreateProject.bat новой командой
|
1 2 3 4 5 6 |
call yarn init call yarn add -D vuepress call yarn add -D markdown-it-attrs pause |
Затем добавим плагин в config.js:
|
1 2 3 4 5 6 7 8 |
module.exports = { base: "/VuePress/", markdown: { plugins: { 'markdown-it-attrs': {} } } } |
Маркировка Markdown
Теперь укажем внутри Readme.md несколько свойств.
|
1 2 3 4 5 6 7 8 9 |
# Проверим работу ## Новая модель {.red} С другой стороны новая модель организационной деятельности напрямую зависит от системы масштабного изменения ряда параметров. ## Системный анализ {.blue} Практический опыт показывает, что консультация с профессионалами из IT требует от нас системного анализа экономической целесообразности принимаемых решений? |
Такой код
|
1 |
# header {.style-me} |
Преобразуется в
|
1 |
<h1 class="style-me">header</h1> |
Добавление стиля
Для того чтобы добавить к сайту новый стиль создадим файл docs\.vuepress\styles\index.styl:
|
1 2 3 4 5 6 7 |
.red { color: red; } .blue { color: blue; } |
Проверим результат:
