🛠️ToolsShed

Vista previa de Markdown

Escribe Markdown y previsualiza el resultado renderizado en tiempo real.

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

La vista previa de Markdown renderiza texto con formato Markdown en HTML con estilo en tiempo real, permitiéndote ver exactamente cómo lucirá tu documento antes de publicarlo. Markdown es el lenguaje de formato estándar para archivos README en GitHub, sitios de documentación y plataformas de blog como Dev.to y Hashnode.

Escribe tu Markdown en el panel izquierdo y ve la salida formateada aparecer inmediatamente en el panel derecho. El renderizador admite la especificación CommonMark completa más extensiones comunes: encabezados, negrita, cursiva, código en línea, bloques de código, citas, listas, tablas, listas de tareas, enlaces e imágenes.

Markdown es intencionalmente simple pero algunas opciones de formato tienen peculiaridades específicas de la plataforma. Por ejemplo, GitHub Flavored Markdown (GFM) agrega tachado (~~texto~~) y listas de tareas. Si escribes para una plataforma específica, consulta su documentación para saber qué dialecto de Markdown usa.

Preguntas Frecuentes

Implementación de Código

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.