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