General

Markdown

A component for rendering markdown content with syntax highlighting and custom components.

Import

Code
 
import { Markdown } from "zudoku/components";

Props

Code
 
type MarkdownProps = {
  content: string;
  className?: string;
  components?: Components;
};

Usage

Basic Markdown

Code
 
<Markdown content="# Hello World\n\nThis is **bold** text." />

With Custom Styling

Code
 
<Markdown content="# Styled Content" className="max-w-2xl mx-auto" />

With Custom Components

Code
 
const customComponents = {
  h1: ({ children }) => <h1 className="text-4xl font-bold text-blue-600">{children}</h1>,
  p: ({ children }) => <p className="text-gray-700 leading-relaxed">{children}</p>,
};

<Markdown content="# Custom Heading\n\nCustom paragraph styling." components={customComponents} />;

Features

• GitHub Flavored Markdown: Full GFM support including tables, strikethrough, and task lists
• Syntax Highlighting: Code blocks with configurable Shiki themes
• Raw HTML Support: Safely renders HTML mixed with markdown
• Custom Components: Override default markdown elements with custom React components
• Prose Styling: Built-in typography styles with dark mode support

Supported Markdown

Headers

Code
 
# H1 Header

## H2 Header

### H3 Header

Emphasis

Code
 
_italic_ or *italic*
**bold** or __bold__
**_bold italic_**
~~strikethrough~~

Lists

Code
 
- Unordered list item
- Another item
  - Nested item

1. Ordered list item
2. Another numbered item

Code

The Markdown component supports both inline code and code blocks with syntax highlighting.

Inline code with backticks:

Code
 
Inline `code` with backticks

Code blocks with syntax highlighting:

Code
 
```javascript
// Code block with syntax highlighting
function hello() {
  console.log("Hello, world!");
}
```

For advanced syntax highlighting features like line numbers, titles, and line highlighting, see:

• Code Blocks - Markdown code block syntax and features
• Syntax Highlight - React component for syntax highlighting

Links and Images

Code
 
[Link text](https://example.com) ![Alt text](image.jpg)

Tables

Code
 
| Column 1 | Column 2 |
| -------- | -------- |
| Cell 1   | Cell 2   |
| Cell 3   | Cell 4   |

Configuration

The Markdown component automatically uses:

• Remark GFM: For GitHub Flavored Markdown features
• Rehype Raw: For HTML support
• Shiki: For syntax highlighting with your configured themes