Skip to main content
Wraps the Marked.js library with custom renderers for enhanced markdown parsing.

​
Overview

This utility configures Marked.js with a custom renderer for task list items, ensuring proper HTML structure for checkbox lists.

​
Import

import { marked } from '@lib/marked';

​
Functions

​
marked.parse()

Parses markdown text and converts it to HTML using the configured custom renderers.
​
markdown
string
required
The markdown text to parse
​
options
MarkedOptions
Optional configuration object for parsing behavior
​
html
string
The rendered HTML output

​
Custom Renderers

​
Task List Renderer

The custom listitem renderer handles task list items with proper label wrapping: 
const renderer = {
  listitem(text: string, task: boolean, _checked: boolean) {
    if (task && text.includes("<label>")) {
      return (
        "<li class='task-list-item'><label>" +
        text.replace("<label>", "") +
        "</li>"
      );
    }
    return false;
  },
};
Behavior:
  • Detects task list items (checkboxes)
  • Wraps content in <li class='task-list-item'>
  • Ensures <label> tag is properly positioned
  • Returns false for non-task list items (uses default renderer)

​
Usage Example

import { marked } from '@lib/marked';

const markdown = `
# Hello World

- [ ] Todo item
- [x] Completed item

Regular **markdown** content.
`;

const html = marked.parse(markdown);
  • Used in: src/lib/notion-parse.ts for converting Notion blocks to HTML
  • Source: src/lib/marked.ts:1

Build docs developers (and LLMs) love

Get started for freeTalk to us