QiitaのMarkdown記法を試してみた #Markdown

はじめに

今回は、QiitaのMarkdown記法を試してみることにします。
使用するMarkdown記法は、以下になります。

Code - コードの挿入
- Code blocks - コードブロック
- Code spans - コードスパン
Format Text - テキストの装飾
- Headings - 見出し
- Emphasis / Strong Emphasis - 強調・強勢
- Strikethrough - 打ち消し線
- Note - 補足説明
Lists - リスト
- HBullet List - 順序なしリスト
- Ordered List - 番号付きリスト
- Description List - 説明リスト
- Checkbox - チェックボックス
Blockquotes - 引用
Horizontal rules - 水平線
Links - リンク
Images - 画像埋め込み
テーブル

Code - コードの挿入

Code blocks - コードブロック

hoge.sql

    SELECT * FROM `hoge`;

書き方

``` sql: 書き方
    SELECT * FROM `hoge`;
```

diff表現

    - console.log('xxxx');
    + console.log('hoge');

書き方

``` diff_javascript
    - console.log("xxxx");
    + console.log("hoge");
```

Code spans - コードスパン

Google ChromeのConsole画面で、console.log("hoge")を実行した。

書き方

Google ChromeのConsole画面で、`console.log("hoge")`を実行した。

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

BigQueryで、SELECT * FROM `hoge`;というクエリを実行した。

書き方

BigQueryで、```SELECT * FROM `hoge`;```というクエリを実行した。

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

#ffffff

書き方

`#ffffff`

テキストの装飾

Headings - 見出し

これはH4タグです

書き方

#### これはH4タグです

Emphasis / Strong Emphasis - 強調・強勢

私の出身は、日本です。 / 私の出身は、日本です。

書き方

私の出身は、**日本**です。 / 私の出身は、*日本*です。

Strikethrough - 打ち消し線

~~私は、日本出身です。~~

書き方

~~私は、日本出身です。~~

Details - 折りたたみ

サンプルコード

hoge.js

console.log ('hoge');

書き方

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

``` javascript: hoge.js
console.log ('hoge');
```
</details>

Note - 補足説明

雨が降る予定です。

強い雨が降る予定です。土砂崩れに注意してください。

台風が接近しています、外出しないでください。

書き方

:::note info
雨が降る予定です。
:::
:::note warn
強い雨が降る予定です。土砂崩れに注意してください。
:::

:::note alert
台風が接近しています。外出しないでください。
:::

Lists - リスト

Bullet List - 順序なしリスト

あいうえお
かきくけこ
さしすせそ

書き方

- あいうえお
- かきくけこ
- さしすせそ

Ordered List - 番号付きリスト

1. aiueo
2. kakikukeko
3. sashisuseso

書き方

1\. aiueo
2\. kakikukeko
3\. sashisuseso

Description List - 説明リスト

なす: 紫色の野菜

書き方

<dl>
  <dt>なす</dt>
  <dd>紫色の野菜</dd>
</dl>

Checkbox - チェックボックス

はい
いいえ

書き方

- [x] はい
- [ ] いいえ

Blockquotes - 引用

淡路島は周囲を瀬戸内海と大阪湾に囲まれており、人形浄瑠璃なども有名です。

書き方

> 淡路島は周囲を瀬戸内海と大阪湾に囲まれており、人形浄瑠璃なども有名です。

Horizontal rules - 水平線

あいうえお

かきくけこ

書き方

あいうえお
* * *
かきくけこ

その他の水平線のMarkdown記法
***
*****
- - -
---------------------------------------

Links - リンク

Bing
Google
Yahoo!

書き方

[Bing](https://www.bing.com/?cc=jp "Bing")
[Google](https://www.google.com/)
[Yahoo!][Yahoo!] 

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

Images - 画像埋め込み

書き方

![500x500](https://place-hold.it/500x500)
<img width="250" src="https://place-hold.it/500x500">

テーブル

Left align	Right align	Center align
Hoge	Hoge	Hoge

書き方

| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| Hoge       | Hoge        | Hoge         |

※HTML形式で入力することも可能

QiitaのMarkdown記法を試してみた