Developer guide
How to use a Markdown previewer
A Markdown previewer turns source into rendered structure so you can catch heading, list, table, link, and code-block problems before publication.
Open the Markdown PreviewerWhy preview Markdown
Markdown is intentionally readable as text, but small syntax details change the rendered result. A missing blank line can merge blocks, indentation can turn text into code, and an unclosed fence can consume the rest of a document.
Previewing shows both the rendered content and, in ToolPixels, the sanitized HTML result produced from it.
How to use a Markdown previewer
- Paste the Markdown source.
- Select Preview Markdown.
- Check heading order, paragraph breaks, lists, tables, links, and fenced code.
- Edit the source and preview again.
- Copy or download the sanitized HTML only if that output suits the destination.
A small preview example
## Setup
1. Install the package
2. Run the command
```sh
npm test
```
The result should contain a level-two heading, an ordered list, and a separate code block. If the fence is missing its closing line, later content may appear inside the block.
What this previewer supports
| Content | Behavior |
|---|---|
| Common Markdown | Headings, lists, links, code, blockquotes |
| GitHub-style extensions | Tables and strikethrough |
| Raw HTML | Sanitized |
| Images and embeds | Removed |
Links are inactive in the visual preview. Safe links remain in the HTML export, while unsafe URLs are removed.
Preview limitations to remember
- Markdown dialects differ between publishing systems.
- Custom styles can change spacing and table behavior.
- Task-list checkboxes and remote images are not rendered here.
- A preview does not check spelling, accessibility, or link availability.
- Always check the final platform when exact rendering matters.
Use the browser tool
Preview common Markdown and GitHub-style tables or strikethrough locally, with sanitized HTML output.