BuildDocsReferenceGuidesBlog
Discord logo
Discord
GitHub logo
Frender
Bun

function

markdown.render

function render(
input: string | ArrayBufferLike | TypedArray<ArrayBufferLike> | DataView<ArrayBuffer>,
callbacks?: RenderCallbacks,
options?: Options
): string;

Render markdown with custom JavaScript callbacks for each element.

Each callback receives the accumulated children as a string and optional metadata, and returns a string. Return null or undefined to omit an element. If no callback is registered, children pass through unchanged.

Parser options are passed as a separate third argument.

@param input

The markdown string to render

@param callbacks

Callbacks for each element type

@param options

Parser options

@returns

The accumulated string output

// Custom HTML with classes
const html = Bun.markdown.render("# Title\n\nHello **world**", {
  heading: (children, { level }) => `<h${level} class="title">${children}</h${level}>`,
  paragraph: (children) => `<p>${children}</p>`,
  strong: (children) => `<b>${children}</b>`,
});

// ANSI terminal output
const ansi = Bun.markdown.render("# Hello\n\n**bold**", {
  heading: (children) => `\x1b[1;4m${children}\x1b[0m\n`,
  paragraph: (children) => children + "\n",
  strong: (children) => `\x1b[1m${children}\x1b[22m`,
});

// With parser options as third argument
const text = Bun.markdown.render("Visit www.example.com", {
  link: (children, { href }) => `[${children}](${href})`,
  paragraph: (children) => children,
}, { autolinks: true });

Referenced types

class ArrayBuffer

Represents a raw buffer of binary data, which is used to store data for the different typed arrays. ArrayBuffers cannot be read from or written to directly, but can be passed to a typed array or DataView Object to interpret the raw buffer as needed.

  • readonly [Symbol.toStringTag]: string
  • readonly byteLength: number

    Read-only. The length of the ArrayBuffer (in bytes).

  • newByteLength?: number
    ): void;

    Resizes the ArrayBuffer to the specified size (in bytes).

    MDN

    byteLength: number

    Resize an ArrayBuffer in-place.

  • begin: number,
    end?: number

    Returns a section of an ArrayBuffer.

  • newByteLength?: number

    Creates a new ArrayBuffer with the same byte content as this buffer, then detaches this buffer.

    MDN

  • newByteLength?: number

    Creates a new non-resizable ArrayBuffer with the same byte content as this buffer, then detaches this buffer.

    MDN

interface RenderCallbacks

  • blockquote?: (children: string) => undefined | null | string

    Blockquote.

  • code?: (children: string, meta?: CodeBlockMeta) => undefined | null | string

    Code block. meta.language is the info-string (e.g. "js"). Only passed for fenced code blocks with a language.

  • codespan?: (children: string) => undefined | null | string

    Inline code (`code`).

  • emphasis?: (children: string) => undefined | null | string

    Emphasis (*text*).

  • heading?: (children: string, meta: HeadingMeta) => undefined | null | string

    Heading (level 1–6). id is set when headings: { ids: true } is enabled.

  • hr?: (children: string) => undefined | null | string

    Horizontal rule.

  • html?: (children: string) => undefined | null | string

    Raw HTML content.

  • image?: (children: string, meta: ImageMeta) => undefined | null | string

    Image. src is the URL, title is the optional title attribute.

  • list?: (children: string, meta: ListMeta) => undefined | null | string

    Ordered or unordered list. start is the first item number for ordered lists.

  • listItem?: (children: string, meta?: ListItemMeta) => undefined | null | string

    List item. meta.checked is set for task list items (- [x] / - [ ]). Only passed for task list items.

  • paragraph?: (children: string) => undefined | null | string

    Paragraph.

  • strikethrough?: (children: string) => undefined | null | string

    Strikethrough (~~text~~).

  • strong?: (children: string) => undefined | null | string

    Strong emphasis (**text**).

  • table?: (children: string) => undefined | null | string

    Table.

  • tbody?: (children: string) => undefined | null | string

    Table body.

  • td?: (children: string, meta?: CellMeta) => undefined | null | string

    Table data cell. meta.align is set when column alignment is specified.

  • text?: (text: string) => undefined | null | string

    Plain text content.

  • th?: (children: string, meta?: CellMeta) => undefined | null | string

    Table header cell. meta.align is set when column alignment is specified.

  • thead?: (children: string) => undefined | null | string

    Table head.

  • tr?: (children: string) => undefined | null | string

    Table row.

interface Options

Options for configuring the markdown parser.

By default, GFM extensions (tables, strikethrough, task lists) are enabled.

  • collapseWhitespace?: boolean

    Collapse whitespace in text content. Default: false.

  • hardSoftBreaks?: boolean

    Treat soft line breaks as hard line breaks. Default: false.

  • headings?: boolean | { autolink: boolean; ids: boolean }

    Configure heading IDs and autolink headings. Pass true to enable both heading IDs and autolink headings, or an object to configure individually.

    // Enable both heading IDs and autolink headings
{ headings: true }
// Enable only heading IDs
{ headings: { ids: true } }
  • latexMath?: boolean

    Enable LaTeX math ($inline$ and $$display$$). Default: false.

  • noHtmlBlocks?: boolean

    Disable HTML blocks. Default: false.

  • noHtmlSpans?: boolean

    Disable inline HTML spans. Default: false.

  • noIndentedCodeBlocks?: boolean

    Disable indented code blocks. Default: false.

  • permissiveAtxHeaders?: boolean

    Allow ATX headers without a space after #. Default: false.

  • strikethrough?: boolean

    Enable GFM strikethrough (~~text~~). Default: true.

  • tables?: boolean

    Enable GFM tables. Default: true.

  • tagFilter?: boolean

    Enable the GFM tag filter, which replaces < with &lt; for disallowed HTML tags (e.g. <script>, <style>, <iframe>). Default: false.

  • tasklists?: boolean

    Enable GFM task lists (- [x] item). Default: true.

  • underline?: boolean

    Enable underline syntax (__text__ renders as <u> instead of <strong>). Default: false.