Markdown記法のメモ

今までBloggerでブログを書いていました。
どうにも書きづらいところも出てきたので移行しようかどうしようか検討しています。
移行の検討材料として、以下があります。

  • コードが貼り付けやすい
  • 記事のストックができる
  • 記事が書きやすい
  • バージョン管理までとは行かなくても手元に記事を残せる(もしくは復元も容易)

今回は、移行するにあたって記法の基礎から書いてみます。

改行

改行したい文字の後ろに空文字(空白)を２つ挿入

強調

こんな感じで強調できます。

**こんな感じで書けば強調できます。**

見出し

今まで表示しているような見出しは以下のような感じで表示します。

  • # h1タグの見出し
  • #### h4タグの見出し
  • ###### h6タグの見出し

リスト

リストを表現する際の注意事項は、「リストの上下に空行をいれる」です。
上下に空行を入れない場合、リストとして認識されません。(期待している表示にならず残念な表示になります)
wikiのような感じでレベルの表現もできないことも注意すること。

順序付きのリスト

以下のような数字付きのリストを表示したい場合、「数字.」を先頭につければ表示できます。

  1. これは「1.」を先頭につけてます
  2. これは「2.」を先頭につけてます
順序なしのリスト

要点を書く際の順序なしリストを表示したい場合、「+」「*」「-」を先頭につければ表示できます。

  • これは「+」を先頭につけてます
  • これは「*」を先頭につけてます
  • これは「-」を先頭につけてます

段落

段落は、行と行の間に空行を入れれば自動的に段落が分けられる。

水平線

水平線は以下のいずれかで表示できます。
* *
*
**
- - -
—————————————

引用

引用は「>」をつけると、引用表示できます。
引用は以下のように組み合わせて使用することもできます。

  • 引用とリストの組み合わせて表示してます

リンク

以下の形式で表現します。

  • [リンクのテキスト](リンクのアドレス “リンクのタイトル”)
  • [リンクのテキスト](リンクのアドレス)

コード

コードは以下のような感じで表現します。
(グレイブアクセントを使用する)

1

p 'Hello!!'

上記は以下のように記載しています。

“`
p ‘Hello!!’
“`

画像

[画像の代替テキスト](画像のアドレス) という感じで記載します。
リンクと同じ方法ですね。

その他

エスケープ

markdownの先頭に「\」(バックスラッシュ)を追加すれば、エスケープできます。

インラインHTML

以下のようにしてインラインHTMLを書くこともできます。

1
2
3
4
5

<table>
 <tr>
  <td>表</td>
 </tr>
</table>
テーブル

残念ながらマークダウン記法では使用できません。
ですが、octpressでは使用することができます。
こちらのサイトを参考にさせて頂きました。

  • 以下のようなCSSファイルを作成します。(値は適宜調整してください)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

* + table {
    border-style:solid;
    border-width:1px;
    border-color:#e7e3e7;
    margin: 10px 0 30px 0;
}

* + table th, * + table td {
    border-style:dashed;
    border-width:1px;
    border-color:#8888AA;
}

* + table th {
    border-top:    1px #666688 solid;
    border-bottom: 2px #666688 solid;
    font-weight:bold;
    background-color: #C0C0C0;
    padding: 2px 9px;
}

* + table td {
    border-bottom: 1px #666688 solid;
    background-color: #F0F0F0;
    padding: 0 10px;
}

* + table th[align="left"], * + table td[align="left"] {
    text-align:left;
}

* + table th[align="right"], * + table td[align="right"] {
    text-align:right;
}

* + table th[align="center"], * + table td[align="center"] {
    text-align:center;
}
  • CSSを読み込むように「source/_includes/head.html」を編集します。
1

<link href="/stylesheets/table.css" rel="stylesheet" type="text/css">
  • 記述方法は以下のようにします
1
2
3
4
5
6
7
8

| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| This       |        This |     This     |
| column     |      column |    column    |
| will       |        will |     will     |
| be         |          be |      be      |
| left       |       right |    center    |
| aligned    |     aligned |   aligned    |

こんな感じで表示されます。 リスト同じく上下に空行は必須です。

Left align Right align Center align
This This This
column column column
will will will
be be be
left right center
aligned aligned aligned

とまぁ、こんなにあるけど覚えることが少ないので慣れればこちらのほうがいいかもしれないですね。