Рендеринг таблиц

Основы синтаксиса таблиц

Библиотека Marked поддерживает стандартный Markdown-синтаксис для создания таблиц. Таблицы состоят из заголовка, разделителя и строк с данными:

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

  • Вертикальные линии | разделяют колонки.

  • Разделитель --- или :---: между заголовком и данными определяет выравнивание содержимого ячеек.

  • Выравнивание колонок:

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

Конфигурация Marked для таблиц

Marked по умолчанию умеет обрабатывать таблицы, но иногда требуется точная настройка через объект options:

const marked = require('marked');

marked.setOptions({
  gfm: true,       // Включение GitHub Flavored Markdown
  tables: true,    // Поддержка таблиц
});
  • gfm (true) — включает расширенный синтаксис Markdown, необходимый для таблиц.
  • tables (true) — явно активирует парсер таблиц.

Пример рендеринга таблицы

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

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

Результат:

<table>
<thead>
<tr>
<th>Имя</th>
<th style="text-align:right">Возраст</th>
<th style="text-align:center">Город</th>
</tr>
</thead>
<tbody>
<tr>
<td>Иван</td>
<td style="text-align:right">25</td>
<td style="text-align:center">Москва</td>
</tr>
<tr>
<td>Мария</td>
<td style="text-align:right">30</td>
<td style="text-align:center">Санкт-Петербург</td>
</tr>
</tbody>
</table>

Кастомизация рендеринга таблиц

Marked позволяет создавать собственный renderer, чтобы изменять HTML-вывод таблиц:

const renderer = new marked.Renderer();

renderer.table = (header, body) => {
  return `
    <table class="custom-table">
      <thead>${header}</thead>
      <tbody>${body}</tbody>
    </table>
  `;
};

const htmlCustom = marked(markdown, { renderer });
console.log(htmlCustom);
  • header — HTML-содержимое заголовка таблицы
  • body — HTML-содержимое всех строк
  • Можно добавлять CSS-классы, атрибуты data-*, стили inline

Выравнивание ячеек и кастомные стили

Marked автоматически добавляет атрибуты style="text-align:..." для каждой колонки, если используется двоеточие в разделителе. Для более сложного оформления лучше использовать CSS:

.custom-table th {
  background-color: #f2f2f2;
  padding: 8px;
}

.custom-table td {
  padding: 6px;
}

Пример выравнивания через Markdown:

| Левый | Центр | Право |
|:------|:-----:|------:|
| A     | B     | C     |

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

  • Пустые ячейки создаются как <td></td>
  • Для переноса строки внутри ячейки можно использовать <br> или включить HTML внутри Markdown:
| Имя | Примечание |
|-----|------------|
| Иван | Пример строки<br>с переносом |

Особенности парсера таблиц Marked

  1. Таблицы должны иметь минимум три строки: заголовок, разделитель и хотя бы одну строку данных.
  2. Разделитель обязательно должен содержать хотя бы три дефиса (---).
  3. Вертикальные линии в начале и конце строки необязательны, но рекомендуются для читаемости.
  4. Marked игнорирует пустые строки перед или после таблицы.

Интеграция с другими возможностями Markdown

  • В ячейках таблиц можно использовать жирный и курсив, списки, ссылки и даже изображения:
| Продукт | Цена | Ссылка |
|---------|-----:|--------|
| Книга   | 500  | [Купить](#) |
| Ручка   | 50   | ![Ручка](pen.png) |
  • Маркдаун внутри таблицы парсится полностью, что делает таблицы мощным инструментом для презентации структурированных данных.

Программное использование

Marked можно использовать для динамического рендеринга таблиц в приложениях:

const tableData = [
  { name: 'Иван', age: 25, city: 'Москва' },
  { name: 'Мария', age: 30, city: 'Санкт-Петербург' }
];

const markdownTable = [
  '| Имя | Возраст | Город |',
  '|-----|--------:|:-----:|',
  ...tableData.map(item => `| ${item.name} | ${item.age} | ${item.city} |`)
].join('\n');

const htmlTable = marked(markdownTable);
  • Такой подход позволяет динамически строить таблицы из JSON или массивов объектов без ручного написания Markdown.

Вывод

Marked предоставляет гибкие возможности рендеринга таблиц, включая настройку выравнивания, кастомный HTML-вывод через renderer и поддержку Markdown внутри ячеек. Это делает библиотеку идеальной для генерации структурированных данных в веб-приложениях и документации.

Оглавление