Markdownチートシート

Markdown構文の完全なリファレンスガイド

仕様に基づく GitHub Flavored Markdown (GFM) と CommonMark

基本構文

オリジナルMarkdownの基本要素

見出し（ATXスタイル）

# Heading 1→Heading 1
## Heading 2→Heading 2
### Heading 3→Heading 3
#### Heading 4→Heading 4
##### Heading 5→Heading 5
###### Heading 6→Heading 6

見出し（Setextスタイル）

構文
Heading 1
=========

Heading 2
---------
結果
Heading 1Heading 2

強調とフォーマット

*italic*→italic
_italic_→italic
**bold**→bold
__bold__→bold
***bold italic***→bold italic
~~strikethrough~~→strikethrough

インラインコード

`code`→code
``code with `backtick` ``→code with `backtick`
ヒント
コードにシングルバッククォートが含まれる場合はダブルバッククォートを使用してください。

コードブロック（フェンスドコードブロック）

構文
```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("World");
```
結果
function greet(name) {
console.log(`Hello, ${name}!`);
}

greet("World");
シンタックスハイライト対応言語
javascriptjavascripttypescripttypescriptpythonpythonjavajavacccppcppcsharpcsharpgogorustrustrubyrubyphpphpswiftswiftkotlinkotlinscalascalasqlsqlbashbashshellshellpowershellpowershelljsonjsonyamlyamlxmlxmlhtmlhtmlcsscssscssscsssasssassmarkdownmarkdownlatexlatexrrmatlabmatlabperlperllualuahaskellhaskellelixirelixirclojureclojuredockerfiledockerfilenginxnginxapacheapachegraphqlgraphqlprismaprismasoliditysolidity

リンク

[text](url)→text
[text](url "title")→text
<https://example.com>→https://example.com
参照リンク
[text][ref]

[ref]: https://example.com "Title"

画像

構文
![Alt text](url)
タイトル付き
![Alt text](url "Title")
リンク付き画像
[![Alt](image.jpg)](link)
参照
![Alt][ref]

[ref]: url "Title"

箇条書きリスト

構文
- Item 1
- Item 2
  - Sub-item 2.1
  - Sub-item 2.2
    - Sub-sub-item
- Item 3

* Also works with *
+ And with +
結果
  • Item 1
  • Item 2
    • Sub-item 2.1
    • Sub-item 2.2
      • Sub-sub-item
  • Item 3

番号付きリスト

構文
1. First item
2. Second item
   1. Sub-item 2.1
   2. Sub-item 2.2
3. Third item

1. Numbers don't need
1. to be in order
1. Markdown fixes it
結果
  1. First item
  2. Second item
    1. Sub-item 2.1
    2. Sub-item 2.2
  3. Third item

引用（ブロッククォート）

構文
> This is a quote.
> It can span multiple lines.
>
> > Quotes can be nested.
> > Like this one.
>
> And continue after.
結果
This is a quote. It can span multiple lines.
Quotes can be nested. Like this one.
And continue after.

水平線

構文
---

***

___
結果

GFM拡張

GitHub Flavored Markdownの追加機能

テーブル

構文
| Product    | Price  | Quantity |
|------------|:------:|---------:|
| Apple      | $3     |       10 |
| Banana     | $2     |       25 |
| Orange     | $4     |       15 |

配置:
:--- 左
:---: 中央
---: 右
結果
ProductPriceQuantity
Apple$310
Banana$225
Orange$415

タスクリスト

構文
- [x] Completed task
- [x] Another done task
- [ ] Pending task
- [ ] Another pending
結果
  • Completed task
  • Another done task
  • Pending task
  • Another pending

オートリンク

URLとメールは自動的にリンクされます
www.example.com
https://example.com
[email protected]
結果

アラート/コールアウト（GitHub）

構文
> [!NOTE]
> Useful information that users
> should know.

> [!TIP]
> Helpful advice for doing
> things better or more easily.

> [!IMPORTANT]
> Key information users need
> to know to succeed.

> [!WARNING]
> Urgent info that needs
> immediate attention.

> [!CAUTION]
> Negative potential consequences
> of certain actions.
結果
NoteUseful information that users should know.
TipHelpful advice for doing things better.
ImportantKey information for success.
WarningCritical content needing attention.
CautionNegative consequences of certain actions.

拡張構文

一部のパーサーでサポートされる高度な機能

脚注

構文
Here's a sentence with
a footnote.[^1]

[^1]: This is the footnote.

You can also use text[^note].

[^note]: Notes can have
    multiple lines.
結果

Here's a sentence with a footnote.[1]

You can also use text[note].

[1] This is the footnote.
[note] Notes can have multiple lines.

定義リスト

構文
Term 1
: Definition of term 1

Term 2
: Definition of term 2
: Second definition of term 2
結果
Term 1
Definition of term 1
Term 2
Definition of term 2
Second definition of term 2

ハイライトテキスト

==highlighted text==→highlighted text
注意
Obsidian、Notion、その他の一部のパーサーでサポートされています。

下付き文字と上付き文字

H~2~O→H2O
X^2^→X2
HTML代替
H<sub>2</sub>O
X<sup>2</sup>

絵文字

:smile:→😄
:heart:→❤️
:rocket:→🚀
:+1:→👍
完全な参照
絵文字ショートコードの完全なリスト

