MARKDOWN CONVERTER

MARKDOWN で記述された文書を HTML に変換します

Markdown サンプル

Markdown 記法のサンプルコードです。

段落と改行（<p>, <br>）

空白行で囲まれた1行は、1つの段落になります。また、改行が入っていても、1行以上の空白が入っていなければ、ひとつの段落と見なされます。改行（<br>）を入れたい場合は、末尾に半角スペースを2つ以上入れて改行してください。

※ スペース は、スペースを表わしています。

Markdown

テキスト

テキスト
テキスト

ここに改行スペーススペース
テキスト

HTML

<p>テキスト</p>
<p>テキスト
テキスト</p>
<p>ここに改行<br />
テキスト</p>

見出し（<h1>〜<h6>）

#（ハッシュ）の数で見出しのレベルが決まります。

Markdown

#見出し1
##見出し2
###見出し3
####見出し4
#####見出し5
######見出し6

HTML

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

強調（<em>, <strong>）

_（アンダースコア）または、*（アスタリスク）で、囲むと <em> になります。連続した2つで、囲むと <strong> になります。

Markdown

_アンダースコア_と*アスタリスク*

__underscore__ and **asterisk**

_テキスト
テキスト
テキスト_

*JavaScript **php html***

___JavaScript php__ html_

*JavaScript **php** html*

HTML

<p><em>アンダースコア</em>と<em>アスタリスク</em></p>
<p><strong>underscore</strong> and <strong>asterisk</strong></p>
<p><em>テキスト
テキスト
テキスト</em></p>
<p><em>JavaScript <strong>php html</strong></em></p>
<p><em><strong>JavaScript php</strong> html</em></p>
<p><em>JavaScript <strong>php</strong> html</em></p>

コード（<code>）

ブロックレベル

先頭にスペースを4つ入れるとブロックレベルの <code> で囲まれます。

※ スペース は、スペースを表わしています。

Markdown

スペーススペーススペーススペース<?php

スペーススペーススペーススペース$string = 'sample text';
スペーススペーススペーススペースecho $string;

HTML

<pre><code><?php

$string = 'sample text';
echo $string;</code></pre>

インライン

1つ以上の `（バッククオート）で、囲むとインラインコードになります。

Markdown

a `span code`

`a span` code

`a span code`

a span code `` ` ``

a span `` `code` ``

`span `` code`

HTML

