基礎的なMarkdownの使い方

【学習記録用】
Markdown語法 チートシートを元にしています。

1. コードの挿入

コードブロック

「Ryby」で記述したコードをファイル名「.rb」として投稿したいときは、 バッククオート（`） か チルダ（~） を使用するとシンタックスハイライト(可読性をつけるために色をつけること)が適用される。コードブロック内でコードブロックを書きたい場合は異なる記号を使うことで書ける。

書きかた

```ruby.rb
puts "Hello World"

見え方

ruby

puts "Hello World"

Diffと他のシンスタックを同時に使う場合

Qiitaでサポートしている各シンタックス(構文)に、新たに diff_* という名前をつけることでDiff(比較対象となる2つ（以上）の物の違うところ)を追加することができる。
- 、+を行の先頭に書くことでDiffを表現することができる。

書きかた

```diff_ruby:
- puts 'Hello'
+ puts 'World'
```

見え方

- puts 'Hello'
+ puts 'World'

コードスパン

コードをインライン表示することも可能

書きかた

`今日は晴れです`

見え方
今日は晴れです

コードスパン内でバッククオートを使う

開始・終了のバッククオートをn+1個で囲む

`` `バッククオート` `` や ``` ``2連続バッククオート`` ``` も記述できます。

見え方

`バッククオート` や ``2連続バッククオート`` も記述できます。

コードスパンの中身がCSSの <color> 型

コードスパンの中身が CSS の 型の RGB 16進数表記、 rgb()、 rgba()、 hsl()、 hsla() の場合、横にその色が表示される

書きかた

`#ffce44`
`rgb(255,0,0)`
`rgba(0,255,0,0.4)`
`hsl(100, 10%, 10%)`
`hsla(100, 24%, 40%, 0.5)`

見え方
#ffce44
rgb(255,0,0)
rgba(0,255,0,0.4)
hsl(100, 10%, 10%)
hsla(100, 24%, 40%, 0.5)

2.テキストの装飾

見出し

書きかた

#    h1タグです
##   h2タグです
###  h3タグです

見え方

　　h1タグです

　　h2タグです

　　　h3タグです

目次は記事内の見出しを元に自動で作成される

斜体、太字、訂正線

書きかた

*斜体*です     _斜体_です 
**太字**です     __太字__です
***斜体＋太字***です  ___斜体＋太字___です
~~訂正線~~です
*と_のどちらでも可能

見え方
:::note warn
警告
前後に 半角スペース か 改行文字 を入れてくれる必要あり
:::

斜体です(HTMLのemタグになる。　Qiitaでは italic type )
太字です(HTMLのstrongタグになる。Qiitaでは太字)
斜体＋太字です
※斜体と太字は組み合わせることが可能
訂正線です（）

改行と段落

改行のやりかた

改行
改行

スペース２つ分空ける

段落のやり方

段落

段落

改行を２回押すことでできる

折りたたみ

HTMLの詳細折りたたみ要素を使えます。
追加情報としたい内容を、detailsタグで囲みます。そして、要約として表示したい文章をsummaryタグで記載します。

書きかた

<details><summary>サンプルコード</summary>

