MarkdownとMDXの記法

Docusaurusは、Markdown 記法をサポートしています。また、いくつかの独自追加機能も存在します。

「フロントマター」（Front Matter）

フロントマター を使用することで、ページの情報を追加で記述することができます。

my-doc.md

---
id: my-doc-id
title: タイトル
description: 説明文
slug: /my-custom-url
---

## 見出し2

本文と[リンク](./hello.md)

注意

「フロントマター」という考え方と文法はMarkdownに共通ですが、項目名はDocusaurusの独自機能です。

リンク

絶対パスと相対パスのリンクを、どちらも使用できます。

[ページの作り方](/create-a-page)に詳細を書いています。

[ページの作り方](./create-a-page.md)に詳細を書いています。

画像

画像の掲載も可能です。

staticフォルダに画像を格納することもできますが、どこでも大丈夫です。

staticフォルダに格納した場合、以下のように書くこともできます。

(static/img/docusaurus.png):

![Docusaurusのロゴ](/img/docusaurus.png)

相対パスも使用できます。

![Docusaurusのロゴ](./img/docusaurus.png)

外部サイトの画像も呼び出すことができます。

![Googleのロゴ](https://www.google.co.jp/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png)

コードブロック

コードブロックとシンタックスハイライト（プログラミング言語の色つけ装飾）に対応しています。色は自動でつきますが、言語を指定する必要があります。

```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
  return <h1>Hello, Docusaurus!</h1>;
}
```

src/components/HelloDocusaurus.js

function HelloDocusaurus() {
  return <h1>Hello, Docusaurus!</h1>;
}

Docusaurus独自の文法

危険

以下の機能はDocusaurusに独自のものです。Notionなどでは動作しません。

ヒント欄

Docusaurusは「ヒント欄（admonitions）」を作成することができます。

:::tip[My tip]

Use this awesome feature option

:::

:::danger[Take care]

This action is dangerous

:::

My tip

Use this awesome feature option

Take care

This action is dangerous

MDXとReactコンポーネント

MDXを利用すると、コンポーネントを作成して使いまわしたり、インタラクティブなコンテンツ（例：ボタン）などを作成できます。

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '20px',
      color: '#fff',
      padding: '10px',
      cursor: 'pointer',
    }}
    onClick={() => {
      alert(`You clicked the color ${color} with label ${children}`)
    }}>
    {children}
  </span>
);

This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !

This is <Highlight color="#1877F2">Facebook blue</Highlight> !

This is Docusaurus green !

This is Facebook blue !