Markdown&HTMLのサンプル集（VScode上で表現）

# 本記事について

Markdown記法で（一部HTMLが紛れていますが）表現できるものについて調べていたのでその備忘録。
前提として、[インストール済み拡張機能](#インストール済み拡張機能)がVScodeにインストール済みであることを念頭に置いてください。
また、Qiita Markdownとの表現の相違があったりするので（例えば、コードブロック）その点は注意が必要です。（提供されているMarkdownにはいろいろな亜種が存在するので。）

## インストール済み拡張機能

* [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)
* [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)

## 参照した記事

https://qiita.com/papuriko/items/1e6918d646e6777dd0d5

https://qiita.com/shti_f/items/b819d7fd8cb79ae29687

https://growi.cloud/blog/3044

https://gedevan-aleksizde.github.io/rmarkdown-cookbook/number-lines.html#number-lines

# 本文

```markdown
# 見出し

## 中見出し

### 小見出し
```

画面表示：

# 見出し

## 中見出し

### 小見出し


### 文字列の装飾

#### 強調

```markdown
* 斜体： *AAAA*, _AAAA_
* 斜体（HTML）： <i>AAAA</i>
* 太字： **BBBB**, __BBBB__
* 太字（HTML）： <b>BBBB</b>, <strong>BBBB</strong>
* 斜体かつ太字： ***CCCC***, ___CCCC___
* 斜体かつ太字（HTML)： <i><b>CCCC</b></i>
* 打消し線： ~~DDDD~~
* 打消し線（HTML）： 
DDDD
, <span style="text-decoration: line-through">DDDD</span>
* 下線（HTML）： <u>EEEE</u>, <span style="text-decoration:underline;">EEEE</span>, <span style="text-decoration:underline wavy 1.2px;">EEEE</span>, <span style="text-decoration:underline dotted;">EEEE</span>
* 上線（HTML）： <span style="text-decoration:overline;">FFFF</span>, <span style="text-emphasis:filled;">FFFF</span>, <span style="text-emphasis:circle;">FFFF</span>, <span style="text-emphasis:filled double-circle;">FFFF</span>, <span style="text-emphasis:sesame;">FFFF</span>
* 上付き（HTML）： x<sup>4</sup>
* 下付き（HTML）： x<sub>4</sub>
* エスケープ： \<pre\>, \\, \/ , &amp;
```


画面表示：

* 斜体： *AAAA*, _AAAA_
* 斜体（HTML）： <i>AAAA</i>
* 太字： **BBBB**, __BBBB__
* 太字（HTML）： <b>BBBB</b>, <strong>BBBB</strong>
* 斜体かつ太字： ***CCCC***, ___CCCC___
* 斜体かつ太字（HTML)： <i><b>CCCC</b></i>
* 打消し線： ~~DDDD~~
* 打消し線（HTML）： 
DDDD
, <span style="text-decoration: line-through">DDDD</span>
* 下線（HTML）： <u>EEEE</u>, <span style="text-decoration:underline;">EEEE</span>, <span style="text-decoration:underline wavy 1.2px;">EEEE</span>, <span style="text-decoration:underline dotted;">EEEE</span>
* 上線（HTML）： <span style="text-decoration:overline;">FFFF</span>, <span style="text-emphasis:filled;">FFFF</span>, <span style="text-emphasis:circle;">FFFF</span>, <span style="text-emphasis:filled double-circle;">FFFF</span>, <span style="text-emphasis:sesame;">FFFF</span>
* 上付き（HTML）： x<sup>4</sup>
* 下付き（HTML）： x<sub>4</sub>
* エスケープ： \<pre\>, \\, \/ , &amp;


### 折りたたみ

```markdown
<details><summary>詳細はこちら</summary>
詳細の内容が表示される
</details>

<details><summary>詳細はこちら（ネスト）</summary>
詳細の内容の中に詳細<br>
<details style="padding-left:16px;"><summary>詳細はこちら</summary>
詳細の内容が表示される
</details>
</details>
```

画面表示：

<details><summary>詳細はこちら</summary>
詳細の内容が表示される
</details>

<details><summary>詳細はこちら（ネスト）</summary>
詳細の内容の中に詳細<br>
<details style="padding-left:16px;"><summary>詳細はこちら</summary>
詳細の内容が表示される
</details>
</details>

