メインコンテンツにスキップ

Markdown to HTML 変換ツール

マークダウン構文をHTMLにリアルタイムで変換するツールです。マークダウンを即座にプレビューし、HTMLコードを生成できます。

Markdown Input

Preview

HTML Output

主な機能​

  • リアルタイムマークダウンプレビュー
  • 自動HTML生成
  • 様々なマークダウン構文をサポート
  • ワンクリックHTMLコピー
  • 5つのサンプルテンプレート提供

サポートされているマークダウン構文​

1. 見出し​

# H1 見出し
## H2 見出し
### H3 見出し
#### H4 見出し
##### H5 見出し
###### H6 見出し

2. テキストスタイル​

**太字** または __太字__
*斜体* または _斜体_
~~取り消し線~~
`インラインコード`

3. リスト​

## 番号なしリスト
- 項目1
- 項目2
  - ネストした項目
  - 別のネストした項目

## 番号付きリスト
1. 最初の項目
2. 2番目の項目
3. 3番目の項目

4. リンクと画像​

[リンクテキスト](https://example.com)
![代替テキスト](画像URL)

5. コードブロック​

```javascript
function hello() {
  console.log("Hello World");
}
```

6. 引用​

> これは引用です。
> 複数行で書くことができます。

7. 表​

| ヘッダー1 | ヘッダー2 | ヘッダー3 |
|-----------|-----------|-----------|
| セル1     | セル2     | セル3     |
| セル4     | セル5     | セル6     |

8. 水平線​

---
***
___

使用例​

ブログ記事の作成​

# 私の最初のブログ投稿

こんにちは！今日は**マークダウン**について学びます。

## マークダウンとは？

マークダウンは、*シンプルな構文*で文書を作成できる
軽量マークアップ言語です。

### 利点
1. 学びやすい
2. 読みやすい
3. 幅広いプラットフォームサポート

ドキュメント作成​

# APIドキュメント

## エンドポイント

### GET /api/users

ユーザーリストを取得します。

**レスポンス例:**
```json
{
  "users": [
    {"id": 1, "name": "John"}
  ]
}

### README作成
```markdown
# プロジェクト名

プロジェクトの簡単な説明

## インストール方法

```bash
npm install

使用方法​

  1. リポジトリをクローン
  2. 依存関係をインストール
  3. サーバーを起動

## 活用のヒント

1. **リアルタイム確認**: 左側でマークダウンを書くと、中央で即座にプレビューを確認できます。

2. **HTML コピー**: 右パネルの「Copy HTML」ボタンで生成されたHTMLをコピーできます。

3. **サンプル活用**: 上部のサンプルボタンをクリックして、様々なマークダウン構文を学習できます。

4. **ブログ作成**: マークダウンでコンテンツを作成し、HTMLに変換してブログに直接投稿できます。

5. **ドキュメント作成**: 技術文書やREADMEファイルをプレビューする際に便利です。

## 関連ツール

- [Base64 Encoder](/docs/playground/base64-encoder)
- [URL Encoder](/docs/playground/url-encoder)
- [HTML Formatter](/docs/playground/html-formatter)
- [Text Diff Checker](/docs/playground/text-diff-checker)