Метка: VuePress

Объединение ячеек в таблицах VuePress

Стандартные MD-таблицы в VuePress не поддерживают объединение ячеек. Эту функцию можно добавить плагином markdown-it-multimd-table, он соедержит следующие возможности:

  • Объединение ячеек по горизонтали;
  • Объединение ячеек по вертикали;
  • Разделение ячеек;
  • Сложные заголовки у таблиц;
  • Пропуск заголовка у таблиц;
  • Блочный контент внутри ячеек, такой как списки, код и др.

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

Сначала, включим плагин в скрипт установки 01_CreateProject.bat:

Читать далее Объединение ячеек в таблицах VuePress

Плагин VuePress для отображения формул vuepress-plugin-katex

Плагин vuepress-plugin-katex основан на плагине markdown-it-texmath который использует для рендера формул KaTeX (Аналог MathJax).

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

Сначала, включим плагин в скрипт установки 01_CreateProject.bat:

Читать далее Плагин VuePress для отображения формул vuepress-plugin-katex

Добавляем favicon в VuePress

Будем использовать рекомендации из этой статьи по добавлению favicon в современных форматах.

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

При генерации сайта VuePress берет файлы из каталога docs\.vuepress\public. Там мы и будем размещать файлы иконок. Нам нужно 4 файла, разместим их следующим образом:

  • Прямо в каталоге public поместим favicon.ico размером 32x32.
  • В каталоге public\assets\favicons разместим

Читать далее Добавляем favicon в VuePress

Плагины VuePress back-to-top и reading-progress

Рассмотрим установку и работу плагинов plugin-back-to-top и plugin-reading-progress.

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

back-to-top

Плагин добавляет кнопку которая скролит страницу наверх. Кнопка появляется только если страницы прокручена по вертикали.

Для установки добавляем команду в скрипт создания проекта 01_CreateProject.bat:

Читать далее Плагины VuePress back-to-top и reading-progress

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

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

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

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

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

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

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

Размещаем VuePress HelloWold на GitHub Pages

VuePress — генератор статических сайтов. Упрощённо, вы пишите несколько файлов в Markdown, запускаете генератор и эти несколько файлов преобразуются в страницы сайта. Причем сайт не требует хостинга с возможностью выполнения скриптов, достаточно отображения статических файлов.

Рассмотрим HelloWold от установки всех приложений до деплоя сайта на GitHub Pages. Полный текст примера находится в репозитории.

Читать далее Размещаем VuePress HelloWold на GitHub Pages