Таблицы в GFM

GitHub Flavored Markdown (GFM) расширяет стандартный Markdown, добавляя поддержку таблиц, что позволяет структурировать данные в виде строк и столбцов. В библиотеке Marked для JavaScript таблицы обрабатываются через встроенный парсер, который распознаёт синтаксис GFM и преобразует его в HTML-элементы

, , , , .

Пробелы в начале и конце ячеек удаляются, но можно сохранить их через или использовать нестандартное форматирование с HTML.

Наличие лишних вертикальных черт в конце строки игнорируется, что делает синтаксис более гибким.

Поддержка многострочных ячеек

GFM и Marked стандартно не поддерживают перенос текста через строки внутри одной ячейки. Для многострочных данных рекомендуется использовать или форматировать таблицу через HTML:

| Имя   | Описание |
|-------|----------|
| Иван  | Разработчик
JavaScript |

Примечания по совместимости

Таблицы в GFM требуют обязательной строки-разделителя между заголовком и телом таблицы.
Marked корректно интерпретирует таблицы только в режиме gfm: true.
Любой Markdown внутри ячеек (курсив, ссылки, выделение) будет обработан как обычно, при условии, что renderer не переопределяет рендеринг ячеек.

Оптимизация больших таблиц

Для больших таблиц рекомендуется отключать генерацию headerIds или mangle, если ссылки на заголовки не нужны, чтобы ускорить парсинг.
Можно использовать ленивую загрузку таблиц на стороне фронтенда, если HTML генерируется для большого объема данных, чтобы не перегружать DOM.

Интеграция с CSS

HTML, сгенерированный Marked, легко стилизовать через CSS. Например:

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
}

th {
  background-color: #f0f0f0;
  text-align: left;
}

Это позволяет создавать визуально читаемые таблицы, сохраняя совместимость с синтаксисом GFM.

Синтаксис таблиц

Основной синтаксис таблиц в GFM выглядит следующим образом:

| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|------------|------------|------------|
| Ячейка 1  | Ячейка 2  | Ячейка 3  |
| Ячейка 4  | Ячейка 5  | Ячейка 6  |

Каждая строка таблицы начинается и заканчивается вертикальной чертой |.
Первая строка задаёт заголовки столбцов.
Вторая строка с дефисами - определяет разделение заголовков и тела таблицы.
Ячейки тела таблицы отделяются вертикальной чертой, количество дефисов в строке-разделителе может быть произвольным.

Выравнивание столбцов задается с помощью двоеточий:

| Левый | Центр | Правый |
|:------|:-----:|------:|
| a     | b     | c     |

:--- — выравнивание по левому краю
:---: — выравнивание по центру
---: — выравнивание по правому краю

Преобразование таблиц с Marked

Для работы с таблицами необходимо убедиться, что при инициализации парсера включён режим GFM:

import { marked } from 'marked';

marked.setOptions({
  gfm: true,
  breaks: false,
  headerIds: true,
  mangle: false
});

После этого функция marked.parse корректно обработает таблицы:

const markdown = `
| Имя   | Возраст | Город      |
|-------|:-------:|-----------:|
| Иван  |   25    | Москва     |
| Ольга |   30    | Санкт-Петербург |
`;

const html = marked.parse(markdown);
console.log(html);

Результат будет следующим HTML:


  
    
      Имя
      Возраст
      Город
    
  
  
    
      Иван
      25
      Москва
    
    
      Ольга
      30
      Санкт-Петербург

Кастомизация вывода таблиц

Marked позволяет переопределять рендеринг таблиц с помощью собственного рендерера. Для этого создается объект Renderer и определяется метод table:

import { marked, Renderer } from 'marked';

const renderer = new Renderer();

renderer.table = function(header, body) {
  return `${header}${body}
    
    
  `;
};

const html = marked.parse(markdown, { renderer });
console.log(html);

Это позволяет добавлять дополнительные классы, оборачивать таблицы в контейнеры, применять собственные стили.

Обработка пустых ячеек и пробелов

Пустые ячейки автоматически превращаются в пустые