Docusaurus でつくるドキュメントサイト #5 ブログ編

---
slug: markdown
authors:
  - brackets
  - duck
tags:
  - Markdown
  - MDX
draft: true
---

# Markdown サンプル

このページでは、ブログ記事で使用できる Markdown の記法をまとめています。

---

## 見出し

# 見出しレベル 1
## 見出しレベル 2
### 見出しレベル 3
#### 見出しレベル 4
##### 見出しレベル 5
###### 見出しレベル 6

<!--more-->

---

## 画像

![代替テキスト](/img/docusaurus.png)

画像は、以下の参照形式にも対応しています。

![代替テキスト][1]

[1]: /img/docusaurus.png

---

## テキスト

次の空行までのテキストのまとまりが段落テキストとして扱われます。

行末の半角スペース 2 つで  
改行できます。

**強調テキスト**（strong）

*強調テキスト*（em）

~~取り消し線~~（del）

---

## リンク

[Markdown Features | Docusaurus](https://docusaurus.io/docs/markdown-features)

リンクは、以下の参照形式にも対応しています。

[Markdown Features | Docusaurus][2]

[2]: https://docusaurus.io/docs/markdown-features

URL 形式やメール形式のテキストは、自動的にリンクが付与されます。

www.example.com  
https://example.com  
[email protected]

---

## リスト

- リスト項目
- リスト項目
    - リスト項目
- リスト項目

1. リスト項目
2. リスト項目
3. リスト項目

---

## コード

以下は `sidebars.js` の例です。

```js
const sidebars = {
  tutorialSidebar: [
    {
      type: 'autogenerated',
      dirName: '.'
    }
  ],
};

module.exports = sidebars;
```

---

## 引用

> The power of the Web is in its universality.  
> Access by everyone regardless of disability is an essential aspect.

— Tim Berners-Lee, Inventor of the World Wide Web

---

## タスクリスト

- [x] タスク 1
- [ ] タスク 2
- [x] タスク 3

---

## 表

| 見出しセル | 見出しセル |
| --- | --- |
| データセル | データセル |
| データセル | データセル |
| データセル | データセル |

| 左揃え | 中央揃え | 右揃え |
| :--- | :---: | ---: |
| foo | foo | foo |
| foo bar | foo bar | foo bar |
| foo bar baz | foo bar baz | foo bar baz |

---

## コードブロック（拡張機能）

### タイトル

```js title="sidebars.js"
const sidebars = {
  tutorialSidebar: [
    {
      type: 'autogenerated',
      dirName: '.'
    }
  ],
};

module.exports = sidebars;
```

### 行ハイライト

```js
const sidebars = {
  tutorialSidebar: [
    {
      type: 'doc',
      // highlight-next-line
      id: 'index',
    },
    {
      type: 'doc',
      id: 'information',
    },
    // highlight-start
    {
      type: 'doc',
      id: 'markdown',
    },
    // highlight-end
  ],
};

module.exports = sidebars;
```

### 行番号

```js showLineNumbers
const sidebars = {
  tutorialSidebar: [
    {
      type: 'doc',
      id: 'index',
    },
    {
      type: 'doc',
      id: 'information',
    },
    {
      type: 'doc',
      id: 'markdown',
    },
  ],
};

module.exports = sidebars;
```

### Docusaurus npm2yarn remark plugin

```bash npm2yarn
npm install @docusaurus/remark-plugin-npm2yarn
```

---

## 折りたたみ要素

<details>
  <summary>アコーディオン</summary>
  <p><code>&lt;details&gt;</code> と <code>&lt;summary&gt;</code> のスタイルが用意されています。</p>
</details>

---

## Admonitions

:::note

[Docusaurus](#) は、*React ベース*でつくられた**ドキュメントサイト**に特化した `SSG` です。

:::

:::tip

[Docusaurus](#) は、*React ベース*でつくられた**ドキュメントサイト**に特化した `SSG` です。

:::

:::info

[Docusaurus](#) は、*React ベース*でつくられた**ドキュメントサイト**に特化した `SSG` です。

:::

:::caution

[Docusaurus](#) は、*React ベース*でつくられた**ドキュメントサイト**に特化した `SSG` です。

:::

:::danger

[Docusaurus](#) は、*React ベース*でつくられた**ドキュメントサイト**に特化した `SSG` です。

:::

:::note メモ

[Docusaurus](#) は、*React ベース*でつくられた**ドキュメントサイト**に特化した `SSG` です。

:::

---

## 脚注

脚注[^1]を加えることができます[^2]。

[^1]: 脚注の例です。
[^2]: **脚注内**で*一部*の [`Markdown` 記法](#)を使用できます。

---

## タブ

<Tabs>
  <TabItem value="html" label="HTML" default>
    HTML は HyperText Markup Language の略語です。
  </TabItem>
  <TabItem value="css" label="CSS">
    CSS は Cascading Style Sheets の略語です。
  </TabItem>
  <TabItem value="svg" label="SVG">
    SVG は Scalable Vector Graphics の略語です。
  </TabItem>
</Tabs>

`groupId` 属性の値をそろえることで、タブの切り替えを同期させることができます。

<Tabs groupId="operating-systems">
  <TabItem value="win" label="Windows">
    <b>Ctrl + C</b> で選択したテキストをコピーできます。
  </TabItem>
  <TabItem value="mac" label="macOS">
    <b>Command + C</b> で選択したテキストをコピーできます。
  </TabItem>
</Tabs>

<Tabs groupId="operating-systems">
  <TabItem value="win" label="Windows">
    <b>Ctrl + V</b> でコピーしたテキストをペーストできます。
  </TabItem>
  <TabItem value="mac" label="macOS">
    <b>Command + V</b> でコピーしたテキストをペーストできます。
  </TabItem>
</Tabs>

---

## カスタムコンポーネント

import Marker from '@site/src/components/Marker';

HTML は <Marker>HyperText Markup Language</Marker> の略語です。

CSS は <Marker color="cyan">Cascading Style Sheets</Marker> の略語です。

SVG は <Marker color="pink">Scalable Vector Graphics</Marker> の略語です。