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

Объединение ячеек в таблицах 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

Затем включим его в 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

Синтаксис таблиц основан на синтаксисе MultiMarkdownopen in new window.

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

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

Результат:

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

Последниее изменение: 13.09.2021, 14:02:47