Overview
The Markdown Preview tool converts Markdown text to sanitized HTML with GitHub Flavored Markdown (GFM) support. Renders headings, lists, code blocks, tables, links, images, and more in a safe, XSS-protected preview.
Use Cases
- Content Preview: Preview Markdown content before publishing
- Documentation: Render README files and documentation
- Blog Posts: Preview Markdown blog posts and articles
- Comments: Render user-submitted Markdown content safely
- Learning: Understand Markdown syntax and rendering
- Conversion: Convert Markdown to HTML for embedding
Standard Markdown or GitHub Flavored Markdown:
# Heading 1
## Heading 2
This is a paragraph with **bold** and *italic* text.
- List item 1
- List item 2
- List item 3
[Link text](https://example.com)
`inline code`
```javascript
const greeting = "Hello, World!";
console.log(greeting);
## Output Format
Sanitized HTML rendered in a preview pane:
```html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph with <strong>bold</strong> and <em>italic</em> text.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p><a href="https://example.com">Link text</a></p>
<p><code>inline code</code></p>
<pre><code class="language-javascript">const greeting = "Hello, World!";
console.log(greeting);
</code></pre>
Supported Markdown Syntax
Headings
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
Emphasis
**bold text**
*italic text*
***bold and italic***
~~strikethrough~~
Lists
Unordered:
- Item 1
- Item 2
- Nested item 2.1
- Nested item 2.2
- Item 3
1. First item
2. Second item
3. Third item
Links and Images
[Link text](https://example.com)
[Link with title](https://example.com "Title")
Code
Inline:
Use `const` to declare constants.
```javascript
function greet(name) {
return `Hello, ${name}!`;
}
```
Blockquotes
> This is a blockquote.
> It can span multiple lines.
>
> And multiple paragraphs.
Tables (GFM)
| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
Horizontal Rules
Examples
# API Documentation
## Authentication
Use the `Authorization` header with your API key:
```bash
curl -H "Authorization: Bearer YOUR_API_KEY" \
https://api.example.com/data
# Getting Started with React
React is a **JavaScript library** for building user interfaces.
## Installation
Install React using npm:
```bash
npm install react react-dom
Security
The preview uses DOMPurify to sanitize HTML output, preventing XSS attacks:
- Allowed Tags:
p, br, strong, em, b, i, ul, ol, li, h1-h6, blockquote, code, pre, a, table, thead, tbody, tr, th, td, hr, img, span, div
- Allowed Attributes:
href, src, alt, class, title, target, rel
- Blocked:
<script>, <iframe>, inline event handlers, javascript: URLs
Implementation Details
From lib/tools/engine.ts:663-675:
case 'markdown-preview': {
const { marked } = await import('marked');
const { default: DOMPurify } = await import('dompurify');
const rawHtml = await marked.parse(input || '', { gfm: true, breaks: false }) as string;
const sanitized = DOMPurify.sanitize(rawHtml, {
ALLOWED_TAGS: ['p','br','strong','em','b','i','ul','ol','li',
'h1','h2','h3','h4','h5','h6','blockquote',
'code','pre','a','table','thead','tbody','tr',
'th','td','hr','img','span','div'],
ALLOWED_ATTR: ['href','src','alt','class','title','target','rel'],
});
return { output: sanitized, previewHtml: sanitized };
}
Uses marked for Markdown parsing with GitHub Flavored Markdown (GFM) support, and DOMPurify for XSS protection.
The sanitizer removes potentially dangerous HTML. If you need to embed custom HTML or scripts, use a different approach or adjust the sanitizer configuration.
For code syntax highlighting in the preview, consider integrating a syntax highlighter like Prism or Highlight.js in your application.
