Sponsored
この記事では、ふとした時に忘れがちな、細かい マークダウン 記法を網羅してチートシートとして残しておくための備忘録です。
マークダウンの主要な記法を詳しく解説し、実際の使用例を交えながら説明していきます。
マークダウン について
エンジニアなら一般教養と言っても過言ではないですが、念のため紹介から。
マークダウン（Markdown）は、簡単に書けて読みやすいプレーンテキスト形式で文書を作成するための軽量マークアップ言語です。
2004年にJohn Gruberによって作成され、今では多くの場面で使用されています。
目次
見出し
マークダウンでは、# シンボルを使って見出しを作成します。# の数が少ないほど、見出しのレベルが大きくなります。
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6また、別の方法として、以下のように = や - を使用することもできます（見出し1と見出し2のみ）。
見出し1
========
見出し2
--------段落と改行
段落は空行で区切ります。単純に Enter を1回押すだけでは改行されず、段落が続きます。
これは1つ目の段落です。
ここは改行されず、1つ目の段落の続きになります。
これは2つ目の段落です。強制的に改行したい場合は、行末に半角スペースを2つ以上入れるか、<br> タグを使用します。
これは1行目です。
これは2行目です。
これは1行目です。<br>
これは2行目です。強調
テキストを強調するには、以下の方法があります。
- イタリック体：
*または_で囲む - ボールド体：
**または__で囲む - イタリック＋ボールド体：
***または___で囲む
*イタリック体*
_イタリック体_
**ボールド体**
__ボールド体__
***イタリック＋ボールド体***
___イタリック＋ボールド体___リスト
順序なしリスト
順序なしリストは、-、+、* のいずれかを使用して作成します。
- 項目1
- 項目2
- サブ項目2.1
- サブ項目2.2
- 項目3
+ 項目1
+ 項目2
* 項目1
* 項目2順序付きリスト
順序付きリストは、数字とピリオドを使用して作成します。
1. 最初の項目
2. 2番目の項目
3. 3番目の項目
1. サブ項目3.1
2. サブ項目3.2
4. 4番目の項目注意：実際の表示では、番号は自動的に振り直されるので、すべて 1. で始めても問題ありません。
リンク
リンクを作成するには、以下の方法があります。
- インラインリンク
- 参照リンク
- 自動リンク
インラインリンク
[リンクのテキスト](https://www.example.com)
[タイトル付きリンク](https://www.example.com "リンクのタイトル")参照リンク
[リンクのテキスト][参照ID]
[別のリンク][another-ref]
[参照ID]: https://www.example.com
[another-ref]: https://www.example.com "オプションのタイトル"自動リンク
<https://www.example.com>
<email@example.com>画像
画像の挿入は、リンクとよく似ていますが、先頭に ! を付けます。
![代替テキスト][画像の参照ID]
[画像の参照ID]: 画像のURL "オプションのタイトル"引用
引用文は、> を使用して作成します。
> これは引用文です。
> 複数行にまたがる場合も、
> 各行の先頭に `>` を付けます。
> ネストした引用も可能です。
>> こんな感じで入れ子にできます。
>>> さらに深くすることもできます。コード
インラインコード
バッククォート (`) で囲むことで、インラインコードを表現できます。
これは `インラインコード` の例です。コードブロック
コードブロックは、行の先頭に4つのスペースまたは1つのタブを入れるか、バッククォート3つ (```) で囲みます。
スペース4つを使用する方法：
function helloWorld() {
console.log("Hello, world!");
}バッククォート3つを使用する方法（シンタックスハイライトも可能）：
```javascript
function helloWorld() {
console.log("Hello, world!");
}
```水平線
水平線は、3つ以上の *、-、_ を使用して作成します。
***
---
___表
表は以下のように作成します。
| 列1 | 列2 | 列3 |
|-----|:---:|----:|
| デフォルト揃え | 中央揃え | 右揃え |
| a | b | c |
| d | e | f |: の位置で揃え方を指定できます。
チェックボックス
チェックボックスは、リストアイテムの先頭に [ ] または [x] を付けることで作成できます。
Sponsored
- [ ] タスク1（未完了）
- [x] タスク2（完了）
- [ ] タスク3（未完了）脚注
脚注は以下のように作成します。
ここは本文です。[^1] これも本文です。[^note]
[^1]: これは脚注の内容です。
[^note]: これは長い脚注の例です。
インデントすることで、複数行の脚注を書くことができます。エスケープ文字
マークダウンの特殊文字をそのまま表示したい場合は、バックスラッシュ (\) を使用してエスケープします。
\* これはイタリック体にならない \*
\# これは見出しにならないHTML
多くのマークダウンパーサーは、文書内にHTMLを直接記述することを許可しています。
これは <span style="color: red;">赤色</span> のテキストです。
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>拡張マークダウン記法
マークダウンの実装によっては、追加の機能をサポートしている場合があります。以下はその一例です。
取り消し線
~~取り消し線~~タスクリスト
- [x] 完了したタスク
- [ ] 未完了のタスク絵文字
一部の実装では、絵文字のショートコードがサポートされています。
:smile: :heart: :thumbsup:数式
LaTeX形式の数式をサポートしている実装もあります。
インライン数式: $E=mc^2$
ブロック数式:
$$
\frac{n!}{k!(n-k)!} = \binom{n}{k}
$$おまけ
自分でエディタを実装するなら、この辺りの記事が参考になると思います。
/blogs/javascript-marked-js/
/blogs/javascript-highlight-js/
おわりに
マークダウンは柔軟で使いやすい記法ですが、実装によって細かい違いがある場合もあります。
Backlog なんかは少し独特ですよね。
マークダウンを使いこなすことで、素早く整形された文書を作成でき、技術文書やブログ記事、README ファイルなど、様々な場面で活用することができますね。
