先日、知り合いの仕事のサポートに入った際、プロジェクト管理ツールのBacklogに招待されたのですが、Backlog内でのやりとりの一部はMarkdownで書かれていました。

ひさしぶりにMarkdownで書こうと思ったら、書き方を忘れてしまったので、改めてMarkdownの記法をまとめてみました。

Markdown(マークダウン)の使用について

最近はMarkdownを使っていませんが、目にする機会は多くあります。GitHubやはてなブログなどで投稿するときに使われています。WordPressのブロックエディターでも、「## 」と入力すると見出しになるなど、Markdownに近い書き方ができます。

プレーンテキストで簡単にHTMLを作成できるので、いろいろなサービスやツールで採用されています。HTMLを書ける人なら、理解は早いでしょう。

Markdownのファイルの拡張子は、一般的には「.md」です。

マークダウンの記法

見出し

見出し(hタグ)は、先頭に「#」を付けます。

# 見出し1
## 見出し2
### 見出し3

↓ HTML

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>

段落

段落(pタグ)は、何も付けずに文章を書けばOKです。空の行をはさむと、段落が分かれます。

改行されない場合は、行の最後に半角スペースを2つ入れましょう。

引用

行の頭に「>」を付けます。

> 引用した内容です。

↓ HTML

<blockquote>
引用した内容です。
</blockquote>

リンク

リンクの文字を[]で囲み、そのあとにURLを()で囲みます。

[Yahoo! JAPAN](https://www.yahoo.co.jp/)

↓ HTML

<a href="https://www.yahoo.co.jp/">Yahoo! JAPAN</a>

テキストの装飾(打ち消し、太字、イタリック)

_イタリック文字_ です。
**太字文字** です。
~~打ち消し文字~~ です。

↓ HTML

<em>イタリック文字</em> です。
<strong>太字文字</strong> です。
<del>打ち消し文字</del> です。

箇条書き

行の頭に「-」と半角スペースを付けます。番号付きの箇条書きは「1. 」を付けます。

- りんご
- みかん

1. 手順1
2. 手順2

↓ HTML

<ul>
<li>りんご</li>
<li>みかん</li>
</ul>
<ol>
<li>手順1</li>
<li>手順2</li>
</ol>

コードブロック

コードの前後の行に、「“`」(バッククォート3つ)を書きます。

```
console.log("Hello");
```

↓ HTML

<pre><code>console.log("Hello");</code></pre>

表

「|」で列を区切り、2行目に「—」を書きます。GitHubなど、表に対応したサービスで使えます。

| 名前 | 値段 |
| --- | --- |
| りんご | 100円 |

水平線

-(ハイフン)を3つ以上書きます。

---

↓ HTML

<hr>

アスタリスクなどの特殊文字

「#」や「*」など、マークダウンの記法で使われている文字は変換されてしまい、そのままでは表示できません。バックスラッシュまたは円記号(\)を先頭に付けてエスケープします。

\*

↓ HTML

<p>*</p>

マークダウンを採用しているツール・サービス

マークダウンを採用しているサービスは多くあります。GitHub、はてなブログ、Backlog、Notion、Slackなどで使えます。

HTMLをMarkdownに変換する場合

HTMLをマークダウンに変換する場合は、pronama.jpが公開しているツールが便利です。

参考:HTML – Markdown 変換