Table of contents
Jekyll の Markdown について
- Markdown: Syntax (daringfireball.net) [EN]
- kramdown Documentation (kramdown.gettalong.org) [EN]
- CommonMark Spec (commonmark.org) [EN]
- Mastering Markdown (gitHub.com) [EN]
- GitHub Flavored Markdown Spec (gitHub.com) [EN]
- Docs Markdown リファレンス (microsoft.com)
- Markdown記法 チートシート (qiita.com)
見出しと改行
マークダウン:
# Header 1 >> <h1>Header 1</h1>
## Header 2 >> <h2>Header 2</h2>
### Header 3 >> <h3>Header 3</h3>
強制的に改行を入れたい場合は、行末に2つ以上のスペースを入力して改行します。 これは<br />に変換されます。
スタイル
マークダウン:
_斜体_ >> <em>斜体</em>
**太字** >> <strong>太字</strong>
~~打ち消し線~~ >> <del>打ち消し線</del>
表示:
斜体
太字打ち消し線
マークダウン:
> 引用文 >> <blockquote>引用文</blockquote>
表示:
引用文
リスト
順序なしリスト
-, *, + のどれでも良い
マークダウン:
- Item
* Item
+ Item
表示:
- Item
- Item
- Item
- Item
順序付きリスト
マークダウン:
1. Item 1
1. Item 2
1. Item 3
表示:
- Item 1
- Item 2
- Item 3
タスクリスト
マークダウン:
- [ ] Incomplete item
- [x] Complete item
表示:
- Incomplete item
- Complete item
リンク
マークダウン:
A [link](http://example.com). >> <a href="http://example.com">link</a>
A [link](http://example.com "Title").
>> <a href="http://example.com" title="Title">link</a>
An image:  >> <img src="img.jpg" alt="Alt">
An image with class: {:.img-class}
>> <img src="img.jpg" alt="Alt" class="img-class">
コード
インラインコード
マークダウン:
Some `inline code`.
表示:
Some inline code.
コードブロック
マークダウン:
```
// A code block
var foo = 'bar';
```
表示:
// A code block
var foo = 'bar';
色付きコードブロック
マークダウン:
```javascript
// An highlighted block
var foo = 'bar';
```
表示:
// An highlighted block
var foo = 'bar';
テーブル
マークダウン:
Item | Value
-------- | -----
Computer | $1600
Phone | $12
Pipe | $1
表示:
| Item | Value |
|---|---|
| Computer | $1600 |
| Phone | $12 |
| Pipe | $1 |
文字揃え
マークダウン:
| Column 1 | Column 2 |
|:--------:| -------------:|
| centered | right-aligned |
表示:
| Column 1 | Column 2 |
|---|---|
| centered | right-aligned |
定義リスト
マークダウン:
Markdown
: Text-to-HTML conversion tool
表示: (HTMLの略記表示は次項に定義があるため)
- Markdown
- Text-to-HTML conversion tool
マークダウン:
Authors
: John
: Luke
表示:
- Authors
- John
- Luke
略記
マークダウン:
Markdown converts text to HTML.
*[HTML]: HyperText Markup Language
表示:
Markdown converts text to HTML.
脚注
マークダウン:
Some text with a footnote.[^1]
[^1]: The footnote.
表示: (脚注の表示はページ下部)
Some text with a footnote.1
目次
順序なしリストを使った目次
マークダウン:
- TOC
{:toc}
順序付きリストを使った目次
マークダウン:
1. TOC
{:toc}
折り畳みできる目次
マークダウン:
<details open markdown="block">
<summary>Table of Contents</summary>
- TOC
{:toc}
</details>
目次からの除外
見出しにno_tocクラスを付加することで目次から除外することができる。
マークダウン:
## Header
{:.no_toc}
関連ページ
ID と CLASS
CLASSやIDは英文字で始める必要があります。
ASCII英文字、数字、’_‘、’-‘、’.’以外の文字はHTML 4で許容されていなかったため、 使用した場合に互換性の問題を引き起こす可能性があります。 この制約はHTML5で外されましたが、互換性のためにIDは文字で始めるように しましょう。
出典： MDN Web Docs
インライン要素
マークダウン:
[link](http://example.com){:.add-class}
>> <a href="http://example.com" class="add-class">link</a>
[link](http://example.com){:#add-id}
>> <a href="http://example.com" id="add-id">link</a>
ブロック要素
マークダウン:
## Header
{:.add-class}
>> <h2 class="add-class">Header</h2>
## Header
{:#add-id}
>> <h2 id="add-id">Header</h2>
The footnote. ↩
関連ページ
ブログ記事
下記に掲載を希望される方はご連絡ください (詳細)
- Markdownで文書を書くためにやったこと一覧 (qiita.com)
- markdownの「折りたたみ」の機能 (masalib.hatenablog.com)
- JekyllのMarkdownで画像にクラスやIDを付ける書き方 (worktoolsmith.com)
- Markdown記法まとめ(リスト、リンク、画像、インラインHTML、エスケープ)[2/3] (cartman0.hatenablog.com)
- img and or link with Markdown (atwiki.jp)