toc()

Crea un plugin TOC che estrae i titoli dal Markdown/MDX e popola CompileResult.toc.

import { toc } from "@unifast/node";

Firma

function toc(options?: TocPluginOptions): UnifastPlugin

Parametri

options?

Configurazione dell’estrazione del TOC

Proprietà	Tipo	Predefinito	Descrizione
`maxDepth`	`number`	`3`	Profondità massima dei titoli da includere (1-6). Un valore di 3 include h1, h2 e h3.

Utilizzo

import { compile, toc } from "@unifast/node";

const result = compile(md, {
  plugins: [
    toc({
      maxDepth: 3,
    }),
  ],
});

console.log(result.toc);
// [
//   { depth: 1, text: "Introduction", slug: "introduction" },
//   { depth: 2, text: "Getting Started", slug: "getting-started" },
//   { depth: 3, text: "Installation", slug: "installation" },
// ]

Esempi

Estrazione di base dei titoli

import { compile, toc } from "@unifast/node";

const md = `# Introduction

## Getting Started

### Installation

## API Reference

### compile()

### hastToHtml()`;

const result = compile(md, { plugins: [toc()] });

console.log(result.toc);
// [
//   { depth: 1, text: "Introduction", slug: "introduction" },
//   { depth: 2, text: "Getting Started", slug: "getting-started" },
//   { depth: 3, text: "Installation", slug: "installation" },
//   { depth: 2, text: "API Reference", slug: "api-reference" },
//   { depth: 3, text: "compile()", slug: "compile" },
//   { depth: 3, text: "hastToHtml()", slug: "hasttohtml" },
// ]

Limitare la profondità

import { compile, toc } from "@unifast/node";

const result = compile(md, {
  plugins: [toc({ maxDepth: 2 })],
});

console.log(result.toc);
// Only h1 and h2 headings are included
// [
//   { depth: 1, text: "Introduction", slug: "introduction" },
//   { depth: 2, text: "Getting Started", slug: "getting-started" },
//   { depth: 2, text: "API Reference", slug: "api-reference" },
// ]

Renderizzare una navigazione TOC

import { compile, toc } from "@unifast/node";

const result = compile(md, { plugins: [toc()] });

function TableOfContents() {
  return (
    <nav>
      <ul>
        {result.toc.map((entry) => (
          <li key={entry.slug} style={{ marginLeft: (entry.depth - 1) * 16 }}>
            <a href={`#${entry.slug}`}>{entry.text}</a>
          </li>
        ))}
      </ul>
    </nav>
  );
}