Qiitaでも使える!Markdownの基本的な書き方と、ちょっと楽するポイント


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スタイルも使えちゃいます。

特殊文字のエスケープ

  • & : &amp;
  • < : &lt;

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

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

著作権記号

&amp;copy;

&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

  1. one
  2. two
  3. three

リスト

番号なしリスト

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

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

番号付きリスト

Markdown

1. one
2. two
3. three
  1. one
  2. two
  3. three

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

1. one
5. two
2. three
  1. one
  2. two
  3. three

HTML

<ol>
<li>one
<li>two
<li>three
</ol>
  1. one
  2. two
  3. 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を<>で囲えば、勝手にリンクを作ってくれます。

<[email protected]>

<http://example.com/>

[email protected]