NgMd
On this page ▾
Every component and markdown feature on one page. Use it to check styles, dark mode and spacing after a change. It is left out of search and the sitemap.

Kitchen sink

Each section shows one feature with its common options. The Components page documents every attribute.

Text

Inline formatting

Plain text, bold, italic, inline code, strikethrough and a UI label like Record. A line with a site link, an anchor link, an external link and keyword links such as Angular.

Lists

  • Unordered item
  • Another item with code
    • Nested item
  1. First step
  2. Second step
  3. Third step

Tables

Column Type Notes
name string Short text.
count number Right after the name.
active boolean A longer note that wraps on small screens to check the cell layout.

Blockquote

A quoted line for the rare case a page needs one.

Headings with extras

A fourth level heading

Headings from #### down get anchors but don't appear in "On this page".

Heading with a badge Beta

The badge is left out of the anchor, so this heading links as #heading-with-a-badge.

Heading with code

Code

Plain fence

// src/app/app.config.ts
import {ApplicationConfig} from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [],
};

Line highlights

// src/main.ts
import {bootstrapApplication} from '@angular/platform-browser';
import {App} from './app/app';
import {appConfig} from './app/app.config';

bootstrapApplication(App, appConfig).then(() => {
  if (typeof ngDevMode === 'undefined' || ngDevMode) {
    return import('./dev-tools');
  }
  return undefined;
});

Code group

pnpm create ngmd@latest my-docs
npm create ngmd@latest my-docs
yarn create ngmd my-docs
bun create ngmd my-docs

File import

src/ngmd.config.ts#L1-L12
/**
 * NgMd site configuration.
 *
 * Edit this file to customise navigation, site metadata, and external links.
 * Sidebar, command palette, breadcrumb, and header all read from here.
 */

import type {BadgeVariant} from './types/badge.ts';

export interface NavItem {
  label: string;
  href: string;

Other languages

{
  "mcpServers": {
    "docs": {"command": "npx", "args": ["my-docs-mcp"]}
  }
}
<button type="button" aria-label="Open search">Open</button>
:root {
  --accent: #d946ef;
}

Callouts

Context the reader may need, with code and a link.

Callouts are never adjacent on real pages. The text between them here keeps that rule.

A shortcut or a better way to do something.

Text between callouts.

Confirms a result.

Text between callouts.

Something that can go wrong.

Text between callouts.

Data loss or a security risk.

Alerts

An info alert.

Text between alerts.

A helpful alert.

Text between alerts.

An important alert.

Text between alerts.

A warning alert.

Text between alerts.

A critical alert with a custom label.

Badges

New Updated Alpha Beta Stable Deprecated

Cards

Three columns with icons

A card that links inside the site. A card that opens another site in a new tab. A card with inline code and no link.

Two columns with images

A logo instead of an icon. A round profile photo.

Every icon

Workflow

Run pnpm create ngmd@latest my-docs. Add a markdown file under src/content. Run pnpm build. The link guards check every link.

Tabs

Content of the first tab. Content of the second tab, with an image instead of an icon. A tab with no icon.

Accordion

This item starts open. This item starts closed.

Media

Image

Say hi to my cats Angular and Excel 👋

Video

Where to next