Redcarpetを使ったmarkdown記法サンプル

前提

Jekyllでmarkdownを書く際、デフォルトからRedcarpetに切り替え、各種エクステンションを読み込む前提になっています。

必要なエクステンション

config.ymlに記述するmarkdownに関する指定は以下の通りです。

# markdown
markdown: redcarpet
redcarpet:
  extensions: [
    "no_intra_emphasis",
    "fenced_code_blocks",
    "autolink",
    "tables",
    "footnotes",
    "strikethrough",
    "lax_html_blocks"
  ]

見出し - heading

見出しには下記のように6つのレベルがあります。
レベルの違いに注意して利用しましょう。

見出し lv.2

## 見出し lv.2

見出し lv.3

### 見出し lv.3

見出し lv.4

#### 見出し lv.4

見出し lv.5

##### 見出し lv.5

見出し lv.6

###### 見出し lv.6

段落と改行 - paragraph

段落はそのままテキストを記述します。改行を行いたい場合、行末にスペースを2つ追加して1段下げます。
この文章はここから改行されます。

段落はそのままテキストを記述します。改行を行いたい場合、行末にスペースを2つ追加して1段下げます。  
この文章はここから改行されます。

段落を分けるには、1行のスペースを空けます。

段落はそのままテキストを記述します。改行を行いたい場合、行末にスペースを2つ追加して1段下げます。  
この文章はここから改行されます。

段落を分けるには、1行のスペースを空けます。

引用

引用したい文章を書く

文字装飾 - inline

強調

強調したい文字 強調したい文字

**強調したい文字**

打ち消し線

打ち消したい文字

~~打ち消したい文字~~ 

リンク

リンクテキスト
target=“_blank"を指定する場合はHTMLで記述するか、JavaScriptを使い、処理させます。

[リンクテキスト](http://blog.nukos.kitchen)

水平線 - horizontal rule

下記の点線が水平線。HTMLとしてはHRタグとなる。

---

* * *

画像 - image

下記のように、代替テキストと画像のURLを指定します。

![代替テキスト](examples/thumbnail_960.png)

ポップアップ表示

画像にリンクを設定し、対象の画像をポップアップ表示させます。

[![代替テキスト](examples/thumbnail_960.png)](examples/thumbnail_960.png)

表 - table

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    |  

リスト - list

1. リスト1
2. リスト2
3. リスト3
   • リスト3-1
   • リスト3-2

1. リスト1
2. リスト2
3. リスト3
 + リスト3-1
 + リスト3-2

脚注 - footnote

文章の末端にアンカーを指定します。¹

SyntaxHighlight

SyntaxHighlightは「`」を3つ並べ、それをタグのように使って対象のソースコードを囲みます。

.highlight  {
    margin: 1em 0 0 0;
    padding: 20px;
    background: $GRAY_TORN_5 - #111;
    color: #f8f8f2;

    border-radius: 3px;
}