Examples
See NoirMD in action with different markdown features and directives.
Admonitions
codeMarkdown Source
:::note {title="Note"}
This is a note admonition with a title.
:::
:::warning {title="Warning"}
Be careful with this operation.
:::
:::danger {title="Danger"}
This action is irreversible!
:::play_arrowReact Preview
Note
This is a note admonition with a title.
Warning
Be careful with this operation.
Danger
This action is irreversible!
Cards
codeMarkdown Source
:::card {title="Card Title" icon="star"}
#description
A short description of the card.
#content
Main content goes here.
:::play_arrowReact Preview
Card Title
A short description of the card.
Main content goes here.
Details
codeMarkdown Source
:::details {title="Click to expand" icon="expand_more"}
Hidden content that can be toggled.
:::play_arrowReact Preview
Click to expand
Button
codeMarkdown Source
:::button {url="https://github.com" label="Visit GitHub" icon="open_in_new"}
:::play_arrowReact Preview
Code Block
codeMarkdown Source
```typescript
const greeting = "Hello, NoirMD!";
console.log(greeting);
```play_arrowReact Preview
const greeting = "Hello, NoirMD!";
console.log(greeting);Table
codeMarkdown Source
| Feature | React | Vue | Vanilla |
|---------|-------|-----|---------|
| SSR | Yes | Yes | N/A |
| Tree Shaking | Yes | Yes | Yes |
| TypeScript | Full | Full | Full |play_arrowReact Preview
| Feature | React | Vue | Vanilla |
|---|---|---|---|
| SSR | Yes | Yes | N/A |
| Tree Shaking | Yes | Yes | Yes |
| TypeScript | Full | Full | Full |