🛠️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

マークダウンプレビューはMarkdown形式のテキストをリアルタイムでスタイル付きHTMLにレンダリングし、公開前にドキュメントがどのように見えるかを正確に確認できます。MarkdownはGitHubのREADMEファイル、MkDocsやDocusaurusなどのドキュメントサイト、Dev.toやHashnodeなどのブログプラットフォームで標準的なフォーマット言語として使われています。

左パネルにMarkdownを書くと、右パネルに書式設定された出力がすぐに表示されます。レンダラーはCommonMark仕様と一般的な拡張をサポートしています：見出し、太字、斜体、インラインコード、コードブロック、引用、リスト、テーブル、タスクリスト、リンク、画像など。

Markdownは意図的にシンプルですが、プラットフォームによっては書式の特異点があります。例えばGitHub Flavored Markdown（GFM）は取り消し線（~~text~~）とタスクリストを追加しています。特定のプラットフォーム向けに書く場合は、そのプラットフォームが使用するMarkdown方言を確認してください。

よくある質問

コード実装

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.