đŸ› ïžToolsShed

Markdown-Vorschau

Schreiben Sie Markdown und sehen Sie die gerenderte Ausgabe in Echtzeit.

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

Die Markdown-Vorschau rendert Markdown-formatierten Text in Echtzeit in gestaltetes HTML und zeigt Ihnen genau, wie Ihr Dokument vor der Veröffentlichung aussehen wird. Markdown ist die Standard-Formatierungssprache fĂŒr README-Dateien auf GitHub, Dokumentationsseiten und Blogplattformen wie Dev.to und Hashnode.

Schreiben Sie Ihr Markdown im linken Panel und sehen Sie die formatierte Ausgabe sofort im rechten Panel erscheinen. Der Renderer unterstĂŒtzt die vollstĂ€ndige CommonMark-Spezifikation plus gĂ€ngige Erweiterungen: Überschriften, Fett, Kursiv, Inline-Code, Codeblöcke, Zitate, Listen, Tabellen, Aufgabenlisten, Links und Bilder.

Markdown ist absichtlich einfach gehalten, aber einige Formatierungsoptionen haben plattformspezifische Eigenheiten. Zum Beispiel fĂŒgt GitHub Flavored Markdown (GFM) Durchgestrichen (~~Text~~) und Aufgabenlisten hinzu. Wenn Sie fĂŒr eine bestimmte Plattform schreiben, ĂŒberprĂŒfen Sie deren Dokumentation, um zu erfahren, welchen Markdown-Dialekt sie verwendet.

HĂ€ufig gestellte Fragen

Code-Implementierung

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.