Webとデザインのあれこれ

プログラミングとUIデザインの学習記録です。

Markdownのsyntaxまとめ

Markdown

Markdown記法について

本記事では手軽なシンタックスでHTMLで作成したような文章が書けるMarkdownについて取り上げます！

Markdownとは

2004年にジョン・グルーバー（John Gruber）によって開発された言語です。 主な特徴として、以下が挙げられます。

  1. プレーンテキストのように直感的で書きやすい
  2. タグなどの記載が不要のため、読みやすい

直接HTMLでマークアップするのとは異なり、まるでメールを書いているかのように自然に書けるのが大きなメリットです。

また、Perlで書かれたツールを使用するとHTMLに自動変換もしてくれます。 便利ですね！

ただ、対応していないWebサービスも存在します。Evernoteなどはその代表です。主要なブログサービスなどはほぼ対応していると言って、差し支えない状況です。

では、シンタックスに入りましょう！

Markdown記法の基本的なシンタックス

見出し・リスト

# タイトル
## 大見出し
### 小見出し
- unorderedリスト
* unorderedリスト
+ unorderedリスト
1. orderedリスト
2. orderedリスト
  • 見出しを記載する場合、#の後にスペースを必ず入れましょう。
  • リストを使用する際は、上下の空行と「-」「*」「+」後のスペースに注意しましょう。
  • 連番型のリストについては一旦全て1.で作成しておくと、後の変更時に便利です。

また、definition型のリストに関してはHTMLのdlタグをそのまま使用することで対応可能となります。

<dl>
  <dt>リンゴ</dt>
  <dd>赤いフルーツ</dd>
  <dt>オレンジ</dt>
  <dd>橙色のフルーツ</dd>
</dl>

強調表現

**強調**
_イタリック_
`コード表記`

バッククウォート(` `)を使用すると、例えば `var sum = 10`はvar sum = 10のようにコードに変換されます。

リンク

[リンクテキスト](URL)  #inline表記でタイトルなし

[リンクテキスト](URL "title") #inline表記でタイトルあり

[リンクテキスト][id]

[id]:URL "title" #referenceスタイル

[リンクテキスト][]

[リンクテキスト]:URL #ショートカット 
例.

I get 10 times more traffic from [Google] [1] than from
[Yahoo] [2] or [MSN] [3].

  [1]: http://google.com/        "Google"
  [2]: http://search.yahoo.com/  "Yahoo Search"
  [3]: http://search.msn.com/    "MSN Search"


I get 10 times more traffic from [Google][] than from
[Yahoo][] or [MSN][].

  [google]: http://google.com/        "Google"
  [yahoo]:  http://search.yahoo.com/  "Yahoo Search"
  [msn]:    http://search.msn.com/    "MSN Search"

画像

![代替テキスト](画像パス)

![代替テキスト](画像パス ”タイトル”)

引用

>文章

文頭に>をつけて、そのまま文章を記載すれば引用の完成です！引用内でも見出しやリストなど、Markdownは使用可能です。

最後に

本記事では基本レベルのものに限定して取り上げております。

Markdown記法は、チェックボックスや打ち消し表現など多岐に渡ります。
その他のシンタックスにつきましては、公式ドキュメントをご参照下さい。

また、このブログもMarkdownで書かれております。

文中の説明時に、\を使用することでエスケープをしています。

バックスラッシュエスケープはHTML同様使用可能ですので、補足となります。

以上です！