Markdown

The Markdown framework transforms Markdown source files into sanitized HTML output, enabling you to preview formatted documentation directly within Codespark.

import { Framework, markdown } from '@codespark/framework/markdown';

Usage

To use the Markdown framework, import it from @codespark/framework/markdown and pass it to the framework prop:

import { markdown } from '@codespark/framework/markdown';
import { Codespark } from '@codespark/react';

<Codespark
  framework={markdown}
  name="index.md"
  code={`# Hello World

This is a **Markdown** preview.`}
/>

Features

• Markdown to HTML conversion - Parses Markdown syntax and converts it to semantic HTML using the marked library.

• XSS protection - All HTML output is sanitized using DOMPurify to prevent cross-site scripting attacks.

• Standard Markdown support - Full support for CommonMark-compliant Markdown syntax including headings, emphasis, lists, code blocks, links, and more.

Supported Syntax

The Markdown framework supports standard Markdown syntax:

Headings

# Heading 1
## Heading 2
### Heading 3

Text Formatting

**bold text**
*italic text*
~~strikethrough~~

Lists

- Unordered item 1
- Unordered item 2

1. Ordered item 1
2. Ordered item 2

Code Blocks

Inline `code` and fenced code blocks:

```js
const greeting = 'Hello, World!';
```

Links and Images

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

Blockquotes

> This is a blockquote.