Markdown モード解説

• CommonMark の拡張
  • 打ち消し線
  • 定義リスト
  • タスクリスト
  • 表
  • 目次
  • 脚注
  • Admonition
• 関連文書
• 参考

Snow Flower Text は Markdown 記法をサポートしています。文法をMarkdownモードに切り替えることで、高速なリアルタイム・プレビューで変換結果を確認しながら執筆ができます。執筆後には HTML、PDF、EPUB等の文書形式に簡単にエクスポートできます。Snow Flower Text は Markdown の標準仕様である CommonMark と互換性があり、加えてGithub等のサイトで一般的に使われているものも含む多くの拡張が利用できます。

これらの機能は Snow Flower Text をインストールするだけで追加のインストールなしに利用を始めることができます。

このHTML文書は Snow Flower Text の Markdown モードを使用して作成しています。Markdown モードは簡単なプライベートなノートや、公開文書にも幅広く利用できます。

この文書では Markdown の標準仕様である CommonMark の拡張機能の使用方法について解説します。

CommonMark の拡張

Markdown は2004年に John Gruber 氏によってリリースされたツールです。
Markdown の記法はそのシンプルさによってソフトウェア・エンジニアのコミュニティに広く採用されましたが、構文はv1.0.1 (2004) 以来、改訂されておらず多くの開発者が変種のツールを開発する状況になり、CommonMark の名称で標準化が進められることになりました。

MarkDownはHTMLの記事を簡単に書ける簡易マクロという位置付けで複雑なものは HTML タグを使う事になっています。CommonMark はまだ一般的な用途のカバーが十分ではありません。利用者は 「テーブル」、「定義リスト」、「脚注」 といった機能を望んでいます。

Snow Flower Text は 「Markdown の原則」 を維持したままで、これらの要望に応える CommonMark 拡張機能を提供します。

打ち消し線

囲まれたテキストが削除されたものであることを示す場合に打ち消し線のスタイルが使用できます。
打ち消し線のスタイルは対象の範囲のテキストを ~~（チルダ）で囲みます。

~~Strikethrough~~

Strikethrough

定義リスト

定義リストは、辞書のように、用語と定義の構成になります。定義リストは次のように記述します。

Term A
:	description

Term B
:	description

これは次のように表示されます。

Term A

description

Term B

description

タスクリスト

タスク・リストはリストの特殊化です。リストに似た記述になりリストと同様にネスト可能です。

* [ ] todo
* [x] done
  * [x] done

これは次のように表示されます。

•  todo
•  done
  •  done

表

テーブルは次のように記述します。

| Header1 | Header2     |
| ------- | ----------- |
| Apple   | Lorem ipsum dolor sit amet |
| Orange  | Lorem ipsum dolor sit amet |
| Banana  | Lorem ipsum dolor sit amet |

右寄せしたい列は次のように記述します。

| Header1 | Header2     |
| -------:| -----------:|
| Apple   | Lorem ipsum dolor sit amet |
| Orange  | Lorem ipsum dolor sit amet |
| Banana  | Lorem ipsum dolor sit amet |

勘が良い方はお分かりでしょう。中央寄せは次のように記述します。

| Header1 | Header2     |
|:-------:|:-----------:|
| Apple   | Lorem ipsum dolor sit amet |
| Orange  | Lorem ipsum dolor sit amet |
| Banana  | Lorem ipsum dolor sit amet |

セルの結合は次のように記述します。

| Header1 | Header2     |
|:-------:|:-----------:|
| Apple   | Lorem ipsum dolor sit amet |
| Orange  | Lorem ipsum dolor sit amet |
| Banana                              ||

セルの途中で強制的に改行させたい場合には本文と同様に <br> を挿入します。

| Header1 | Header2     |
| ------- | ----------- |
| Apple   | Lorem<br> ipsum dolor sit amet |
| Orange  | Lorem ipsum<br> dolor sit amet |
| Banana  | Lorem ipsum dolor<br> sit amet |

目次

文書の記述量が多くなってくると目次が欲しいと考えるでしょう。そんな時には目次を挿入したい箇所で[TOC]を記述します。

[TOC]

文書の見出しが自動で集められ目次が記述順に展開されます。見出しと目次が一致しないといったことは起きません。目次の整合性を維持するための労力は必要ありません。

• CommonMark の拡張
  • 打ち消し線
  • 定義リスト
  • タスクリスト
  • 表
  • 目次
  • 脚注
  • Admonition
• 関連文書
• 参考

脚注

脚注は主に参照スタイルのリンクのように機能します。 脚注は2つのものから成り立っています：上付き数字になるテキストのマーカー。 ドキュメントの最後に脚注のリストに配置される脚注定義。 脚注は次のようになります。

Footnote 1 link[^1].

そして忘れずに対になる脚注定義を次のように記述します。

[^1]: Footnote description

Admonition

Admonition を使うことで、情報や警告などのセクションをアイコンと色のスタイルで効果的に表現します。

例えば文書中で読者に警戒を促したい場合は次のように記述します。

!!! warning

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
 nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
 massa, nec semper lorem quam in massa.

このような表示になります。

Admonition のタイトルをカスタマイズしたい場合は次のように記述します。

!!! warning "警告"
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
 nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
 massa, nec semper lorem quam in massa.

次に挙げる Admonition の種類を指定することができます。

• info
• tip
• success
• question
• warning
• success
• failure
• danger
• bug
• example
• quote

!!! info
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
 nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
 massa, nec semper lorem quam in massa.

!!! tip
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
 nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
 massa, nec semper lorem quam in massa.

!!! success
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
 nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
 massa, nec semper lorem quam in massa.

!!! question
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
 nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
 massa, nec semper lorem quam in massa.

!!! warning
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
 nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
 massa, nec semper lorem quam in massa.

!!! failure
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
 nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
 massa, nec semper lorem quam in massa.

!!! danger
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
 nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
 massa, nec semper lorem quam in massa.

!!! bug
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
 nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
 massa, nec semper lorem quam in massa.

!!! Example
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
 nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
 massa, nec semper lorem quam in massa.

!!! Quote
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
 nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
 massa, nec semper lorem quam in massa.

これらは次のように表示されます。

関連文書

• Snow Flower Text 概要
• ユーザーガイド
• シンタックスハイライト

参考

• Markdown 1.0.1 – daringfireball.net
• CommonMark Spec – spec.commonmark.org