Docusaurus でつくるドキュメントサイト #4 Markdown 編

---
draft: true
---

# Markdown サンプル

const sidebars = {
  tutorialSidebar: [
    {
      type: 'doc',
      id: 'index',
    },
    {
      type: 'category',
      label: '固定ページ',
      link: {
        type: 'generated-index',
        title: '固定ページ',
        slug: '/pages',
      },
      items: [
        'pages/home',
        'pages/services',
      ]
    },
    {
      type: 'doc',
      id: 'information',
    },
    /* サンプルページを追加 */
    {
      type: 'doc',
      id: 'markdown',
    },
  ],
};

module.exports = sidebars;

```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 {5,11-14}
const sidebars = {
  tutorialSidebar: [
    {
      type: 'doc',
      id: 'index',
    },
    {
      type: 'doc',
      id: 'information',
    },
    {
      type: 'doc',
      id: 'markdown',
    },
  ],
};

module.exports = sidebars;
```

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

module.exports = sidebars;
```

npm install @docusaurus/remark-plugin-npm2yarn

// ...
const config = {
  // ...
  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          routeBasePath: '/',
          sidebarPath: require.resolve('./sidebars.js'),
          /* プラグインの設定を追加 */
          remarkPlugins: [
            [require('@docusaurus/remark-plugin-npm2yarn'), {sync: true}],
          ],
        },
        // ...
      }),
    ],
  ],
};

module.exports = config;

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

データを取得したディレクトリに移動して、npm パッケージをインストールします。

```bash npm2yarn
npm install
```

## TinaCMS の起動

以下のコマンドで TinaCMS が起動します。

```bash npm2yarn
npm start
```

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

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

<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 React from 'react';

export default function Marker({children, color = 'greenyellow'}) {
  return (
    <em
      style={{
        background: `linear-gradient(to top, transparent 0, ${color} 0, ${color} 0.3em, transparent 0)`,
        fontSize: '120%',
        fontWeight: 'bold',
        fontStyle: 'normal',
      }}
    >
      {children}
    </em>
  );
}

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> の略語です。

import MDXComponents from '@theme-original/MDXComponents';
import Marker from '@site/src/components/Marker';

export default {
  ...MDXComponents,
  Marker,
};

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

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

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