🛠️ToolsShed

Pratinjau Markdown

Tulis Markdown dan pratinjau hasil render secara 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

Pratinjau Markdown merender teks berformat Markdown ke HTML bergaya secara real-time, memungkinkan Anda melihat dengan tepat tampilan dokumen Anda sebelum diterbitkan. Markdown adalah bahasa format standar untuk file README di GitHub, situs dokumentasi yang dibangun dengan MkDocs atau Docusaurus, dan platform blog seperti Dev.to dan Hashnode.

Tulis Markdown Anda di panel kiri dan lihat output yang diformat muncul segera di panel kanan. Renderer mendukung spesifikasi CommonMark lengkap ditambah ekstensi umum: judul, tebal, miring, kode inline, blok kode, kutipan, daftar, tabel, daftar tugas, tautan, dan gambar.

Markdown sengaja dibuat sederhana, tetapi beberapa pilihan format memiliki kekhasan khusus platform. Misalnya, GitHub Flavored Markdown (GFM) menambahkan teks coret (~~teks~~) dan daftar tugas yang tidak ada di Markdown standar. Jika Anda menulis untuk platform tertentu, periksa dokumentasinya untuk mengetahui dialek Markdown yang digunakannya.

Pertanyaan yang Sering Diajukan

Implementasi Kode

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.