Markdown モード解説

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 の拡張機能の使用方法について解説します。

Markdown とは

Markdown は、文書を記述するための軽量マークアップ言語の一つです。もとはプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されました。
Markdown 記法には次のような特徴があります。

  • 簡単な記法で誰でも書ける
  • 自然な記法で誰でも読める
  • 文章を構造化できる

CommonMark の拡張

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

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

Markdown の原則

Markdown 記法の文書はタグやフォーマット命令でマークアップされたように見えず、そのままプレーンテキストとして公開できなくてはなりません。

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 |
Header1Header2
AppleLorem ipsum dolor sit amet
OrangeLorem ipsum dolor sit amet
BananaLorem ipsum dolor sit amet

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

| Header1 | Header2     |
| -------:| -----------:|
| Apple | Lorem ipsum dolor sit amet |
| Orange | Lorem ipsum dolor sit amet |
| Banana | Lorem ipsum dolor sit amet |
Header1Header2
AppleLorem ipsum dolor sit amet
OrangeLorem ipsum dolor sit amet
BananaLorem ipsum dolor sit amet

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

| Header1 | Header2     |
|:-------:|:-----------:|
| Apple | Lorem ipsum dolor sit amet |
| Orange | Lorem ipsum dolor sit amet |
| Banana | Lorem ipsum dolor sit amet |
Header1Header2
AppleLorem ipsum dolor sit amet
OrangeLorem ipsum dolor sit amet
BananaLorem ipsum dolor sit amet

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

| Header1 | Header2     |
|:-------:|:-----------:|
| Apple | Lorem ipsum dolor sit amet |
| Orange | Lorem ipsum dolor sit amet |
| Banana ||
Header1Header2
AppleLorem ipsum dolor sit amet
OrangeLorem 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 |
Header1Header2
AppleLorem
ipsum dolor sit amet
OrangeLorem ipsum
dolor sit amet
BananaLorem ipsum dolor
sit amet
Tip

テーブル記述の空白調整を時間をかけて行っていませんか?
Snow Flower Text は Markdown の プリティ・フォーマット(整形) をサポートしています。編集>>整形メニューをクリックすれば一瞬で自動整形され、見た目にも綺麗になります。

目次

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

[TOC]

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

脚注

脚注は主に参照スタイルのリンクのように機能します。 脚注は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.

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

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.
警告

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.

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

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.

関連文書

参考