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

Last updated at 2024-07-31Posted at 2024-07-31

本記事について

Markdown記法で（一部HTMLが紛れていますが）表現できるものについて調べていたのでその備忘録。
前提として、インストール済み拡張機能がVScodeにインストール済みであることを念頭に置いてください。
また、Qiita 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）： <s>DDDD</s>, <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）： AAAA
太字： BBBB, BBBB
太字（HTML）： BBBB, BBBB
斜体かつ太字： CCCC, CCCC
斜体かつ太字（HTML)： CCCC
打消し線： ~~DDDD~~
打消し線（HTML）： ~~DDDD~~, DDDD
下線（HTML）： EEEE, EEEE, EEEE, EEEE
上線（HTML）： FFFF, FFFF, FFFF, FFFF, FFFF
上付き（HTML）： x⁴
下付き（HTML）： x₄
エスケープ： <pre>, \, / , &

折りたたみ

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

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

画面表示：

詳細はこちら

詳細の内容が表示される

詳細はこちら（ネスト）

詳細の内容の中に詳細

詳細はこちら

詳細の内容が表示される

水平線

___

***

---

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

<hr>

画面表示：

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

改行

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

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

画面表示：

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

TEXT
AAA

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

箇条書き

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

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

画面表示：

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

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

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

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

画面表示：

todo1
todo2
todo3
todo4

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

参照

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

* [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
外部参照
#内部参照
#内部参照: id-selector
画像表示

テーブル

| `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

Markdownの装飾は聞かない模様
AAA	BBB	CCC
A	B	C
D	E	F
G	H	I

引用

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

画面表示：

引用

引用の引用

引用の引用の引用

引用の引用の引用の引用

コード

内部表示用にバッククォートをアンダースコア'_'に置換してあります

* インライン： `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 {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}')

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

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

Local Ref.

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

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

まとめ

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up