Skip to main content

​
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

​
Input Format

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
Ordered: 
1. First item
2. Second item
3. Third item

[Link text](https://example.com)
[Link with title](https://example.com "Title")
![Alt text](https://example.com/image.jpg)

​
Code

Inline: 
Use `const` to declare constants.
Block: 
```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.