🛠️ToolsShed

Markdown Preview

Write Markdown and preview the rendered output in real time.

Hello, Markdown!

This is bold and this is italic text.

Features

  • Live preview as you type
  • Syntax support for common elements
  • Code blocks with inline code
const greet = (name) => `Hello, ${name}!`;
console.log(greet("World"));
Blockquotes look like this.

Visit ToolsShed

Markdown Preview renders Markdown-formatted text into styled HTML in real time, letting you see exactly how your document will look before publishing. Markdown is a lightweight plain-text syntax designed to be readable as-is while also converting cleanly to HTML. It is the standard formatting language for README files on GitHub, documentation sites built with tools like MkDocs or Docusaurus, blog posts on platforms like Dev.to and Hashnode, and content in many note-taking apps.

Write your Markdown in the left panel and see the formatted output appear immediately in the right panel. The renderer supports the full CommonMark specification plus common extensions: headings (#, ##, ###), bold (**text**), italic (*text*), inline code (`code`), code blocks with syntax highlighting (```language), blockquotes (>), unordered and ordered lists, tables, task lists (- [ ] item), horizontal rules (---), and links and images.

Markdown is intentionally simple but some formatting choices have platform-specific quirks. For example, GitHub Flavored Markdown (GFM) adds strikethrough (~~text~~) and task lists not found in standard Markdown. If you are writing for a specific platform, check its documentation to know which Markdown dialect it uses. This previewer uses a standard renderer that covers the vast majority of everyday use cases.

Frequently Asked Questions

Code Implementation

import re

def simple_markdown_to_html(text: str) -> str:
    """Convert basic Markdown to HTML."""
    lines = text.split("\n")
    html_lines = []
    in_code_block = False

    for line in lines:
        # Fenced code block
        if line.startswith("```"):
            if in_code_block:
                html_lines.append("</code></pre>")
                in_code_block = False
            else:
                lang = line[3:].strip()
                html_lines.append(f'<pre><code class="language-{lang}">')
                in_code_block = True
            continue

        if in_code_block:
            html_lines.append(line)
            continue

        # Headings
        if line.startswith("### "):
            html_lines.append(f"<h3>{line[4:]}</h3>")
        elif line.startswith("## "):
            html_lines.append(f"<h2>{line[3:]}</h2>")
        elif line.startswith("# "):
            html_lines.append(f"<h1>{line[2:]}</h1>")
        elif line.startswith("- "):
            html_lines.append(f"<li>{line[2:]}</li>")
        elif line.strip() == "":
            html_lines.append("<br>")
        else:
            # Bold and italic
            line = re.sub(r'\*\*(.+?)\*\*', r'<strong>\1</strong>', line)
            line = re.sub(r'\*(.+?)\*', r'<em>\1</em>', line)
            # Links
            line = re.sub(r'\[(.+?)\]\((.+?)\)', r'<a href="\2">\1</a>', line)
            # Inline code
            line = re.sub(r'`(.+?)`', r'<code>\1</code>', line)
            html_lines.append(f"<p>{line}</p>")

    return "\n".join(html_lines)

md = "# Hello\n**Bold** and *italic* text\n[Link](https://example.com)"
print(simple_markdown_to_html(md))

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.