Включение режима GFM

Marked — это мощная и гибкая библиотека для преобразования Markdown в HTML. Одной из ключевых возможностей является поддержка расширенного синтаксиса GitHub Flavored Markdown (GFM). GFM добавляет ряд удобных элементов, таких как таблицы, списки задач и автоматическое преобразование URL в ссылки.

Активация режима GFM

Для использования GFM в Marked необходимо настроить объект опций при инициализации. Основной параметр, отвечающий за включение GFM, называется gfm.

import { marked } from 'marked';

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

const markdown = `
# Пример GFM

- [x] Выполнено
- [ ] В процессе

| Заголовок 1 | Заголовок 2 |
| ----------- | ----------- |
| Ячейка 1    | Ячейка 2    |
`;

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

В этом примере:

  • gfm: true включает поддержку GFM.
  • Таблицы создаются с использованием синтаксиса | и ---.
  • Списки задач обозначаются [ ] и [x].

Дополнительные возможности GFM

1. Таблицы

GFM поддерживает выравнивание текста в ячейках таблицы с помощью двоеточий:

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

Результат будет выглядеть следующим образом в HTML:

<table>
  <thead>
    <tr>
      <th style="text-align:left">Левый</th>
      <th style="text-align:center">Центр</th>
      <th style="text-align:right">Правый</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="text-align:left">A</td>
      <td style="text-align:center">B</td>
      <td style="text-align:right">C</td>
    </tr>
  </tbody>
</table>

2. Списки задач

Списки задач позволяют создавать интерактивный вид выполнения задач:

- [x] Завершено
- [ ] В процессе

При конвертации в HTML элементы получают атрибут checked и соответствующие классы для стилизации.

3. Автоматическое преобразование URL

При включении GFM простые URL автоматически превращаются в кликабельные ссылки:

https://example.com

Становится:

<a href="https://example.com">https://example.com</a>

Настройка дополнительных параметров вместе с GFM

  • breaks: при значении true одинарный перенос строки превращается в <br>.
  • headerIds: автоматически добавляет идентификаторы к заголовкам, чтобы их можно было использовать в ссылках.
  • mangle: отключает автоматическое экранирование email-адресов.

Пример расширенной конфигурации:

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

Пользовательские рендереры с GFM

Marked позволяет создавать собственные рендереры для элементов GFM. Например, можно изменить способ отображения таблиц или списков задач:

const renderer = {
  table(header, body) {
    return `<table class="custom-table"><thead>${header}</thead><tbody>${body}</tbody></table>`;
  },
  listitem(text) {
    if (text.startsWith('[ ]')) {
      return `<li class="task">${text.slice(3)}</li>`;
    }
    if (text.startsWith('[x]')) {
      return `<li class="task completed">${text.slice(3)}</li>`;
    }
    return `<li>${text}</li>`;
  }
};

marked.use({ renderer });

Это позволяет полностью контролировать вывод HTML, сохраняя преимущества расширенного синтаксиса GFM.

Заключение по применению GFM

Включение GFM в Marked существенно расширяет возможности работы с Markdown, добавляя поддержку таблиц, списков задач и автоматических ссылок. Использование настроек и кастомных рендереров позволяет интегрировать Markdown в проекты с точным соответствием стилю и требованиям интерфейса.

Хотите, я могу написать подробный раздел с примерами всех нюансов работы с таблицами и задачами GFM, включая стили и кастомные обработчики?

Оглавление