cudoc-eleventy

Connect cudoc to Eleventy while retaining native heading IDs and TOC behavior.

ESM · Node.js 20+

npm install @cudoment/cudoc cudoc-markdown-it cudoc-eleventy

import { createMarkdownRenderer } from "cudoc-eleventy"
import attrs from "markdown-it-attrs"
import anchor from "markdown-it-anchor"

export default function (eleventyConfig) {
  eleventyConfig.setLibrary(
    "md",
    createMarkdownRenderer({ syntax: { headingAnchor: "both" } }, (md) => {
      md.use(attrs, { allowedAttributes: ["id"] })
      md.use(anchor, { permalink: anchor.permalink.linkInsideHeader() })
    }),
  )
  // cudoc reads source positions out of the token stream.
  return { markdownTemplateEngine: false }
}

Copy @cudoment/cudoc/styles.css into the output and link it from the layout. Eleventy accepts .md, not React .mdx. createDocumentCompiler(md) reuses the configured renderer for collection and replacements. Embedding requires a collected library and prepared data. Set markdownTemplateEngine: false so markdown-it receives the file's own text, and insert heading permalinks inside the heading rather than wrapping it. This adapter shares cudoc-markdown-it with cudoc-vitepress and does not use cudoc-remark.

Choose host, cudoc or both independently for headingAnchor, badge, tableCellList, callout and link. The representative callout is > [!NOTE] Title. Authors do not register cudoc React components in the recommended setup. Syntax-only rendering needs no stored JSON; cross-document embedding requires document collection.

• Usage guide · 한국어 가이드
• Markdown syntax
• Embedding
• Standalone HTML alongside a host
• API reference
• Runnable examples