### 水平線

```markdown
___

***

---

<div style="margin:0;border-bottom:4px solid #CCC"></div>

<hr>
```

画面表示：
___

***

---

<div style="margin:0;border-bottom:4px solid #CCC"></div>

<hr>

※Qiita上ではdivによる水平線は表現できていないようです。（基本的にHTMLべた書きはダメでした。。。以降も同様。）



### 改行

```markdown
TEXT
AAA（文字列の後に2つの半角スペース）

TEXT
AAA<br>
TEXT（改行タグ　※改行タグは行けそう？）
AAA
```

画面表示：

TEXT
AAA（文字列の後に2つの半角スペース）

TEXT
AAA<br>
TEXT（改行タグ　※改行タグは行けそう？）
AAA


### 箇条書き

```markdown
* 箇条書き *, +, -
* ネストも可能
  - ddd
  - eee
  - fff
      + 111
      + 222
      + 333

1. 番号付き
2. ネストも可能
    1. 壱壱壱壱
    2. 弐弐弐弐
    3. 参参参参
        1. 肆肆肆肆
        2. 伍伍伍伍
        3. 陸陸陸陸
```

画面表示：

* 箇条書き *, +, -
* ネストも可能
  - ddd
  - eee
  - fff
      + 111
      + 222
      + 333

1. 番号付き
2. ネストも可能
    1. 壱壱壱壱
    2. 弐弐弐弐
    3. 参参参参
        1. 肆肆肆肆
        2. 伍伍伍伍
        3. 陸陸陸陸


### チェックボックス(Markdown All in Oneで提供されるコンポーネント)

```markdown
- [x] todo1
- [ ] todo2
- [ ] todo3
- [x] todo4
```

画面表示：

- [x] todo1
- [ ] todo2
- [ ] todo3
- [x] todo4

※Qiita上では非活性に見えますね。

### 参照

※画像表示についてはMarkdown表示だとでかすぎるとか、横並びしたい場合に表現が難しいかも？と思ったのでほとんどHTMLです。）

```markdown
* [google](https://www.google.co.jp/)
* [外部参照](/test.md)　（※ローカルでは参照可能）
* [#内部参照](#見出し)
* [#内部参照: id-selector](#local_ref)　（※ローカルでは参照可能）
* 画像表示

![chrome logo](/img/chrome_logo.png)

* 画像表示（リンク付き）

[![chrome logo](/img/chrome_logo.png)](https://www.google.co.jp/)

* 画像表示（リンク付き：HTML）

<a href="https://www.google.co.jp/"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>

<a href="https://www.google.co.jp/"><img alt="chrome_logo" src="/img/chrome_logo.png" height="80px"></a>


* 画像表示（リンク付き：HTML inline-block）

<div style="display:block;">
<a href="https://www.google.co.jp/" style="display:inline-block;padding-right:20px;"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>
<a href="https://www.google.co.jp/" style="display:inline-block;padding-right:20px;"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>
<a href="https://www.google.co.jp/" style="display:inline-block;padding-right:20px;"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>
<a href="https://www.google.co.jp/" style="display:inline-block;padding-right:20px;"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>
<a href="https://www.google.co.jp/" style="display:inline-block;padding-right:20px;"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>
<a href="https://www.google.co.jp/" style="display:inline-block;padding-right:20px;"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>
<a href="https://www.google.co.jp/" style="display:inline-block;padding-right:20px;"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>
<a href="https://www.google.co.jp/" style="display:inline-block;padding-right:20px;"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>
<a href="https://www.google.co.jp/" style="display:inline-block;padding-right:20px;"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>
<a href="https://www.google.co.jp/" style="display:inline-block;padding-right:20px;"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>
<a href="https://www.google.co.jp/" style="display:inline-block;padding-right:20px;"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>
<a href="https://www.google.co.jp/" style="display:inline-block;padding-right:20px;"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>
</div><figcaption>リンク付き画像の横並び</figcaption><br>

* 画像表示（リンク付き：HTML flex-box）

<div style="display:flex; column-gap:20px; flex-wrap:wrap;">
<a href="https://www.google.co.jp/"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>
<a href="https://www.google.co.jp/"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>
<a href="https://www.google.co.jp/"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>
<a href="https://www.google.co.jp/"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>
<a href="https://www.google.co.jp/"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>
<a href="https://www.google.co.jp/"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>
<a href="https://www.google.co.jp/"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>
<a href="https://www.google.co.jp/"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>
<a href="https://www.google.co.jp/"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>
<a href="https://www.google.co.jp/"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>
<a href="https://www.google.co.jp/"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>
<a href="https://www.google.co.jp/"><img alt="chrome_logo" src="/img/chrome_logo.png" width="50px"></a>
<figcaption>リンク付き画像の横並び</figcaption>
</div>
```

画面表示（画像についてはローカルでキャプチャしたものを一部表示）：

* [google](https://www.google.co.jp/)
* [外部参照](/test.md)
* [#内部参照](#見出し)
* [#内部参照: id-selector](#local_ref)
* 画像表示

![スクリーンショット 2024-07-31 115249.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3275023/7de866e3-84e3-5638-6cdf-46604935f069.png)




### テーブル

```markdown
| `Left`  | `Center` | `Right` |
|:----|:----:|----:|
|A11|A12|A13|
|A21|A22|A23|
|A31|A32|A33|


<table>
<caption>Markdownの装飾は聞かない模様</caption>
<thead>
<tr>
<th>AAA</th><th>BBB</th><th>CCC </th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
<tr>
<td>D</td><td>E</td><td>F</td>
</tr>
<tr>
<td>G</td><td>H</td><td>I</td>
</tr>
</tbody>
</table>
```

画面表示：

| `Left`  | `Center` | `Right` |
|:----|:----:|----:|
|A11|A12|A13|
|A21|A22|A23|
|A31|A32|A33|


<br>
<table>
<caption>Markdownの装飾は聞かない模様</caption>
<thead>
<tr>
<th>AAA</th><th>BBB</th><th>CCC </th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
<tr>
<td>D</td><td>E</td><td>F</td>
</tr>
<tr>
<td>G</td><td>H</td><td>I</td>
</tr>
</tbody>
</table>

### 引用

```markdown
> 引用
>> 引用の引用
>>> 引用の引用の引用
>>>> 引用の引用の引用の引用
```

画面表示：

> 引用
>> 引用の引用
>>> 引用の引用の引用
>>>> 引用の引用の引用の引用

### コード

```markdown: 内部表示用にバッククォートをアンダースコア'_'に置換してあります
* インライン： `const javascript = document.querySelector('#selector');`

* ブロック：
___js: js {attr.output = ".numberLines"}
const javascript = document.querySelector('#selector');
console.log(javascript.innerHTML);
___

___python {attr.source = ".numberLines"}
python_obj = {
    'key' : 'value',
    'item1': 'item2',
    'item3': 'item4',
}
for key, val in python_obj.items():
    print(f'{key} : {val}')
___

___diff
- console.log("Goodbye");
+ console.log("Hello World");
___
```

画面表示：

* インライン： `const javascript = document.querySelector('#selector');`

* ブロック：
```js: js {attr.output = ".numberLines"}
const javascript = document.querySelector('#selector');
console.log(javascript.innerHTML);
```

```python:python {attr.source = ".numberLines"}
python_obj = {
    'key' : 'value',
    'item1': 'item2',
    'item3': 'item4',
}
for key, val in python_obj.items():
    print(f'{key} : {val}')
```

```diff
- console.log("Goodbye");
+ console.log("Hello World");
```

プレビュー画面（VScode上）：

![スクリーンショット 2024-07-31 112211.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3275023/134001a4-ff4f-ade3-23b1-d36ef454545e.png)


### Local Ref.

`<div id="local_ref">ローカル参照</ｄ>`

※VScode上ではdivタグそのままを配置することでリンクすることが可能。（[参照リンクがある場所](#参照)）


# まとめ

途中、HTMLがてんこ盛りになってますが概ねMarkdown表現を網羅できたかと思います。
次回はいい感じの文書のフォーマットを作製したりしたいですね。
後は、Markdownは方言みたいなものがたくさんあるので、できるだけ採用率の高い構文を使用していきたいですね。（そこまでは調査していないですが、、、）