Markdownの原典。Daring Fireballを読む

# はじめに

ソフトウェアエンジニアと密に仕事をしてきたので、主に職場のWikiの利用でMarkdown記法をよく使ってきた。

法則に従って書くときれいに整形してくれるもの、くらいの認識だったが、ある時、当時一緒に働いていたベテランエンジニアが、Markdownのしくみや思想を、非エンジニアである私にもわかるように教えてくれた。

その時紹介された「原典」である[Daring Fireball: Markdown](https://daringfireball.net/projects/markdown/)を改めて読んだので、個人的に勉強になったと思えたことを中心にまとめていきたい（記法のチートシートではありません）。

# Daring Fireball: Markdown を読む

## Markdownとはなにか

「Webで文章を書く人のための、テキストからHTMLへの変換ツール」。

> Markdown is a text-to-HTML conversion tool for web writers. 

もう少しブレイクダウンすると、「(1) プレーンテキストの書式整形記法であり、(2) Perlで書かれたプレーンテキストからHTMLへの変換ツール」。

> “Markdown” is two things: (1) a plain text formatting syntax; and (2) a software tool, written in Perl, that converts the plain text formatting to HTML. 

（"[Daring Fireball: Markdown](https://daringfireball.net/projects/markdown/)" Mainより）

開発者は [John Gruber](https://en.wikipedia.org/wiki/John_Gruber)。Daring Fireballというのはこの人のブログの名前だ（「大胆な火の玉」と名付けた由来が気になって調べて見つけた[このサイト（Quora）](https://www.quora.com/What-is-the-story-behind-the-name-Daring-Fireball-for-John-Grubers-website#:~:text=Since%20he%20describes%20sites%20which,a%20site%2C%20hence%20daring%20fireball.) には、この人が幼いころにスタントマンにあこがれていたことと関係があると書いてあった。が、それ以上のことは私の英語力の限界で理解できなかった）。

このブログに、彼の数々のプロジェクトの一つとしてMarkdownの解説と使い方が掲載されている。

後にも出てくるようにMarkdownが徹底的に「読みやすさ」を追求しているのは、この人がUIデザイナーであることと無関係ではないだろう。

## 全体像

### Markdown

Markdown記法では、**変換する前のテキストがよみやすいこと**、を一番重要視している。一番のインスピレーションは、表現の制約のあるプレーンテキストで書かれたeメール。

\*強調するための太字\*、とか、\-  箇条書き、等、が、記号の使い方・見た目からそのままその意図が伝わるように考えられている。

> To this end, Markdown’s syntax is comprised entirely of punctuation characters, which punctuation characters have been carefully chosen so as to look like what they mean. E.g., asterisks around a word actually look like *emphasis*.

（"[Daring Fireball: Markdown](https://daringfireball.net/projects/markdown/syntax#philosophy)" Syntaxより）

### HTMLとの関係

前述の通り、Markdownはプレーンテキストを書きやすくするための記法。

閲覧に適した表記にパブリッシュするためのHTMLとは位置づけが異なるものの、HTMLタグはそのまま使えるようになっている。Markdownで定義されていない表現を使いたいときは、定義されている表現をHTMLタグを使って書き直すことも可能。
ただし、ブロック要素のHTMLタグを使いたい場合は、空行を前後に入れること。

> Markdown’s syntax is intended for one purpose: to be used as a format for writing for the web.

（"[Daring Fireball: Markdown](https://daringfireball.net/projects/markdown/syntax#html)" Syntaxより）

### 特殊記号の取扱い

HTMLでは、&, <, >は特別な意味を持つため、文中で書く場合はそれぞれ「\&amp;」「\&lt;」「\&gt;」と書くことで意識してエスケープする必要があるが、Markdownではそのエスケープの要不要を意識する必要がない。

> Markdown allows you to use these characters naturally, taking care of all the necessary escaping for you.

（"[Daring Fireball: Markdown](https://daringfireball.net/projects/markdown/syntax#autoescape)" Syntaxより）

## ブロック要素

### 段落と改行

文末の改行は新しい段落とみなされない[^1]。段落を変えたいときは2回（以上）改行して空行を入れるか、文末にスペースを1つ（以上）入力して改行する。

> The implication of the “one or more consecutive lines of text” rule is that Markdown supports “hard-wrapped” text paragraphs.

（"[Daring Fireball: Markdown](https://daringfireball.net/projects/markdown/syntax#p)" Syntaxより）

### 引用

引用はEメールでよく見るスタイルをそのまま採用。
行の先頭に一つつけた引用マーク「>」は、途中で改行があっても、前述のルール通り同じ段落とみなされている限り有効。

> Markdown uses email-style > characters for blockquoting.

（"[Daring Fireball: Markdown](https://daringfireball.net/projects/markdown/syntax#blockquote)" Syntaxより）

### 箇条書き

箇条書きの記号は一番左端に書くことが多いが、1つ～3つの空白でインデントしてもよい。記号の後ろは1つ以上の空白が必要。

箇条書きリストの中に複数の段落を表現する場合は、空行を入れて4つの空白かタブインデントする。

> List markers typically start at the left margin, but may be indented by up to three spaces. List markers must be followed by one or more spaces or a tab.

（"[Daring Fireball: Markdown](https://daringfireball.net/projects/markdown/syntax#list)" Syntaxより）

### コードブロック

4つの空白か、タブを入れるとコードブロックを作成できる。

> To produce a code block in Markdown, simply indent every line of the block by at least 4 spaces or 1 tab.

（"[Daring Fireball: Markdown](https://daringfireball.net/projects/markdown/syntax#precode)" Syntaxより）

## スパン要素

### リンク

インラインスタイルとリファレンススタイルがある。特にリファレンススタイルのリンクをHTMLで表現しようとすると、かなり読みづらくなる。ここでシンプルにかつ人間にとって読みやすくできるのがMarkdownの価値。

> In the raw HTML, there’s more markup than there is text.
（"[Daring Fireball: Markdown](https://daringfireball.net/projects/markdown/syntax#link)" Syntaxより）

### コード

前述のコードブロックとは違い、段落の中で使える。

> To indicate a span of code, wrap it with backtick quotes (`). Unlike a pre-formatted code block, a code span indicates code within a normal paragraph. 

（"[Daring Fireball: Markdown](https://daringfireball.net/projects/markdown/syntax#code)" Syntaxより）

# おわりに

まとめていて、ベテランエンジニアからの教えを思い出し復習できただけでなく、HTMLの基礎知識が足りないことにも気づくことができた。今使いこなせていない書き方（例：リファレンススタイルリンク）は、今後Qiitaで記事を書く時等に使っていきたい。

# 参考文献

-   [BRタグとは～改行してHTML構築するための基本知識｜SEOラボ](https://seolaboratory.jp/65167/)
-   [ブロックレベル要素とインライン要素－HTMLの基本](http://www.htmq.com/htmlkihon/005.shtml)

[^1]: Markdownにはいくつか「方言」があるようで、Qiitaで採用されているMarkdownでは改行がそのまま反映される。