Way23
Главная
По категориям
Контакты
Главная
По категориям
Контакты

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

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

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

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

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

call yarn init
call yarn add -D vuepress
call yarn add -D markdown-it-multimd-table

pause

Затем включим его в config.js:

module.exports = {
  base: "/VuePress/",
  markdown: {
      plugins: {
         'markdown-it-multimd-table': {
              multiline:  true,
              rowspan:    true,
              headerless: true
            }
        }
    }
}

Синтаксис таблиц основан на синтаксисе MultiMarkdown.

Попробуем отобразить сложную таблицу

| Тема                 |          Примеры            ||
| ^^                   |   Правильно   | Неправильно  |
| -------------------- | :-----------: | -----------: |
|Объявление переменных | ```          | ```           | \
|                      | var a = 2    | var a, b = 2  | \
|                      | ```          | ```           ||
| Наследование         | Главное не множественное     ||
[Справочник программиста]        

Результат:

Сложная таблица в VuePress

Последниее изменение: 14.04.2025, 09:01