Markdown showcase

Everything VitePress's Markdown can do, in Material 3. Use this page to check a change to the theme against every element at once.

Text

Paragraphs set in Roboto Flex, with bold, italic, strikethrough, inline code, an internal link, an external link and a footnote-free keyboard shortcut Ctrl + K.

A blockquote: a tertiary rule and a quiet surface, for when something is quoted rather than said.

---

Lists

• An unordered list
  • with a nested item
• and a second item

1. An ordered list
2. with a second step

• A finished task
• An open one

Badges

Labels sit inline with text: info, a tip, a warning and a danger one.

Containers

INFO

Information worth knowing.

TIP

A helpful tip, with code and a link.

WARNING

Something to be careful about.

DANGER

Something that will break things.

Click to expand

Hidden until asked for.

NOTE

GitHub-style alerts render the same way.

IMPORTANT

Important is tertiary.

CAUTION

Caution shares the error container with danger.

Code

import { defineMd3Config } from "@vaam-apps/vitepress-md3/config";

export default defineMd3Config({ themeConfig: { md3: { style: "expressive" } } });

const seed = "#6750a4"; 
const seed = "#0f766e"; 
console.log("error"); 
console.log("warning"); 

pnpm

pnpm add -D @vaam-apps/vitepress-md3

npm

npm install -D @vaam-apps/vitepress-md3

Tables

Role (2021 spec)	Light	Dark
primary	tone 40	tone 80
on-primary	tone 100	tone 20
primary-container	tone 90	tone 30
on-primary-container	tone 10	tone 90

Images