(上に空行が必要)
```rb
puts 'Hello, World'
</details>

見え方

サンプルコード

puts 'Hello, World'

補足説明

目立つように補足説明をしたい場合、補足したい内容を:::note infoと ::: で囲む。
補足したい内容と:::note info と ::: はそれぞれ別の行にする必要あり。
noteの後のinfoは省略可能。
また、noteの後にwarnを付けると警告メッセージ、alartを付けるとより強い警告メッセージになる

書きかた

:::note info
インフォメーション

:::note warn
警告
◯◯に注意してください

:::note alart
より強い警告
◯◯しないでください

見え方

インフォメーション

警告
◯◯に注意してください

より強い警告
◯◯しないでください

note語法でサポートしているMarkdown語法

• リスト
• 太字
• 訂正線
• コードスパン
• リンク
• 画像
• コードブロック

3.Lists -リスト

箇条書きリスト

文頭に* + -　のいずれか + スペースを入れると箇条書きリストになる
ネストを入れることも可能

書きかた

- 1行目
- ２行目
    -ネスト 

結果

• 1行目
• ２行目
  • ネスト

番号付きリスト

文頭に数字.　+ スペースを入れると番号付きリストになる
ネストする時には 段落と同じ数のスペースが必要

書きかた

1. 犬
1. 猫
1. うさぎ

見え方

1. 犬
2. 猫
3. うさぎ

2)の応用編

2. りんご
2. みかん
2. もも

見え方
2. りんご
2. みかん
2. もも

説明リスト

HTMLの<dl>タグをそのまま使うことで実現

Markdown語法とHTMLタグの対応

修飾	Markdown	HTML
ボルドー	** **	<strong></strong>
イタリック	_ _	<em></em>
コード	``	<code></code>
リンク	[text](url)	<a href="url">text</a>

チェックボックス

順序なしリストの記述の後ろに[ ]　+ スペースを入れるとチェックボックスが生成される。
すでにチェックが入った状態のボックスを生成する場合は[x]を入力する。

書きかた

- [ ]  やること１
- [x] やること２

見え方

• やること１
• やること２

4.引用

書きかた

>文頭に>を置くことで引用ができる
>複数行にまたがる場合、改行のたびにこの記号を置く
> **引用の上下にはリストと同じく空行がないと正しく表示されない**
> 引用の中に別のMarkdownを使用することもできる
> 
> > これは多重引用(ネスト)

見え方

文頭に>を置くことで引用ができる
複数行にまたがる場合、改行のたびにこの記号を置く
引用の上下にはリストと同じく空行がないと正しく表示されない
引用の中に別のMarkdownを使用することもできる

これは多重引用(ネスト)

5.Links- リンク

タイトル付きのリンクを投稿できる(タイトルは、リンク上にマウスホバーすることで表示される)

書きかた

[サイト名等の文字を入力] (url)

ex)
[Qiita](http://qiita.com "Qiita Home")

見え方
Qiita

複数箇所への同じリンクの書き方も可能

書きかた

[ここ][link-1]と[この ][link-1]リンクは同じになる
[kink-1]という書き方もある
[kink-1]:http://qiita.com/

見え方
ここ と この リンクは同じになります。
link-1 という書き方もできます。

6.Images-画像埋め込み

FirefoxではGIFアニメーションが動作しない場合がある

書きかた

##  タイトルありの画像を埋め込む
![ait](url "画像のタイトル")

## タイトル無しの画像を埋め込む
![ait](url）

見え方

HTMLで入力すると画像サイズの調整などができる

書きかた

<img width="50" src="画像url">

見え方

7.水平線

３つ以上の - * _ だけの行は水平線（罫線）となる

書きかた

全て水平線として扱われる
***
___
---

8.テーブル

テーブルには自動入力と手動入力がある

自動入力

書きかた

3x２と入力すると自動で作成
xはエックスでOK

見え方

1	2	3

手動入力

書きかた

|名前 ｜年齢|
|:---|--:|
|aさん|20|
|bさん|30|

見え方

名前	年齢
aさん	20
bさん	30

| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| This       | This        | This         |
| column     | column      | column       |
| will       | will        | will         |
| be         | be          | be           |
| left       | right       | center       |
| aligned    | aligned     | aligned      |

見え方

Left align	Right align	Center align
This	This	This
column	column	column
will	will	will
be	be	be
left	right	center
aligned	aligned	aligned

9.数式の挿入

コードブロックの言語指定にmathを指定することでTeX記法を用いて数式を記述することができる

書きかた

x^2 + y^2 = 1 をインライン表示すると $x^2 + y^2 = 1$ になる

見え方
$x^2 + y^2 = 1$

インライン数式の中でコントロールシンボル（{のような、バックスラッシュの後に記号が続くもの）を使うと、後述のバックスラッシュによるMarkdownのエスケープと衝突してしまう

example

$a = \{1, 2, 3\}

対処法

バックスラッシュを２つ使用する
$a = \\{1, 2, 3\\}$

10.脚注

本文中に[^1]や[^example]のように文字列を記述することで、脚注へのリンクを表す。
注釈内容は、同じく本文中に [^1]: ... というように記述する。

書きかた

脚注の書きかた[^1]
[^1]:脚注のリンク先

見え方
脚注の書きかた¹

絵文字

:で囲って、絵文字を埋め込むことができる(絵文字ボタンからの使用も可能)

書き方

\:grin:

見え方

11.リンクカード

URLをリンクカードとして表示できる機能。URLの前後に空行が必要となる。

書きかた

（空行）
url
(空行)

12.ダイアグラム

以下の方法で文章内に図を表示することができる。

PlantUMLを使用する

コードブロックの言語名をplantumlとすることで、PlantUMLによるダイアグラムを表示することができる

書きかた

```plantuml
A->B : request
B->A : response

見え方

Mermaidを使用する

コードブロックの言語名をmermaidとすることで、Mermaidによるダイアグラムを表示する。

書きかた

```mermaid
graph TD;
  A-->B;
  B-->C;
  C-->D;

見え方

Mermaidのアップデートによっては、表示が変更されたり、適切に表示がされなくなる可能性がある

制限事項

1.図にクリックイベントを設定できるInteraction機能は、セキュリティ上の観点から無効
2.コードブロックあたりの文字数を2000文字まで
3.コードブロックあたりの&の数を10まで

13.コンテンツの埋め込み

以下のサービスの埋め込みスクリプト/Embedタグが利用可能

• Twitter
• CodeSandbox
• CodePen
• GitHub Gist
• Asciinema
• Figma
• Speaker Deck
• SlideShare
• Google Slide
• Docswell
• YouTube

詳細の確認↓

14.目次(TOC)の自動挿入

目次は記事内の見出しを元に自動生成し、右に自動挿入される

1. 脚注のリンク先 ↩