toc()

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

Сигнатура

function toc(options?: TocPluginOptions): UnifastPlugin

Параметры

options?

Конфигурация извлечения оглавления

Использование

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" },
// ]

Примеры

Базовое извлечение заголовков

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" },
// ]

Ограничение глубины

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

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

console.log(result.toc);
// Включаются только заголовки h1 и h2
// [
//   { depth: 1, text: "Introduction", slug: "introduction" },
//   { depth: 2, text: "Getting Started", slug: "getting-started" },
//   { depth: 2, text: "API Reference", slug: "api-reference" },
// ]

Отрисовка навигации 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>
  );
}