Markdown内のHTML

Markdownの構文はHTMLで書き換えできます。

ブロックレベルのタグ

div
table
pre
p
li

等々。
実際に使ってみると、こんな感じになります。

<table>
    <tr>
        <th>Foo</th>
        <th>HOGE</th>
        <th>*HOGE*</th>
    </tr>
    <tr>
        <td>Foo</td>
        <td>HOGE</td>
        <td>*HOGE*</td>
    </tr>
</table>

Foo	HOGE	HOGE
Foo	HOGE	HOGE

ただし、ブロックレベルのタグだと、タグ内ではMarkdownスタイルは使えません。

スパンレベルのタグ

span
cite
del
img
a

等々。

<cite>**Hello World**</cite>

Hello World

スパンレベルのタグ内なら、Markdownスタイルも使えちゃいます。

特殊文字のエスケープ

& : &
< : <

HTMLならリンクに含まれた&

<a href="http://images.google.com/images?num=30&q=larry+bird">Link</a>

著作権記号

&amp;copy;

©
©

タグ

&lt;a>hogehoge&lt;/a>

<a>hogehoge</a>
hogehoge

Markdown内のブロック要素

段落・改行

段落の定義は 「1行以上の連続したテキスト」
改行するには、1行あける必要があります。
つまり 「2個改行」 を挟めばいいわけです。

ただし、Qiitaだと、1個で改行できちゃいました。

見出し

見出しの書き方は2種類あります。

Setext形式

This is an H1
=============

This is an H2
-------------

Atx形式

# This is an H1

## This is an H2

### This is an H3

#の数が増えるほど、小さい見出しになります。
#を最後に付け加えれば、見出しを綴じることもできます。

引用

>　引用したい文

引用したい文

複数の>を並べると入れ子に
Markdown要素が使用可

実際に試してみるとこんな感じになりました。

> This is a blockquote with two paragraphs.
> # number
> > 1. one
> > 2. two
> > 3. three

This is a blockquote with two paragraphs.

number

one

two

three

リスト

番号なしリスト

* + - をリストマーカーに使える。

* アスタリスク
+ プラス
- ハイフン

アスタリスク

プラス

ハイフン

番号付きリスト

Markdown

1. one
2. two
3. three

one
two
three

実は1つめの番号以外は、順番と違っていても、問題ないみたいです。
これでも同じ表示になりました。

1. one
5. two
2. three

one
two
three

HTML

<ol>
<li>one
<li>two
<li>three
</ol>

one
two
three

また、リストの要素に

引用を入れるなら、1インデント。
コードを入れるなら、2インデント。

*   A list item with a blockquote:
    > This is a blockquote
> inside a list item.

*   A list item with a code block:
        <code goes here>

表示するとこんな感じ。

A list item with a blockquote:

This is a blockquote

inside a list item.

A list item with a code block:
```
<code goes here>
```

数字.をそのまま表示する場合は、バックスラッシュを挟んで数字\.とすればオッケーです。

コードブロック

各行を1つのタブでインデントすると、次のようなソースコードのブロックを作れます。

こんな感じ
# 全部の文字がそのまま表示される
&amp;

HTMLだとこれに対応します。

<pre><code>
こんな感じ
# 全部の文字がそのまま表示される
&amp;
</code></pre>

HTMLだと&amp；等が&として解釈されちゃいます。
一方、Markdownのコードブロックだと、その辺の文字をHTMLエンティティに勝手に変換してくれるので便利！

長いコードなら、全部インデントするの面倒ですし``` でコード囲った方が楽そうです。
しかし1・2行のコードなら、インデントした方が楽できるかもしれません。

水平線

水平線<hr />(HTML)ってこんなもの↓

これをMarkdownだと*、-、_のどれかを3つ並べるだけで書けます。

Markdown内のスパン要素

リンク

[リンクの表示名](URL "タイトル")

ただし、タイトルはリンクにカーソルを合わせたときに表示される名前。
タイトルがなければ、URLが表示されます。

This is [an example](http://example.com/ "Title") inline link.

This is an example inline link.

[リンクの表示名][ID]

とすると、[ID]に設定したURLに飛ぶリンクが作れる。
[ID]の設定は

[ID名]:URL "タイトル"

でできます。
""は''、()でも代用できます。
またこの記述は実際には表示されないので、ご心配いりません。

[id]: http://example.com/  "Optional Title Here"

This is [an example][id] reference-style link.

This is an example reference-style link.

「ID名」を「リンクの表示名」にすれば、[ID]の中を省略可能です。

I get 10 times more traffic from Google than from
Yahoo or MSN.

強調

_　* で文字を挟むと、強調できます。

1個なら斜めに

*moji*

moji

2個なら太字に

**moji**

moji

記号を表示したいなら、\を付けてエスケープしておきましょう。

\*\*moji\*\*

**moji**

インラインのコード

`コード`

とすると、段落内でソースコードをそのまま表示できます。

Use the `printf()` function.

Use the printf() function.

コード内の`をそのまま表示するには、
コードを囲う記号を``に変えればオッケーです。

Use the `` `printf()` `` function.

Use the `printf()` function.

画像

![画像名](画像へのパス,)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/298418/6fd756fc-eae9-9a2a-17a0-7968dae5de97.png "Google")

![画像のタイトル][ID名]

リンク同様、こうすることでIDに設定したURLにある画像とタイトルを表示できます。

[id2]:https://qiita-image-store.s3.amazonaws.com/0/298418/6fd756fc-eae9-9a2a-17a0-7968dae5de97.png "Google"

![image.png][id2]

自動リンク

メールアドレスやURLを<>で囲えば、勝手にリンクを作ってくれます。

<hogehoge@hoge.com>

<http://example.com/>

hogehoge@hoge.com

http://example.com/