読者です 読者をやめる 読者になる 読者になる

Markdownの書き方まとめ

Markdown記法の書き方をまとめておく。 書き方がわからなくなってしまったら、とりあえずこのページを参照しよう。

本文の書き方

基本

段落と改行

  • 一行以上の空行で挟まれた範囲が段落になる。
  • 段落内で改行したい場合は行末に 2つ以上の半角スペース をつける。

引用

  • 頭に > をつけると引用になる。(一行目にだけつければ十分。)
> this is all one single quoted
paragraph even though it is spread
over several lines.

テキストの装飾

強調

HTMLタグ

<em>, <strong>

Markdown記法

  • アンダースコア もしくは アスタリスク で囲う。
  • 強調レベルに応じて1,2,3個を使い分ける。
*強調レベル1*  
**強調レベル2**  
***強調レベル3***  

_強調レベル3_
__強調レベル3__
___強調レベル3___

実際の表示

強調レベル1
強調レベル2
強調レベル3

取り消し線

HTMLタグ

<del>

Markdown記法

~~間違いでした~~

実際の表示

間違いでした

インラインコード

HTMLタグ

<code>

Markdown記法

  • バッククォート or 二連バッククォート で囲む。
  • n連バッククォートを含むコードを書きたい時は、(n+1)連バッククォートで囲う。
`f = lambda x: x**2`  
``echo `uname -a` ``

実際の表示

f = lambda x: x**2
echo `uname -a`

見出し

  • 行頭に#をつける。(6個まで)
  • 見やすさのため、行末に#をつけても良い。

HTMLタグ

<h1>, ..., <h6>

Markdown記法

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

見出しレベル1,2についてはより目立つ書き方も許されている。

見出しレベル1.
============

見出しレベル2.
-------------

実際の表示

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6

水平線

HTMLタグ

Markdown記法

水平線の記法は幾つかある。どれも同じに解釈される。

* * *
***
*****
- - -
-------------------------

実際の表示


箇条書き

リスト

HTMLタグ

<ul>

Markdown記法

  • 行頭に使える記号: *, -, +
  • 記号の直後にはスペースが必須。
* 階層1  
  * 階層1-1  
  - 階層1-2  
* 階層2  
* 階層3  
  * 階層3-1  
   * 階層3-1-1  

実際の表示

  • 階層1
    • 階層1-1
    • 階層1-2
  • 階層2
  • 階層3
    • 階層3-1
      • 階層3-1-1

番号付きリスト

HTMLタグ

<ol>

Markdown記法

  • 数字の後にピリオドをつける。
  • 半角スペース3個でインデントする必要がある。(おそらくはperiodの分。)
1. 階層1
    1. 階層1-1
    2. 階層1-2
3. 階層2
* 階層3
    1. 階層3-1
    2. 階層3-2

実際の表示

  • なぜか深い階層で数字つきリストになってくれない。。。
  1. 階層1
    1. 階層1-1
    2. 階層1-2
  2. 階層2
  3. 階層3
    1. 階層3-1
    2. 階層3-2

ブロック要素

整形済みテキスト

HTMLタグ

<pre>

Markdown記法

  • 以下のどれかの記法を使えば良い。
    • 前後を三連バッククオート ``` で囲う。
    • 行頭に4つ以上の半角スペースをつける。
    • 行頭に1つ以上のタブをつける。
  • ```python のように書いてシンタックスハイライトの書式を指定できる。

```python
def sum(x, y):
return x + y
```

実際の表示

def sum(x, y):
    return x + y

元々のMarkdownには表を書く構文はない。 ここでは Github-Flavored-Markdown で採用されている構文が使える。 ただしここで作れる表は、"一行目がヘッダで二列目以降が中身の表"に限る。

HTMLタグ

<table> など

Markdown記法

|指定無し|左寄せ|中央寄せ|右寄せ|
|--------|:-----|:------:|-----:|
|100     |200   |300     |400   |
  • -: の行でヘッダ部分と内容部分を区切る。
  • :の位置で寄せ方を指定できる。
  • 一番左と一番右の縦棒はなくても良い。

実際の表示

指定無し 左寄せ 中央寄せ 右寄せ
100 200 300 400

リンク

HTMLタグ

<a>

Markdown記法

書き方1.

[エウロパ見聞録](http://europa-kenbunroku.hatenablog.com)

書き方2.

この書き方だと、URLをリンクテキストとは別の場所に書くことができる。

[エウロパ見聞録][url1]
[url1]: http://europa-kenbunroku.hatenablog.com

書き方3.

URLを書いて、そのままリンクにしたい場合は <, >で囲む。

<http://europa-kenbunroku.hatenablog.com>

実際の表示

エウロパ見聞録

画像

HTMLタグ

Markdown記法

  • リンクの記法と似ているが、頭に!がつくところが違う。
    • alt text は画像が表示できないときに表示されるテキスト。
    • "で囲まれた部分はマウスが画像に乗った時に表示される。
  • 画像サイズの指定ができない。
書き方1.
![alt text](http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png "Wikipedia Logo")
書き方2.
![alt text][image1]
[image1]: http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png "Wikipedia Logo"

実際の表示

alt text

HTMLの直接記述

Markdownでは表現できないような複雑な表現をしたい時は、直接HTMLタグを 書くこともできる。

例: テーブル

HTMLタグ

<table border=4 width=250 align=center>
 <caption>【テーブルの例】</caption>
 <tr align=center>
  <th><br></th>
  <th>列-A</th>
  <th>列-B</th>
 </tr>
 <tr align=center>
  <td>行-1</td>
  <td>A1</td>
  <td>B1</td>
 </tr>
</table>

実際の表示

【テーブルの例】

列-A 列-B
行-1 A1 B1

補足

タグのエスケープ
  • < は誤ってタグと解釈されないようにするため &lt; と書くのが無難。