<p>a <code>code span</code></p>
<p><code>a code</code> span</p>
<p><code>a span code</code></p>
<p>a span code <code>`</code></p>
<p>a span <code>`code`</code></p>
<p><code>span `` code</code></p>

リスト（<ul>, <ol>）

<ul>

<ul> は先頭に-（ハイフン）、 *（アスタリスク）、+（プラス）のいずれかを付けます。

Markdown

- リスト
- リスト
- リスト

HTML

<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>

Markdown

- リスト
* リスト
+ リスト

HTML

<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>

行頭にスペースを追加することで、階層を持たすこともできます。

Markdown

- 階層1
  - 階層2
- 階層1
  - 階層2
  - 階層2
- 階層1
  - 階層2

HTML

<ul>
<li>階層1
<ul>
<li>階層2</li>
</ul></li>
<li>階層1
<ul>
<li>階層2</li>
<li>階層2</li>
</ul></li>
<li>階層1
<ul>
<li>階層2</li>
</ul></li>
</ul>

<ol>

<ol> には数字と .（ドット）を付けます。

Markdown

1. リスト1
2. リスト2

---

1. リスト1
1. リスト2

---

123. リスト1

HTML

<ol>
<li>リスト1</li>
<li>リスト2</li>
</ol>
<hr />
<ol>
<li>リスト1</li>
<li>リスト2</li>
</ol>
<hr />
<ol>
<li>リスト1</li>
</ol>

引用（<blockquote>）

引用文は、行頭に > をつけます。

Markdown

> 引用

text
   > 引用

no space after `>`:
>引用

HTML

<blockquote>
<p>引用</p>
</blockquote>
<p>text</p>
<blockquote>
<p>引用</p>
</blockquote>
<p>no space after <code>&gt;</code>:</p>
<blockquote>
<p>引用</p>
</blockquote>

表（<table>）

|（バーティカルバー）でセルの区切りを表わし、1つ以上の -（ハイフン）で <thead> との区切りを表わします。-（ハイフン）に :（コロン）を付けることで、行揃えを指定することもできます。

Markdown

| header 1 | header 2 | header 3 | header 4 |
| -------- | :------- | :------: | -------: |
| cell 1-1 | cell 1-2 | cell 1-3 | cell 1-4 |
| cell 2-1 | cell 2-2 | cell 2-3 | cell 2-4 |
| cell 3-1 | cell 3-2 | cell 3-3 | cell 3-4 |

HTML

<table>
<thead>
<tr>
<th>header 1</th>
<th style="text-align: left;">header 2</th>
<th style="text-align: center;">header 3</th>
<th style="text-align: right;">header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>cell 1-1</td>
<td style="text-align: left;">cell 1-2</td>
<td style="text-align: center;">cell 1-3</td>
<td style="text-align: right;">cell 1-4</td>
</tr>
<tr>
<td>cell 2-1</td>
<td style="text-align: left;">cell 2-2</td>
<td style="text-align: center;">cell 2-3</td>
<td style="text-align: right;">cell 2-4</td>
</tr>
<tr>
<td>cell 3-1</td>
<td style="text-align: left;">cell 3-2</td>
<td style="text-align: center;">cell 3-3</td>
<td style="text-align: right;">cell 3-4</td>
</tr>
</tbody>
</table>

水平線（<hr>）

<hr> は、-（ハイフン）、*（アスタリスク）、_（アンダースコア）のいずれかを3つ以上、並べて記述します。

Markdown

---

- - -

   - - -

***

___

HTML

<hr />
<hr />
<hr />
<hr />
<hr />

画像（<img>）

![代替テキスト](画像ファイルのURL) で、記述します。

Markdown

![ロゴ](../logo.jpg)

HTML

<p><img src="../logo.jpg" alt="ロゴ" /></p>

リンク（<a>）

[リンクテキスト](URL) または、[リンクテキスト](URL "タイトル") と記述します。

Markdown

[リンク](http://example.com)

[リンク](http://example.com "タイトル")

HTML

<p><a href="http://example.com">リンク</a></p>
<p><a href="http://example.com" title="タイトル">リンク</a></p>

リンク先を別に定義することもできます。リンク先の定義は文中のどこに記述してもかまいません。

Markdown

[参照1][URL-1]

[参照2][URL-2]
[URL-1]:http://example.com
[URL-2]:http://example.com

HTML

<p><a href="http://example.com">参照1</a></p>
<p><a href="http://example.com">参照2</a></p>

メールアドレスのリンクを記述することもできます。

Markdown

my mail is <me@example.com>

HTML

<p>my mail is <a href="mailto:me@example.com">me@example.com</a></p>

削除された内容（<del>）

2つの連続した ~（チルダ）で、囲むと <del> になります。

Markdown

~~strike through~~

HTML

<p><del>strike through</del></p>

ブロックレベル要素（<div> など）

<div> などのブロックレベル要素で囲むと、その範囲内は Markdown 記法を無視します。

Markdown

<div>
[リンク](http://example.com)
</div>

HTML

<div>
[リンク](http://example.com)
</div>

インライン要素（<span> など）

<div> などのブロックレベル要素とは違い、 Markdown 記法を無視しません。

Markdown

<span>
[リンク](http://example.com)
</span>

HTML

<p><span>
<a href="http://example.com">リンク</a>
</span></p>

エスケープ

\（バックスラッシュ）を挿入することで、Markdown 記法の記号を無効化することができます。

Markdown

\*\*STRONG\*\*

\_EMPHASIS\_

\#H1

HTML

<p>**STRONG**</p>
<p>*EMPHASIS*</p>
<p>#H1</p>