Markdown Previewer: Write in a Simple Syntax, See the Result Instantly, and Copy Clean, Safe HTML

You are writing a README for your project, a blog post, or a document for your team, using the simple symbols: two stars for bold, a # for a heading, a dash for a list. But you do not know how the output will look until you publish it. Sahel's Markdown previewer shows you the result as you type, then copies the HTML output if you want it for your site, with no sign-up and without uploading your text to any server.

What Markdown is and why it spread

Markdown is a writing syntax designed by John Gruber in 2004. The idea is that the text stays readable in its raw form and converts easily to formatted HTML. Many platforms understand it, among them GitHub, GitLab, discussion forums, documentation tools and note apps. Its advantage is that you do not open a formatting menu or remember HTML tags; you type with both hands on the keyboard.

The basic rules

• Headings: a # for the largest heading, ## for the second, and so on up to six levels.
• Bold and italic: two stars around text for bold, one star for italic, and ~~ on each side for strikethrough.
• Lists: a dash or star at the start of a line for bullets, a number and full stop for numbered lists, and they can nest.
• Task lists: - [ ] for an unfinished task and - [x] for a finished one.
• Links and images: the text in square brackets followed by the address in round brackets, with an exclamation mark in front for an image.
• Quotes: a > at the start of the line.
• Code: one backtick around inline code, and three before and after a block.
• Tables: columns separated by vertical bars, and a second line of dashes below the headings.
• Horizontal rule: three dashes on a line of their own.

Live preview: how it helps

The most common Markdown mistakes are quiet ones: a missing space after # so it does not become a heading, a missing blank line before a list so no list appears, or a table row with a different number of cells. Seeing the result as you type exposes these at once instead of after publishing and fixing. In the preview you also check heading levels, so you can tell whether the outline makes sense to a screen reader and a search engine.

Safety: why the previewer does not pass raw HTML

Many Markdown parsers allow HTML inside the text, and that is where the danger lies. If you paste text from a source you do not trust and it contains a script tag, and the previewer renders it carelessly, it will run that code in your page. This is a well-known attack called script injection. Sahel's previewer avoids it by design: any HTML you type is shown as text, not as a real element, so you see <script> literally and it does nothing.

The same goes for links. A link beginning with javascript: can run code when clicked. So links in the previewer become clickable only if they begin with http, https, mailto or tel, or are relative paths. Anything else shows the link text as plain text without a link. The same applies to image addresses.

Never display text from an outside source as HTML without sanitising it. A safe previewer treats everything you paste as text first.

What the previewer does not support

The tool supports a carefully chosen subset of Markdown, and shows what it does not support exactly as you wrote it instead of half-handling it. Raw HTML tags are not rendered, nor are reference-style links defined at the bottom of the document, nor code blocks made with four leading spaces, nor character entities such as &copy;. If you need a code block, use three backticks.

Tips for clean Markdown

• Leave a blank line between blocks: between a paragraph and a list, and between a list and a heading, to avoid unexpected results.
• Do not skip heading levels: go from ## to ###, not ####, which is better for screen readers and search engines.
• Write descriptive link text: "Read the installation guide" beats "click here".
• Add alt text to images: it shows when the image fails to load and is read by screen readers.

Copying HTML for your site

Once you like the look you can copy the HTML output. It is plain HTML using standard elements: headings, paragraphs, lists, tables and code, without styles or scripts, so you drop it into your site's template and it takes its look from your own styles. Also sanitise any untrusted input on your server; do not rely on the preview alone.

How to use it

1. Write Markdown in the "Write" tab or paste an existing document.
2. Switch to "Preview" to see the final look.
3. Edit until you are happy with the result, watching the word and character counts.
4. Press "Copy HTML" if you want the output for your site.

A realistic scenario

A developer is writing the README for an open-source library. She writes the title, an intro paragraph, a table of options and an installation section with a code block. In the preview she notices the table did not appear as a table, then finds she forgot the line of dashes under the headings. She fixes it in seconds, then copies the text into the repository knowing the page will look as she wants from the first publish.

Frequently asked questions

Which Markdown features are supported?

Headings, lists, tables, quotes, code, links, images and inline formatting.

Does HTML inside the text work?

No. It is shown as plain text so no script can run in the preview.

What about links?

Only http, https, mailto, tel and relative paths work; other kinds such as javascript: are disabled.

Is my text saved or sent?

No. It stays in your browser and is never sent to a server.

Does the output match what GitHub shows?

It is close for the core rules, but GitHub supports more features. Treat the preview as a check of the basics and review the final output on your platform.