Стандартные MD-таблицы в VuePress не поддерживают объединение ячеек. Эту функцию можно добавить плагином markdown-it-multimd-table, он соедержит следующие возможности:
- Объединение ячеек по горизонтали;
- Объединение ячеек по вертикали;
- Разделение ячеек;
- Сложные заголовки у таблиц;
- Пропуск заголовка у таблиц;
- Блочный контент внутри ячеек, такой как списки, код и др.
Рассмотрим установку и работу этого плагина. За основу возьмем HelloWorld проект. Полная версия примера размещена в этом репозитории.
Сначала, включим плагин в скрипт установки 01_CreateProject.bat:
|
1 2 3 4 5 |
call yarn init call yarn add -D vuepress call yarn add -D markdown-it-multimd-table pause |
Затем включим его в config.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
module.exports = { base: "/VuePress/", markdown: { plugins: { 'markdown-it-multimd-table': { multiline: true, rowspan: true, headerless: true } } } } |
Синтаксис таблиц основан на синтаксисе MultiMarkdown.
Попробуем отобразить сложную таблицу
|
1 2 3 4 5 6 7 8 |
| Тема | Примеры || | ^^ | Правильно | Неправильно | | -------------------- | :-----------: | -----------: | |Объявление переменных | ``` | ``` | \ | | var a = 2 | var a, b = 2 | \ | | ``` | ``` || | Наследование | Главное не множественное || [Справочник программиста] |
Результат:
