Markdown記法について

Code-コードの挿入

書き方.

```ruby:qiita.rb
puts 'The best way to log and share programmers knowledge. '

qiita.rb

puts 'The best way to log and share programmers knowledge. '

「Ruby」で記述したコードをファイル名「qiita.rb」として投稿したい時は、バッククオート(') かチルダ(~)を使用する。

Code spans-コードスパン

書き方.

`puts 'Qiita'`と書くことでインライン表示することができる

結果
puts 'Qiita'と書くことでインライン表示することができる

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

コードスパンの中身がCSSの<color>型のRGB16進数表記、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)

Format Text　テキストの装飾

Headings 見出し

書き方.

# これはh1タグです
## これはh2タグです
######　これはh6タグです

Emphasis /Strong Emphasis -強調・強勢

書き方.

*italic type*  _italic type_
 
**太字**  __太字__

結果

italic type italic type

太字太字

_か * で囲むとHTMLのemタグになります。Qiitaでは italic type になります。
__か**で囲むとHTMLのstrongタグになります。Qiitaでは　太字になります。

Strikethrough -打ち消し線

書き方.

~~打ち消し~~

結果
~~打ち消し~~
打ち消し線を使うには~~で囲みます。

Details -折りたたみ

書き方.

<details><summary>サンプルコード</summary>
(上に空行が必要）

```rb
puts 'Hello,World'

結果

サンプルコード

(上に空行が必要）

puts 'Hello,world'

HTMLの詳細折りたたみ要素を使えます。

追加情報としたい内容を、detailsタグで囲みます。そして、要約として表示したい文章を　summaryタグで記載します。

Note -補足説明

書き方.

:::note info
インフォメーション
infoは省略可能です。
:::

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

:::note alert
より強い警告
○○しないでください
:::

結果

インフォメーション
infoは省略可能です。

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

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

目を引く形で補足説明をしたい場合、補足したい内容を　:::note infoと:::で囲みます。
補足したい内容と:::note infoと:::はそれぞれ別の行にする必要があります。
noteの後のinfoは省略可能です。また、noteの後にwarnをつけると警告メッセージに、alertをつけるとより警告メッセージとして表現することができます。

Lists -リスト

Bullet List-順序なしリスト

文頭に* + -のいずれかを入れると順序なしリストになります
要点をまとめる際に便利です
* + -の後にはスペースが必要です

Ordered List-番号付きリスト

書き方.

1. くだもの
1. やさい
1. おにく

結果

くだもの
やさい
おにく
＿＿

文頭に数字.を入れると番号付きリストになります
要点をまとめる際に便利です
ネストをする時には段落と同じ数のスペースが必要です

Description List -説明リスト

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

Checkbox-チェックボックス

書き方.

- [ ] tasuku1
* [ ] tasuku2
* [x] tasuku3

結果

tasuku1

tasuku2
tasuku3

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

Blockquotes -引用

書き方.

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

結果

複数行にまたがる場合、改行のたびにこの記号を置く必要があります。
引用の上下にはリストと同じく空行がないと正しく表示されません
引用の中に別のMarkdownを使用することも可能です。

これはネストされた引用です。

Horizontal rules-水平線

下記は全て水平線として表示されます。

書き方.

* * *
***
*****
- - -
-----------------------------

Links -リンク

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

書き方.

[リンクテキスト](URL "タイトル")

例

書き方.

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

結果
Qiita

タイトルなしのリンクの書き方.

[Qiita](http://qiita.com)

結果
Qiita

複数箇所への同じリンクの書き方.

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

[link-1]: http://qiita.com/

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

Images-画像の埋め込み

書き方.

## タイトルありの画像を埋め込む
![代替テキスト](画像のURL "画像のタイトル")

## タイトル無しの画像を埋めこむ
![代替テキスト](画像のURL)

例

書き方.

![Qiita](http://qiita-image-store.s3.amazonaws.com/0/45617/015bd058-7ea0-e6a5-b9cb-36a4fb38e59c.png "Qiita")

結果

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

例

<img width="50" src="http://qiita-image-store.s3.amazonaws.com/0/45617/015bd058-7ea0-e6a5-b9cb-36a4fb38e59c.png">

結果

テーブル

手動で入力する場合

書き方.

| Left align | Right align | Center align |
| :----------|------------:|-------------:|
| This       | This        | This         |

上記のように書くと、以下のように表示されます。

Left align	Right align	Center align
This	This	This

目次（TOC）の自動挿入

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

脚注

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

絵文字

厳密にはMarkdouwn記法の外ですが、:で囲って、絵文字を埋め込めます。
例

書き方.

\:kissing_closed_eyes: chu

結果
chu

リンクカード

URLをリンクカードとして表示します。URLの前後に空行が必要です。
例

書き方.

(空行)
https://qiita.com/Qiita/items/c686397e4a0f4f11683d
(空行)

ダイアグラム

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

PlantUMLを使う

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

````plantuml
Bob->Alice : Hello!

結果

Mermaidを使う

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

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

結果