Markdown table of contents generator

A GitHub flavoured toc, in your browser

This page is a playground for @0dep/toc, a zero-dependency markdown table of contents generator. It is string in, string out: the toc is written between <!-- toc --> and <!-- /toc --> markers and only there, nothing outside them is ever touched, nothing is inserted or guessed. Anchors follow GitHub’s own slug algorithm, duplicate headings get -1, -2 like GitHub, and headings inside fenced code blocks are ignored. The same library runs as npx toc README.md in a repo, typically from a pretest script so the list never goes stale. Your markdown never leaves the browser, and after the first visit the page works offline.

Is my markdown uploaded anywhere?

No. This is a static page and @0dep/toc runs entirely in your browser — the file you drop or the text you paste never leaves your machine. The page makes no network requests with your content, and its Content-Security-Policy blocks requests to any other origin. The site is open source, so you can verify this in the code.

Where does the table of contents go?

Between a pair of markers, <!-- toc --> and <!-- /toc -->, each on a line of its own. Every heading below the start marker is listed, nothing above it, so the document title stays out when the markers sit under it. Only the lines between the markers are replaced; nothing else in the document is touched. A document without markers gets a block listing every heading, inserted below the first heading as a starting point.

Do the anchors match GitHub?

Yes. Slugs follow the github-slugger algorithm GitHub uses for its heading anchors: lowercase, punctuation dropped, spaces turned into hyphens, and duplicate headings numbered -1, -2 and so on. Inline code, links, emphasis and html in a heading are reduced to the text GitHub renders before slugging.

Can the list be collapsed?

Ask for it on the start marker, <!-- toc collapsible --> or <!-- toc collapsed -->, optionally with a summary text such as collapsed="Contents", and the list is wrapped in an html details element. Collapsible starts open, collapsed starts folded. Without markers, the options on this page do the same for the generated block.

What gets skipped?

A start marker without an end marker, an end marker without a start, a pair with no headings below it, and a start marker with an unknown option or a malformed attribute — each is listed with its line number and left as it is rather than guessed at. Markers and headings inside fenced code blocks are ignored, as are markers indented four spaces or more.

How do I keep a README fresh from the command line?

Install @0dep/toc as a dev dependency and run npx toc README.md, or put it in a pretest script so the toc is regenerated before every test run. The generated block is formatted the way prettier formats markdown, so the two do not fight.

Don’t take our word for it — the whole site is open source: github.com/zerodep/0dep.se.