Markdown記法の私的メモとはてなブログでの実践

Markdown記法について調べたので、記述の実践とはてなブログでの表示の確認を行う。

段落と改行

改行を行うには文末に2つのスペースを入力。通常の改行だと同じ段落として文章が続く。段落を変えるには以下のように空白の行を挟む。

段落1
(空白の行)
段落2

文字の装飾

斜体

文字列を斜体にする場合はアスタリスクで括る。

*斜体*

太字

太字にする場合はアスタリスク2つで括る。

**太字**

ソースコード

インラインでソースコードなどを表記する際には、以下のように逆クォートで括る。

`some code`

複数行に渡るコードの場合は、各行の行頭に4つ以上のスペースを入力する。うまく働かない場合は、直前に空白の行を入れるとよい。等幅フォントで表記されるという点で次の引用とは異なる。

____some code
____other code

引用

引用された段落の記述には、不等号を行頭につける。改行しても反映されないため、引用文で改行したい場合には行毎に不等号をつければよい。

> 引用文。改行無視

見出しとリスト

見出し

見出し文では行頭にシャープを置く。シャープの数と見出しレベルが対応しており、6まで設定できる。

# レベル1の見出し
## レベル2の見出し

また、見出しをまとめた目次の作成*1や、見出しへのリンクの作成には対応していない模様。

リスト

いわゆる箇条書き。番号なしの箇条書きは3種類の記号が使える。見出しの場合と異なり、記号の後はスペースが必要。さらに直前には空白の行が必要。

(空白の行)
* 番号なしリスト
- 番号なしリスト
+ 番号なしリスト

さらにインデントされたリストを加えるには、行頭に2つ以上のスペースを入力する。(4つを推奨)

* 番号なしリスト
    * サブアイテムのリスト

番号付きの箇条書きは、以下のように数字とピリオドを用いる。

1. 番号付きリスト

リンク

リンク

リンクの記法は以下。

[リンク元のテキスト](リンク先のアドレス "リンク先を表すタイトル")

リンクの参照

上のリンクだと編集画面が煩雑になるが、以下の記法でリンク先アドレスを参照する形で記述し本文を見やすくすることが可能。また、同じアドレスと参照すれば何度もリンクする際に使い回すことができ、楽。

[リンクのテキスト][hogehoge]

文書の最後などに次のような記述を行い、参照リンクとして機能させる。

[hogehoge]: リンク先のアドレス "リンク先を表すタイトル"

アドレスを直接リンク

テキストにリンクを張らずに、アドレスを直接リンクとして機能させるには以下のように不等号で括って記述する。

<URL or MailAddress>

脚注

はてなブログではMarkdown記法は利用できなかった。はてな記法による書き方は以下。

((脚注文))

括弧を含めた部分が「アスタリスク+連番」に置き換えられ、本文末尾に括弧内の文が脚注として記される。ちなみにMarkdownでの書き方は以下。

[^任意の文字列]

同様の文字列を本文末尾などに記し、脚注文をその後に記す形となる。記事の末尾だけでなく、段落終わりなどにも脚注を記せるメリットがある。

画像

上述のリンク方法の先頭にエクスクラメーションマークを付した形となる。

![置換文字列](画像のアドレス "画像タイトル")

同じく参照タイプ。

![置換文字列][hogehoge]
[hogehoge]: 画像のアドレス "画像タイトル"

表組み

表組みにはパイプ記号(|)を利用する。列をパイプ記号で区切る。項目名などを入力する行とデータの行は下の2行目のようにハイフンを使った行で区切る。

|名前|個数|価格|
|-|-|-|
|りんご|1|70円|

両端のパイプ記号は省略可。また、2行目の区切り部分では、ハイフンの右端にコロンを置くことで、列全てを右寄せ表示、ハイフン両端にコロンで中央寄せにできる。

名前|個数|価格
-|-:|:-:
りんご|1|70円

その他

水平線

水平線の描画には3つ以上のハイフンを使う。

---

バックスラッシュで文字そのもとして解釈

ここまで出た記号を記号そのものとして入力するには、記号前にバックスラッシュを置く。

\*

標準のMarkdown記法でサポートされないもの

目次、定義リストは標準のMarkdown記法では使用できないらしく、はてなブログでもMarkdown記法モードでは利用できない。

以上、常用しそうなMarkdown記法と、そのはてなブログへの対応状況の確認でした。

Webサービスのつくり方 ~「新しい」を生み出すための33のエッセイ (Software Design plus)

Webサービスのつくり方 ~「新しい」を生み出すための33のエッセイ (Software Design plus)

*1:Wikipediaによくあるあれ