Markdown記法 チートシート / 学習メモ

はじめに

この記事は、以下のQiita記事の学習メモになります。コピペではないので（部分的にはありますが..）、何卒ご容赦ください。

Code - コードの挿入

・バッククオート(```)を使用することで、シンタックスハイライトが適用される。
ただし、コードブロック上下に空行を挿入しないと正しく表示されないことがあるので注意する。
・現状では、ファイル名部分には半角スペースを直接使うことができない。その場合は、全角スペースか、 のようなHTML文字参照で代用可能。

例えば、ファイル名を「qiita.rb」として投稿したいときは、以下のように記載する。

(空行)
ruby:qiita motto.rb　(2)
puts 'The best way to log and share programmers knowledge.'

(空行)

↓事項結果

qiita motto.rb　(2)

puts 'The best way to log and share programmers knowledge.'

インライン表示

・バッククオーテーションで挟むと、コードのインライン表示が可能になる。

`puts 'Qiita'`はプログラマのための技術情報共有サービスです。

puts 'Qiita'はプログラマのための技術情報共有サービスです。

・インラインコードがn個連続するバッククオートを含む場合、n+1連続のバッククオートで囲むことで、インラインの中でバッククオートを表現可能。

・インラインコードの中身が CSS の 型の RGB 16進数表記, rgb(), rgba(), hsl(), hsla() 場合横にその色が表示される。
`#ffce44`
`rgb(255,0,0)`
`rgba(0,255,0,0.4)`
`hsl(100, 10%, 10%)`
`hsla(100, 24%, 40%, 0.5)`

#ffce44
rgb(255,0,0)
rgba(0,255,0,0.4)
hsl(100, 10%, 10%)
hsla(100, 24%, 40%, 0.5)

Format Text - テキストの装飾

Headers - 見出し

頭文字に#をつけることで、見出しにすることができる。サイズは#の数で、順にH1,H2,H3,...とサイズ調整ができる。
・# これはH1タグです
・## これはH2タグです
・###### これはH6タグです

Emphasis - 強調・強勢

_ か * で囲むとHTMLのemタグになる。Qiitaでは*イタリック体*になる。
__ か ** で囲むとHTMLのstrongタグになる。Qiitaでは**太字**になる。

Strikethrough - 打ち消し線

打ち消し線を使うには ~~ で囲む。

打ち消し

Details - 折りたたみ

・追加情報としたい内容を、detailsタグで囲む。
・そのうち、要約として表示したい文章をsummaryタグで記載する

Qiitaとは

<details><summary>Qiita(キータ)は、プログラマのための技術情報共有サービスです。</summary>プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。</details>
折りたたんだ部分でMarkdownを使いたい場合は、折りたたまれる部分全体を<div>タグで囲う。

Qiita(キータ)は、プログラマのための技術情報共有サービスです。

プログラミングに関することをどんどん投稿して、知識を記録、共有しましょう。

puts 'Hello, World'

Note - 補足説明

・目を引く形で補足説明をしたい場合、補足したい内容を:::note infoと:::で囲う。infoは省略可能。
・警告の場合、:::note warnと:::で囲う
・強い警告の場合、:::note alertと:::で囲う

インフォメーション

警告

より強い警告

List - リスト

Disc型

文頭に 「」 「+」 「-」　のいずれかを入れるとDisc型のリストになる。ただし、リストを挿入する際は、リストの上下に空行がないと正しく表示されない。また、 「」 「+」 「-」　の後にはスペースが必要。

* アイウエオ
* カキクケコ

• アイウエオ
• カキクケコ

Decimal型（10進数）

1. 文頭に「数字.」を入れるとDecimal型リストになる
2. 後からの挿入/移動を考慮して、1.2.3.と順番にするのではなく、1.1.1.という風に同じ数字にしておくと便利
3. リストを挿入する際は、リストの上下に空行が必要。また、「数字.」の後にはスペースが必要。

Definition型

• HTMLの<dl>タグをそのまま使うことで実現できる
• Definition型のリスト内ではMarkdown記法が使えない。Definition型リスト内ではMarkdown記法ではなくて、HTMLタグを使って修飾しなければならない

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

リンゴ

赤いフルーツ

オレンジ

橙色のフルーツ

<dl>
  <dt>リンゴ</dt>
  <dd> とても<strong>赤い</strong>フルーツ </dd>
</dl>

Checkbox型

• Disc型の記述の後ろに[]を入れるとチェックボックスが生成される
• チェックが入った状態のボックスを生成する場合は[x]を入力する。もちろん、前後にはスペースが必要!

- [ ] タスク1
- [x] タスク2

• タスク1
• タスク2

Blockquotes - 引用

文頭に>を置くことで引用になります。
複数行にまたがる場合、改行のたびにこの記号を置く必要があります。
引用の上下にはリストと同じく空行がないと正しく表示されません
引用の中に別のMarkdownを使用することも可能です。

これはネストされた引用です。

Horizontal rules - 水平線

• 水平線を描画するには、以下複数の書き方がある

* * * 
***
*****
- - -
--------------------------

---

---

---

---

---

Links - リンク

• [リンクテキスト](URL "タイトル") → タイトル付きのリンクを投稿できる

Markdown : [Qiita](http://qiita.com "Qiita　Home")

結果 : Qiita

• [リンクテキスト][名前] → 同じURLへのリンクを複数箇所に設定することができる

Markdown :
[ここ][link-1]と[この][link-1]リンクは同じになります。
[link-1][] も可能です。
[link-1]:http://qiita.com/drafts/c686397e4a0f4f11683d

結果 :
こことこのリンクは同じになります。
link-1 も可能です。

Images - 画像埋め込み

• ![代替テキスト](画像のURL)　→ タイトル無しの画像を埋め込む

• ![代替テキスト](画像のURL "画像タイトル") → タイトル有りの画像を埋め込む

Markdown:
![Qiita](https://qiita-image-store.s3.amazonaws.com/0/45617/015bd058-7ea0-e6a5-b9cb-36a4fb38e59c.png "Qiita")

結果:

テーブル記法

• 「3x2」 のように入力すると、テーブル挿入が選択でき、テーブルが作成される。

| 1 | 2 | 3 |
|:-:|:-:|:-:|
|aaa|bbb|ccc|
|ddd|eee|fff|

1	2	3
aaa	bbb	ccc
ddd	eee	fff

目次(TOC / Table of Contents)の自動挿入

• 目次は記事内の見出しを元に自動生成し、右上に自動挿入される。

注釈

• 本文中に[^1]や[^example]のように文字列を記述することで、脚注へのリンクを表現できる。注釈内容は、同じく本文中に[^1]: ...というように記述する。

絵文字

Markdown記法の外だが、:で囲って、絵文字を埋め込める。

:kissing_closed_eyes: chu⭐︎

chu⭐︎

リンクカード

URLをリンクカードとして表示できる。URL前後に改行が必要。

(空行)
https://qiita.com/Qiita/items/c686397e4a0f4f11683d
(空行)

コンテンツの埋め込み

以下のサービスの埋め込みスクリプト/Embedタグが利用可能。詳細は以下リンクを参照のこと。

• Twitter
• Asciinema
• CodePen
• YouTube
• SlideShare
• Google Slide
• Speaker Deck

https://twitter.com/Qiita/status/1365218441011990531

その他

バックスラッシュ[]をMarkdownの前に挿入することで、Markdownをエスケープ(無効化)するコトができる。

#H1
エスケープされています