PR

【備忘録】 マークダウン 記法チートシート

markdown ドキュメント類
この記事は約6分で読めます。
記事内に広告が含まれています。

この記事では、ふとした時に忘れがちな、細かい マークダウン 記法を網羅してチートシートとして残しておくための備忘録です。

マークダウンの主要な記法を詳しく解説し、実際の使用例を交えながら説明していきます。

マークダウン について

エンジニアなら一般教養と言っても過言ではないですが、念のため紹介から。

マークダウン（Markdown）は、簡単に書けて読みやすいプレーンテキスト形式で文書を作成するための軽量マークアップ言語です。

2004年にJohn Gruberによって作成され、今では多くの場面で使用されています。

目次

  1. 見出し
  2. 段落と改行
  3. 強調
  4. リスト
  5. リンク
  6. 画像
  7. 引用
  8. コード
  9. 水平線
  10. 表
  11. チェックボックス
  12. 脚注
  13. エスケープ文字
  14. HTML
  15. 拡張マークダウン記法

見出し

マークダウンでは、# シンボルを使って見出しを作成します。# の数が少ないほど、見出しのレベルが大きくなります。

# 見出し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. で始めても問題ありません。

リンク

リンクを作成するには、以下の方法があります：

  1. インラインリンク
  2. 参照リンク
  3. 自動リンク

インラインリンク

[リンクのテキスト](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>
スポンサーリンク

画像

画像の挿入は、リンクとよく似ていますが、先頭に ! を付けます。

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

![代替テキスト](画像のURL "画像のタイトル")

![代替テキスト][画像の参照ID]

[画像の参照ID]: 画像のURL "オプションのタイトル"

引用

引用文は、> を使用して作成します。

> これは引用文です。
> 複数行にまたがる場合も、
> 各行の先頭に `>` を付けます。

> ネストした引用も可能です。
>> こんな感じで入れ子にできます。
>>> さらに深くすることもできます。

コード

インラインコード

バッククォート (`) で囲むことで、インラインコードを表現できます。

これは `インラインコード` の例です。

コードブロック

コードブロックは、行の先頭に4つのスペースまたは1つのタブを入れるか、バッククォート3つ (```) で囲みます。

スペース4つを使用する方法：

    function helloWorld() {
        console.log("Hello, world!");
    }

バッククォート3つを使用する方法（シンタックスハイライトも可能）：

```javascript
function helloWorld() {
    console.log("Hello, world!");
}



  
スポンサーリンク

  

    

      

    

  





## 水平線

水平線は、3つ以上の *、-、_ を使用して作成します。

```markdown
***

---

___

表

表は以下のように作成します：

| 列1 | 列2 | 列3 |
|-----|:---:|----:|
| デフォルト揃え | 中央揃え | 右揃え |
| a   | b   | c   |
| d   | e   | f   |

: の位置で揃え方を指定できます。

チェックボックス

チェックボックスは、リストアイテムの先頭に [ ] または [x] を付けることで作成できます。

- [ ] タスク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}
$$
スポンサーリンク

おまけ

自分でエディタを実装するなら、この辺りの記事が参考になると思います。

【JavaScript】 marked.js でマークダウンエディタを実装する
この記事では、 `marked.js` を用いてマークダウンエディタを実装する方法を紹介します。このライブラリは、シンプルでありながら、GitHub Flavored Markdown(GFM)の多く...
lazy-developer.jp
【JavaScript】 highlight.js でマークダウンエディタをデザインする
highlight.js を前回実装したエディタに組み込んで、コードブロックのシンタックスハイライト機能を追加し、デザイン性と可読性を向上させる方法を解説します。
lazy-developer.jp

おわりに

マークダウンは非常に柔軟で使いやすい記法ですが、実装によって細かい違いがある場合もあります。

Backlog なんかは少し独特ですよね。

マークダウンを使いこなすことで、素早く整形された文書を作成でき、技術文書やブログ記事、README ファイルなど、様々な場面で活用することができますね。

コメント

タイトルとURLをコピーしました