Особенности GFM

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

Таблицы

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

Пример таблицы:

| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|------------|:-----------:|------------:|
| Левый      | Центр       | Правый     |
| Текст      | Текст       | Текст      |

  • Выравнивание текста:

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

В Marked таблицы обрабатываются через парсер, который распознаёт строки и делит их на ячейки по символу |. Выравнивание задаётся через двоеточия в строке с разделителями.

Задачи и чекбоксы

GFM поддерживает синтаксис чекбоксов, что позволяет создавать списки с задачами:

- [ ] Незавершённая задача
- [x] Завершённая задача

При рендеринге в HTML - [ ] преобразуется в с атрибутом checked, если задача выполнена. В Marked это реализовано через опцию gfm: true и правильную обработку списков, что делает возможным интеграцию таких списков в веб-приложения.

Автоматическая обработка ссылок

GFM поддерживает авто-ссылки, когда URL автоматически преобразуется в кликабельную ссылку без необходимости использовать стандартный синтаксис [текст](URL):

https://example.com

Marked распознаёт такие строки и преобразует их в HTML-тег https://example.com. Важно включить опцию gfm: true для активации этой функциональности.

Строки с переносом

В стандартном Markdown для переноса строки требуется два пробела в конце строки. GFM упрощает этот процесс — каждый перевод строки в исходном тексте интерпретируется как
при рендеринге в HTML:

Первая строка
Вторая строка

Будет преобразовано в:

Первая строка

Вторая строка

Опция breaks: true в Marked активирует этот режим.

Расширенные списки

GFM позволяет использовать вложенные списки с различными маркерами (-, *, +) и поддерживает нумерованные списки с произвольной нумерацией:

1. Первый пункт
2. Второй пункт
1. Снова первый

Marked корректно обрабатывает смешанные типы списков и вложенность, создавая правильную структуру

    и
      .

      Настройка Marked под GFM

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

      import { marked } from 'marked';

marked.setOptions({
  gfm: true,
  tables: true,
  breaks: true,
  smartLists: true,
  smartypants: false
});

const html = marked('# Заголовок\n\n- [ ] Задача');
      • gfm — включает общий режим GitHub Flavored Markdown
      • tables — активирует поддержку таблиц
      • breaks — включает обработку переносов строк как
      • smartLists — улучшает распознавание списков
      • smartypants — управляет заменой кавычек и тире на типографские символы

      Эти настройки обеспечивают максимальное соответствие Markdown на GitHub при работе с библиотекой Marked.

      Расширения и кастомизация

      Marked позволяет создавать собственные рендереры для блоков GFM, включая таблицы, списки и задачи. Использование кастомного рендерера позволяет полностью контролировать HTML-вывод и интеграцию с CSS и JavaScript.

      Пример кастомного рендерера для чекбоксов:

      const renderer = {
  listitem(text, task, checked) {
    if (task) {
      return `
    1.  ${text}
      2. `;
    } else {
      return `
    2. ${text}
      3. `;
    }
  }
};

marked.use({ renderer });

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

Оглавление