開発メモ

開発関係のメモをいろいろと。たぶん。

はてなで使えるMarkdown記法まとめ

個人的に気になった物だけ抜粋。

段落と改行

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

Markdown記法

段落途中の改行は →
← 無視される。
行末に半角スペースを2個以上入れると →  
← 改行になる。

実際の表示

段落途中の改行は → ← 無視される。 行末に半角スペースを2個以上入れると →
← 改行になる。

見出し

  • 行頭に最大6個の「#」をつける
  • 見やすさのため、行末に「#」をつけても良い

Markdown記法

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

実際の表示

見出し1

見出し2

見出し3

見出し4

箇条書き

  • 行頭に「*」をつけると箇条書きになる
  • 「*」の直後に半角スペースかタブが必要
  • 箇条書きの前後に空行が必要
  • 階層は半角スペース4つかタブ1つで表現

Markdown記法

* 階層1
    * 階層1-1
    * 階層1-2
* 階層2
* 階層3
    * 階層3-1

実際の表示

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

番号付きリスト

  • 基本的なルールは箇条書きと同じ
  • 「*」の変わりに半角数字+「.」を使用する
  • 数字は、並び順で自動的に割り振られる

Markdown記法

1. 階層1
    1. 階層1-1
    2. 階層1-2
2. 階層1
3. 階層1

実際の表示

  1. 階層1
    1. 階層1-1
    2. 階層1-2
  2. 階層1
  3. 階層1

※引用記法の中で番号付きリストを使う場合、なぜか、半角スペース4つを使わないと階層化できない(=タブ1つでは正常に階層化されない)

表組み

  • 1行目に項目名を「|」で区切って記入
  • 2行目に「-」を項目の数だけ区切って記入
    2行目の「-」の両端に「:」をつけることで、どこに寄せるか指定可能
  • 3行目以降に実際のデータを書く
  • 左右両端の「|」は省略可能
  • 整形のための半角スペース・タブは省略可能

Markdown記法

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

Markdown記法(省略形)

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

実際の表示

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

引用記法

  • 引用文を表現する記法
    HTMLで言うところの<blockquote>
  • 引用文の行頭に「>」をつける
  • 複数の「>」をつける事で、階層化も可能
  • 引用文の中もMarkdown記法として解釈される
  • 段落の1行目に「>」をつければ、段落全体が引用になる

Markdown記法

>これが引用文
>> 入れ子も可能

実際の表示

これが引用文

入れ子も可能

pre記法

  • 整形済みテキストを書くための記法
    HTMLで言うところの<pre>
  • 行頭に4つ以上の半角スペースか1つ以上のタブをつける
  • もしくは、段落の前後に「```」ではじまる行をつける
  • 「```ruby」といった形で、書式を指定してシンタックスハイライトを行うことも可能

Markdown記法(行頭にタブ)

require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html

実際の表示(行頭にタブ)

  require 'redcarpet'
  markdown = Redcarpet.new("Hello World!")
  puts markdown.to_html

※引用記法の中でpre記法を使う場合、なぜか、半角スペースやタブの数が正常に反映されない

Markdown記法(シンタックスハイライト)

```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```

実際の表示(シンタックスハイライト)

require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html

※引用記法の中では、「```」で前後を囲む形式のpre記法は正常に動作しない

code記法

  • 文章の一部にHTMLタグやソースコードを埋め込む記法
    HTMLで言うところの<code>
  • 「``」で前後を囲む

Markdown記法

こんな感じで「``int main(void)``」埋め込む。

実際の表示

こんな感じで「int main(void)」埋め込む。

強調表記

  • 前後を1から3個の「*」で囲む

Markdown記法

*強調記法、その1*
**強調記法、その2**
***強調記法、その3***

実際の表示

強調記法、その1
強調記法、その2
強調記法、その3

水平罫線記法

  • 3つ以上の「-」か「*」か「_」で構成された行

Markdown記法

---------------------------------------------------
***************************************************
___________________________________________________

実際の表示




※「-」の形式を使う場合、直前の行を空行にしないと見出し記法と見なされてしまう

埋め込みリンク記法

  • [リンクする文字列](URL)」の書式で記入
    [リンクする文字列](URL "リンクへのツールチップ")」 という書式も可能
  • [リンクする文字列][ID]」という書式でも可能
    この場合、実際のURLは「[ID]: URL」という形式で別の場所に記述する

Markdown記法

[GitHub Flavored Markdown · GitHub Help](https://help.github.com/articles/github-flavored-markdown)
[はてなブログで「Markdown記法一覧」を書いてみるテスト - そっと、はてなブログ][url1]
URLを分離。
[url1]:http://mametanuki.hateblo.jp/entry/2012/09/22/MarkdownList

実際の表示

GitHub Flavored Markdown · GitHub Help
はてなブログで「Markdown記法一覧」を書いてみるテスト - そっと、はてなブログ
URLを分離。
※引用記法の中では、URLを分離する書式は正常に動作しない

要調査

  • 目次を作るのは自力でやるしかない?

情報元

はてなブログで「Markdown記法一覧」を書いてみるテスト - そっと、はてなブログ
http://mametanuki.hateblo.jp/entry/2012/09/22/MarkdownList

blog::2310 » Markdown文法の全訳
http://blog.2310.net/archives/6