🛠️ToolsShed

Markdown Preview

Markdown을 작성하고 렌더링 결과를 실시간으로 미리보기.

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

마크다운 미리보기는 마크다운 형식의 텍스트를 실시간으로 스타일이 적용된 HTML로 렌더링하여 게시 전에 문서가 어떻게 보일지 정확히 확인할 수 있게 해줍니다. 마크다운은 GitHub의 README 파일, MkDocs나 Docusaurus 같은 도구로 만든 문서 사이트, Dev.to와 Hashnode 같은 블로그 플랫폼에서 표준 형식 언어로 사용됩니다.

왼쪽 패널에 마크다운을 작성하면 오른쪽 패널에 형식이 적용된 출력이 즉시 나타납니다. 렌더러는 CommonMark 사양과 일반적인 확장을 지원합니다: 제목, 굵게, 기울임꼴, 인라인 코드, 코드 블록, 인용구, 목록, 표, 작업 목록, 링크, 이미지 등.

마크다운은 의도적으로 단순하지만 일부 형식 선택에는 플랫폼별 특이점이 있습니다. 예를 들어 GitHub Flavored Markdown(GFM)은 취소선(~~text~~)과 작업 목록을 추가합니다. 특정 플랫폼을 위해 작성하는 경우 해당 플랫폼이 사용하는 마크다운 방언을 확인하세요.

자주 묻는 질문

코드 구현

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.