Skip to content
md-book

Showcase#

A quick tour of the content components. Body text sits at a comfortable measure, with links, inline code and strong text that stay legible in light and dark.

Callouts#

Note

Notes are for context the reader can skim past.

Tip

Tips suggest a better way to do something.

Heads up

Warnings flag things that can bite later.

Careful

Danger is for destructive or irreversible actions.

Click to expand

Details render as a native disclosure — no JavaScript needed.

Tables#

Token Purpose Default
--md-book-color-accent Links, focus ring, active states #4f46e5
--md-book-radius Cards, code blocks, callouts 0.75rem
--md-book-measure Reading width 46rem

Code#

TypeScript#

import { renderMarkdown } from '@ibitsuki0296/md-book';

interface Options {
  tocDepth?: [number, number];
}

/** Renders a page and returns its table of contents. */
export function toc(source: string, options: Options = {}) {
  const { toc, frontMatter } = renderMarkdown(source, options);
  console.log(`${frontMatter.title ?? 'Untitled'}: ${toc.length} sections`, 42, true);
  return toc; // done
}

CSS#

@layer md-book.components {
  .md-book-container {
    padding: 0.9rem 1.1rem;
    border-radius: var(--md-book-radius);
    background: color-mix(in srgb, var(--_c) 8%, transparent);
  }
}

Shell, JSON and YAML#

# install and start the demo
npm install -D @ibitsuki0296/md-book
npx md-book manifest --root docs --out "$OUT_DIR"

{
  "version": 1,
  "title": "My docs",
  "nav": [{ "text": "Guide", "link": "/guide/" }],
  "draft": false
}

title: Showcase
tags: [design, tokens]
draft: false
order: 5

- --md-book-color-accent: #2563eb;
+ --md-book-color-accent: #4f46e5;

HTML#

<md-book manifest="/manifest.json" lang="ja" blog></md-book>