Списки задач

Для начала работы с библиотекой Marked необходимо установить её через npm:

npm install marked

Подключение в проекте на Node.js осуществляется стандартным способом:

const { marked } = require('marked');

В среде браузера можно использовать CDN:

После этого объект marked готов к использованию для преобразования Markdown в HTML.

Основы синтаксиса списков задач

Списки задач (task lists) в Markdown — это специализированные списки, элементы которых могут иметь состояние выполнения: отмечены или нет. Синтаксис выглядит следующим образом:

- [ ] Не выполнено
- [x] Выполнено

Ключевые моменты:

  • [ ] — элемент не выполнен
  • [x] — элемент выполнен
  • Символ x чувствителен к регистру в некоторых реализациях Markdown, но в Marked допускается как [x], так и [X].

При преобразовании в HTML каждый элемент превращается в

  • с соответствующим чекбоксом .

    Включение поддержки списков задач

    По умолчанию Marked может не рендерить списки задач с чекбоксами. Для их включения используется настройка gfm и breaks:

    marked.setOptions({
  gfm: true,
  breaks: true,
  headerIds: true,
  mangle: false
});
    • gfm (GitHub Flavored Markdown) — включает расширения Markdown, включая списки задач.
    • breaks — управляет переносами строк.
    • headerIds — позволяет автоматически генерировать id для заголовков (не обязательно для списков задач).
    • mangle — отключает автоматическое “склеивание” email-ссылок.

    После этого чекбоксы будут корректно отображаться при генерации HTML.

    Рендеринг списков задач в HTML

    При конвертации Markdown с задачами в HTML Marked генерирует следующий код:

    Markdown:

    - [ ] Купить продукты
- [x] Сделать домашнее задание

    HTML после обработки Marked:

      
  
    •  Купить продукты
      • 
  
    •  Сделать домашнее задание
      •

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

    • disabled добавляется по умолчанию, чтобы чекбоксы не были интерактивными.
    • Для интерактивности необходимо добавить обработку через JavaScript.

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

    Marked позволяет полностью контролировать HTML-вывод с помощью собственного renderer. Например, можно сделать интерактивные чекбоксы:

    const renderer = {
  listitem(text, task, checked) {
    if (task) {
      return `
  •  ${text}
    • \n`;
    } else {
      return `
  • ${text}
    • \n`;
    }
  }
};

marked.use({ renderer });

const markdown = `
- [ ] Выучить JavaScript
- [x] Настроить среду разработки
`;

const html = marked(markdown);
console.log(html);
    • Параметр task сообщает, что элемент списка является задачей.
    • Параметр checked указывает, отмечен ли элемент.

    С помощью такого подхода можно полностью управлять визуальным отображением, стилями и интерактивностью элементов.

    Стилизация списков задач через CSS

    Для придания спискам задач привычного вида GitHub можно использовать CSS:

    ul.task-list {
  list-style: none;
  padding-left: 0;
}

.task-list-item {
  display: flex;
  align-items: center;
  margin: 4px 0;
}

.task-list-item input[type="checkbox"] {
  margin-right: 8px;
}
    • list-style: none убирает стандартные маркеры списка.
    • display: flex выравнивает чекбокс и текст по горизонтали.
    • Отступы улучшают читаемость элементов списка.

    Комбинирование с другими элементами Markdown

    Списки задач могут содержать вложенные элементы Markdown:

    - [ ] Основная задача
  - Подзадача 1
  - Подзадача 2 с **выделением**
- [x] Выполненная задача

    HTML-вывод Marked корректно обрабатывает вложенность:

      
  
    •  Основная задача
    
        
      
      • Подзадача 1
        • 
      
      • Подзадача 2 с выделением
        • 
    
      
  
      • 
  
    •  Выполненная задача
      •
    • Вложенные списки наследуют стили родителя.
    • Выделение, ссылки, код и другие Markdown-элементы остаются корректными.

    Примеры практического применения

    1. Списки задач в документации

      • Создание контрольных списков для шагов установки или инструкции по проекту.

    2. Панели задач в веб-приложениях

      • Использование интерактивных чекбоксов для отслеживания прогресса.

    3. Блокноты и заметки

      • Организация ежедневных дел с визуальной индикацией выполнения.

    Сочетание Marked с кастомным рендерером и CSS позволяет создавать как статические, так и интерактивные списки задач.

    • Оглавление