Markdown (kramdown) の記法
Jekyll でページを作成する際にマークダウンの書き方がいちいちわからないのでまとめてみました。
僕の環境では kramdown を使用しているのですべては kramdown - Quick Reference でこと足りるのですが…
このページは Bootstrap(少しカスタマイズ) を使用しているので、表示はそれに従った表示になっています。
ブロックレベル要素
- 段落 - <P>
- ヘッダー - <Hn>
- 引用 - <BLOCKQUOTE>
- コードブロック - <PRE>
- 水平線 - <HR>
- リスト - <OL>
- 定義型リスト - <DL>
- テーブル - <TABLE>
- HTML要素 - <DIV>, <P> …
- ブロック要素の属性
- エクステンション
スパンレベル要素
ブロックレベル要素
段落 Paragraphs
syntax
１行目△△ // △半角スペース
２行目 (同一段落になります。)
３行目 (空行をはさんでいるので、別段落になります。)
view
１行目
２行目 (同一段落になります。)
３行目 (空行をはさんでいるので、別段落になります。)
html
<p>
１行目<br />
２行目 (同一段落になります。)
</p>
<p>
３行目 (空行をはさんでいるので、別段落になります。)
</p>
ヘッダー Headers
syntax
# H1 header
## H2 header
### H3 header
#### H4 header
##### H5 header
###### H6 header
view
H1 header
H2 header
H3 header
H4 header
H5 header
H6 header
引用 Blockquotes
syntax
> A sample blockquote.
>
> >Nested blockquotes are
> >also possible.
>
> ## 引用の中でもヘッダー(ブロック要素)は有効です
> This is the outer quote again.
view
A sample blockquote.
Nested blockquotes are also possible.
引用の中でもヘッダー(ブロック要素)は有効です
This is the outer quote again.
コードブロック Code blocks
段落を変えて４つのスペースを挿入するとコードブロックに。 (空行がなくて、段落の先頭じゃないと認識されないので注意。)
syntax
This is a sample code block.
Continued here.
view
This is a sample code block.
Continued here.
その他
コードを ~~~ や ``` で括ります。
syntax
``` Java
public class Hoge {
private int count;
・・・
}
```
view
public class Hoge {
private int count;
// ・・・
}水平線 Horizontal Rules
syntax
* * *
---
_ _ _ _
---------------
view
リスト Lists
数値のリスト
数字の後にピリオドと半角スペースを入力してなんか書きます。
数字は勝手に採番するので全部 1 でも構いません。
ネストしたリストは半角スペースを入れるとなんか勝手にやってくれるけど (曖昧) ネストした項目は自動採番だけしてくれないので自分で振ってます。
syntax
1. リストの項目１
1．項目１－１
1．項目１－２
1. リストの項目２
3. リストの項目３
続く項目
view
- リストの項目１ 1．項目１－１ 1．項目１－２
- リストの項目２
- リストの項目３ 続く項目
順序なしリスト
順序なしリストは、段落の先頭で *, +, - と半角スペースで項目を列挙します。
syntax
* 項目1
+ 項目2
- 項目3
view
- 項目1
- 項目2
- 項目3
定義型リスト Definition Lists
HTML の定義型 (DTタグ) を表現します。
定義 (DT) と定義の説明 (DD) のセット。間に空行があっても一つの DL タグにくくられるみたい。
syntax
定義
: 定義の説明１
: 定義の説明２
定義
その他の定義
: 定義の説明
view
- 定義
- 定義の説明１
- 定義の説明２
- 定義
- その他の定義
- 定義の説明
テーブル Tables
| で括って書きます、前後にスペースなくても認識してくれるみたいです。
一つ以上の - でHEADERとBODYを分けてくれます。 また = でBODYとFOOTERを分けてくれます。
:- は左寄せ、:-: は中央寄せ、-: は右寄せになります。
: でアライメントを指定しない場合、ヘッダーは中央寄せ、データは左寄せになります。
僕の CSS (Bootstrap) はちょっと変更して無条件で罫線を引く設定になっているので罫線が引かれていますがデフォルトひかれないことが多いと思います。
syntax
| A simple | table |
| with multiple | lines|
|名前|年|都道府県|
|:---|:-:|---|
|maeda|42|北海道|
|maeda|42|北海道|
|=|=|=|
|フッター1|フッター2|フッター3|
view
| A simple | table |
| with multiple | lines |
| 名前 | 年 | 都道府県 |
|---|---|---|
| maeda | 42 | 北海道 |
| maeda | 42 | 北海道 |
| フッター1 | フッター2 | フッター3 |
ブロック要素の属性 Block Extentions
ブロック要素に属性を割り当てるにはブロック要素の後に {:} で属性を指定します。
クラスを指定する場合は {: .ClassName} ID を指定する場合は {: #ID} で可能です。
syntax
##### 普通のタイトル
##### 属性を付けたタイトル
{: style="color: red; margin-left: 15px"}
##### クラス名を指定する場合
{: .text-info}
view
普通のタイトル
属性を付けたタイトル
クラス名を指定する場合
ALD, ILD についてはよくわからないのでまた今度。
エクステンション Extensions
コメントは {::comment}{:/comment} で括ります。
文字列をマークダウンとして処理したくない場合は {::nomarkdown}{:/} で括ります。
syntax
タイトル
{::comment}
ここはコメントなので表示
されることはありません。
{:/comment}
ここは表示されます。
文字列を**太字**にする場合は {::nomarkdown}**太字**{:/} のように書きます。
view
タイトル
ここは表示されます。
文字列を太字にする場合は **太字** のように書きます。
スパンレベル要素
強調 emphasis
* は Emphasis, ** は Strong となっていますが、日本語の Emphasis は違いが判りません。
syntax
これは *日本語 Emphasis* です。
これは **太文字** です。
これは __太文字__ です。
view
これは 日本語 Emphasis です。
これは 強調文字 です。
これは 強調文字 です。
リンク Links
syntax
これは [リンク](http://mae0003.github.io) です。
これは [情報付きリンク](http://mae0003.github.io "リンク情報(マウスホバーで見れるよ)") です。
{: style="margin-left: 30px"}
view
画像 Images
syntax
これは  です。
[] の中は画像が存在しない場合に表示されます。 
view
これは 
です。
[] の文字は画像が存在しない場合に表示されます。 
インライン コード Inline Code
syntax
インラインコードは `Code` のように。
これも ```Hoge::method()``` できます。
view
インラインコードは Code のように。
これも Hoge::method() できます。
脚注 Footnotes
脚注の説明内容はページの一番下のほうに表示されるので注意。
syntax
タイトル
: 項目1[^1].
: 項目2[^2].
[^1]: 脚注1.
[^2]: 脚注2.
view
インライン要素の属性 Inline Attributes
インライン要素の後に {: } で指定します。インライン要素と中括弧の間にスペースがあると認識されませんでした。
syntax
[Google](www.google.com){: style="margin-left: 40px"}
**赤く太く**{: style="color: red;"}
view
Google 赤く太く
空 space
syntax
view