略語

構文
HTML is widely used on the web.

*[HTML]: HyperText Markup Language
結果
HTML is widely used on the web.

数式（LaTeX）

インライン
The formula $E = mc^2$ is famous.
結果
The formula E = mc² is famous.
ブロック
$$
\frac{n!}{k!(n-k)!} = \binom{n}{k}
$$
結果
n!k!(n-k)! = (nk)

HTMLと特殊要素

インラインHTMLと特殊文字の使用

インラインHTML

サポートされている要素
<kbd>Ctrl</kbd> + <kbd>C</kbd>

<mark>Highlighted text</mark>

<details>
<summary>Click to expand</summary>
Hidden content here.
</details>

<br> for line break
結果
Ctrl + C
Highlighted text
Click to expand
Hidden content here.

文字エスケープ

特殊文字の前に \ を使用
\*text between asterisks\*
\# not a heading
\[not a link\]
\\ backslash
エスケープ可能な文字
\ ` * _ { } [ ] ( ) # + - . ! |

改行

メソッド
Line 1  
Line 2 (2 spaces at the end)

Line 1<br>
Line 2 (HTML tag)

Line 1

Line 2 (blank line = paragraph)

HTMLエンティティ

&copy;→©
&reg;→®
&trade;→™
&nbsp;→（ノーブレークスペース）
&lt; &gt;→< >
&amp;→&

GitHubの高度な機能

GitHub Flavored Markdown固有の機能

Mermaid図

フローチャート
```mermaid
flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E
```
結果
Start
→
Decision
Yes →
Action 1
No →
Action 2
→
End
円グラフ
```mermaid
pie title Distribution
    "Movies" : 80
    "Series" : 20
```
シーケンス図
```mermaid
sequenceDiagram
    Alice->>Bob: Hello Bob!
    Bob-->>Alice: Hi Alice!
```
対応図表タイプ
mermaidflowchartmermaidsequenceDiagrammermaidclassDiagrammermaidstateDiagrammermaiderDiagrammermaidganttmermaidpiemermaidgitGraphmermaidjourneymermaidmindmapmermaidtimelinemermaidquadrantChartmermaidsankeymermaidxychart

キーボードキー（kbd）

構文
<kbd>Ctrl</kbd> + <kbd>C</kbd>

<kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>

<kbd>
  Enter ↵
</kbd>
結果
Ctrl + C
Cmd + Shift + P
Enter ↵

折りたたみ要素

構文
<details>
  <summary>Click to expand</summary>

  Hidden content that will
  be revealed on click.

  - Item 1
  - Item 2
  - Item 3
</details>
結果
Click to expand

Hidden content that will be revealed on click.

  • Item 1
  • Item 2
  • Item 3

メンションと参照

ユーザーメンション
@username
@organization/team
IssueとPRへの参照
#123
GH-123
username/repo#123
organization/repo#123
結果
@username — ユーザーをメンション
#123 — issue/PR #123を参照
repo#456 — 他のリポジトリで参照

カラーモデル

構文
`#ffffff`
`#0969DA`
`rgb(9, 105, 218)`
`hsl(212, 92%, 45%)`
結果
#ffffff
#0969DA
rgb(9, 105, 218)
hsl(212, 92%, 45%)

コメント

構文
<!-- This is a comment -->
<!-- 
  Multi-line
  comment
-->
結果
（コメントはレンダリングされた文書では見えません）

コミットSHA

構文
a1b2c3d
a1b2c3d4e5f6g7h8i9j0
username/repo@a1b2c3d
結果
a1b2c3d — コミットへのリンク
repo@a1b2c3d — 他のリポジトリのコミット

Diff付きコード

構文
```diff
- const old = "old value";
+ const new = "new value";

  function unchanged() {
-   return false;
+   return true;
  }
```
結果
- const old = "old value";
+ const new = "new value";
 
  function unchanged() {
- return false;
+ return true;
  }

アンカーと内部リンク

アンカーの作成
<a name="section"></a>
## My Section
アンカーへのリンク
[Go to section](#section)
[Back to top](#top)
結果
Go to section|Back to top ⬆️

サイズ指定画像

HTMLを使用
<img src="image.png" width="300">

<img src="image.png" 
     width="200" 
     height="100" 
     alt="Description">

<p align="center">
  <img src="logo.png" width="150">
</p>
ヒント
画像の寸法や配置を制御する必要がある場合はHTMLを使用してください。

目次

構文
## Table of Contents

- [Introduction](#introduction)
- [Installation](#installation)
  - [Requirements](#requirements)
  - [Setup](#setup)
- [Usage](#usage)
- [Contributing](#contributing)
結果
Table of Contents

バッジ/シールド

構文
![Badge](https://img.shields.io/badge/
  text-color-style)

[![npm](https://img.shields.io/npm/v/
  package.svg)](link)

![GitHub stars](https://img.shields.io/
  github/stars/user/repo)
結果
build: passingversion: 1.0.0license: MITdocs: latest

テキスト配置

構文
<div align="center">
  Centered text
</div>

<div align="right">
  Right-aligned text
</div>

<p align="center">
  <strong>Centered bold</strong>
</p>
結果
Centered text
Right-aligned text
Centered bold

ツールとリソース

Markdownを扱うための便利なリンク

参考資料とリソース