マークアップ言語 Markdown（マークダウン）についてまとめています。

 Markdown: Basics | Daring Fireball
 Markdown: Syntax | Daring Fireball

例えば GitHub の README（README.md）などでよく使われています。

 基本的な書き方とフォーマットの構文 | GitHub Docs

この balloon.asia では Hugo を採用していますので、
基本的に Hugo で動作する範囲の Markdown を紹介しています。
Markdown エンジン・使用場所によって対応状況変化します。
装飾は CSS で変化し、Markdown で定義されていません。
そのため、このページと異なる表示の場合があります。

 Hugo
🎈 Hugo | ふうせん🎈 FU-SEN

目次

段落

間に空白行があると

段落になります。

間に空白行があると

段落になります。

見出し

# 見出し 1

## 見出し 2

### 見出し 3

#### 見出し 4

##### 見出し 5

###### 見出し 6

見出し 1

見出し 2

見出し 3

見出し 4

見出し 5
見出し 6

{#見出し} を入れる事で、リンク先の名称を明記する事もできます。

### 見出し {#見出し}

h1・h2 はこの記述もできます。

見出し 1
========

見出し 2
--------

太字（Bold・強い強調）

HTML 上は「強い強調」ですが、ここでは主な表示である「太字（Bold）」と記載します。

ここを **太字** にします。

これでも __太字__ にできます。

ここを 太字 にします。

これでも 太字 にできます。

前後に空白がない場合でも**bold**は機能しますが、

こちらの__bold__は機能しない事があります。

前後に空白がない場合でもboldは機能しますが、

こちらの__bold__は機能しない事があります。

日本語では **～** を使うのが無難でしょう。

斜体（Italic・強調）

HTML 上は「強調」ですが、ここでは主な表示である「斜体（Italic）」と記載します。

ここが *Italic* になります。

これでも _Italic_ になります。

日本語フォントでは *機能しない* 場合があります。

ここが Italic になります。

これでも Italic になります。

日本語フォントでは 機能しない 場合があります。

日本語では使わないのが無難でしょう。

太字＋斜体

上 2 種類の強調をあわせた状態です。

その1 ***bold + Italic***

その2 **_bold + Italic_**

その3 __*bold + Italic*__

その4 ___bold + Italic___

日本語では ***太字だけ*** の場合があります。

その1 bold + Italic

その2 bold + Italic

その3 bold + Italic

その4 bold + Italic

日本語では 強調だけ の場合があります。

引用

> 引用の例です。
>
> この中で **太字** なども使えます。
>
> > 引用の中に引用もできます。

引用の例です。

この中で 太字 なども使えます。

引用の中に引用もできます。

箇条書き（数字）

1. １つ目の項目
1. ２つ目の項目
1. ３つ目の項目

もちろん 1. 2. 3. … としても構いません。番号は自動付加されます。
1. のみなどの固定した数字ににすると、
途中に追加する場合でも他の項目を変更する必要がありません。

1. １つ目の項目
2. ２つ目の項目
3. ３つ目の項目
  1. １つ目の項目
  2. ２つ目の項目
  3. ３つ目の項目

箇条書き（固定）

- １つ目の項目
- ２つ目の項目
- ３つ目の項目

- 以外に + や * も使用できます。

  • １つ目の項目
  • ２つ目の項目
  • ３つ目の項目

箇条書き（共通事項）

- 項目を具体的に説明するために

  このようにして説明する事もできます。

      プログラムなどは頭へ空白 4 文字を
      更に追加して入れます。

- 項目のつづきです。

  • 項目を具体的に説明するために

    このようにして説明する事もできます。

    プログラムなどは頭へ空白 4 文字を
更に追加して入れます。

  • 項目のつづきです。

コード（code）

文中にコードを入れる時は `code` とします。
文中にコードを入れる時は code とします。

コード内は変換されません。
https://balloon.asia/ のように自動リンクさせたくない URL の表示にも使えます。

水平線

---

3 文字以上が有効です。 *** や ___ も使用できます。
また、システムにより - - - や * * * または _ _ _ も使用できます。

リンク

[ふうせん🎈 FU-SEN](https://balloon-jp.vercel.app/)

リンク先は間接表記も可能です。

[ふうせん🎈 FU-SEN](https://balloon-jp.vercel.app/ "ふうせん🎈 FU-SEN")

上のリンク部分にカーソルを当ててみて下さい。

<https://balloon-jp.vercel.app/> のように URL へのリンクもできます。
https://balloon-jp.vercel.app/ のように URL へのリンクもできます。
システムによって https://balloon-jp.vercel.app/ のように自動リンク化する場合もあります。
システムによって https://balloon-jp.vercel.app/ のように自動リンク化する場合もあります。

画像

![ふうせん🎈 FU-SEN](/apple-touch-icon.png)
ふうせん🎈 FU-SEN

画像は直接表記も可能です。

![ふうせん🎈 FU-SEN](/apple-touch-icon.png "ふうせん🎈 FU-SEN")
ふうせん🎈 FU-SEN

画像にカーソルを当ててみて下さい。

エスケープ（無効化）

変換させたくない場合は \`このように\` \ を付けます。
変換させたくない場合は `このように` \ を付けます。

英語フォントでは 半角 ＼ ですが、
日本語フォントではキャラクターコードの定義により、半角 ＼ と 半角 ￥ の場合があります。

ここから下の内容はシステムによって採用されていない事があります。

強制改行

強制改行についてはシステムによって実装が異なります。

多くの環境は  
これでも改行できます。
多くの環境は
これでも改行できます。

上は分かりにくいですが、改行前・行末に半角スペースが 2 つです。

GitHub のソースや Hugo などは\
これでも改行できます。
GitHub のソースや Hugo などは
これでも改行できます。

GitHub Pages や Docker Hub などは行末 \ が機能しません。

HTML タグを入れて<br>
改行できる場合もあります。
HTML タグを入れて
改行できる場合もあります。

Hugo では Hugo 0.60 よりデフォルトで HTML が無効になっているので、
これを使うためには設定が必要です。HTML

システムによってはこのまま
改行できる場合もあります。
システムによってはこのまま 改行できる場合もあります。

Docker Hub は有効ですが、
Hugo や GitHub Pages などでは無効です。

表（table）

|見出し|見出し|見出し|
|------|:----:|-----:|
|内容  | 内容 |  内容|
|内容  | 内容 |  内容|

見出し と 内容 の間にある --- は 3 文字以上です。
: の付加により、中央寄せ・右寄せを指定できます。

空白は省略できます。見やすさのために付加できます。

|見出し|見出し|見出し|
|------|:----:|-----:|
|内容|内容|内容|
|内容|内容|内容|
見出し見出し見出し
内容内容内容
内容内容内容

ここでは使用しているテーマの影響で横幅いっぱいに表示されています。

Code ブロック

行単位で ```～``` を囲んだところが有効です。
Code プロック内は変換されず、そのまま表示されます。

```
10 INPUT A
20 INPUT B
30 C=A+B
40 PRINT C
50 END
```
10 INPUT A
20 INPUT B
30 C=A+B
40 PRINT C
50 END

言語や形式を入れる事ができます。
システムにより Syntax Highlight などで表示が変化します。

```json
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
```
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

脚注

脚注はこのように使います。 [^1]

[^1]: これが脚注です。

脚注はこのように使います。 1

  1. これが脚注です。 ↩︎

1 は任意の文字でも構いません。共通の文字にします。

脚注の説明文は通常ページ下部に表示されますが、
ここでは shortcode 内に入れてあるため、ページ文中で表示されています。

別記載のリンク

リンク URL を文章とは別にまとめて記載する事ができます。
Markdown の中でもこの説明がされている事は少ないですが、
オリジナルの Markdown（Markdown.pl）で採用されている機能です。

ここから [トップページ][1] へ移動します。

[1]: http://balloon-jp.vercel.app/ "ふうせん🎈 FU-SEN"
ここから トップページ へ移動します。

定義

定義
: 説明１
: 説明２
定義
説明１
説明２

取り消し線

ここに ~~取り消し線~~ が入ります。
ここに 取り消し線 が入ります。

タスクリスト

- [x] 完了
- [ ] 未完成
  • 完了
  • 未完成

日本ではピンとこないのですが、  =  なのです。
Windows 3.1 とか知っている人ならば……

HTML

システムによって <strong>HTML</strong> もそのまま使えます。
システムによって HTML もそのまま使えます。

Hugo は Hugo 0.60 より HTML を有効にするためには config に追加が必要です。
config.toml の場合は次を加えます。

[markup.goldmark.renderer]
  unsafe = true

Q&A

Markdown はどこから生まれたのですか？

元々は John Gruber が公開した Perl による変換ツールです。
2004 年に生まれました。
形式と区別するため、「Markdown.pl」とも表記されます。

 Markdown | Daring Fireball

プラグインのように導入する事ができたため、普及しました。

Wiki 記法と違うのですか？

上記のように Markdown 形式テキスト→HTML 変換ツール から生まれていて、
Wiki との接点はないようです。

なぜ Markdown が使われるようになったのですか？

いくつかの有名な Web サービスで Markdown が採用されるようになります。

  • GitHub
  • Bitbucket
  • SourceForge

いずれも主に開発者向けのサービスです。
そのため、Markdown を経験した開発者が
更に Markdown を採用したツール等を制作・提供する状況になっています。

Qiita は Markdown 普及のきっかけではないのですか？

 Qiita / Qiita:Team における Markdown レンダリングの歴史

Qiita は 2011年9月 にサービスが公開され、2011年11月より Markdown 対応になっています。
（この段階で  Markdown.pl から 7 年後になります。GitHub は 2008年4月 サービス開始）
Qiita は「日本最大のプログラマーコミュニティ」ですが、ほとんどは日本からの利用です。
そのため、日本では Qiita によって Markdown を覚えた人がいる事が想像できます。