Skip to main content

マークダウンの機能

Docusaurus uses Markdown as its main content authoring format.

Learn Markdown

You can learn Markdown in 10 minutes.

Docusaurus uses modern tooling to help you create interactive documentation.

The MDX compiler transforms Markdown files to React components, and allows you to use JSX in your Markdown content. This enables you to easily interleave React components within your content, and create delightful learning experiences.

Use the MDX Playground

The MDX playground is your new best friend!

It is a very helpful debugging tool that shows how the MDX compiler transforms Markdown to React.

Options: select the right format (MDX or CommonMark) and the following plugins Docusaurus uses: remark-gfm, remark-directive, rehype-raw.

MDX vs. CommonMark​

Docusaurus compiles both .md and .mdx files to React components using the MDX compiler, but the syntax can be interpreted differently depending on your settings.

The MDX compiler supports 2 formats:

  • The MDX format: a powerful parser allowing the usage of JSX
  • The CommonMark format: a standard-compliant Markdown parser that does not allow the usage of JSX

By default, Docusaurus v3 uses the MDX format for all files (including .md files) for historical reasons.

It is possible to opt-in for CommonMark using the siteConfig.markdown.format setting or the format: md front matter.

how to use CommonMark

If you plan to use CommonMark, we recommend the siteConfig.markdown.format: 'detect' setting. The appropriate format will be selected automatically, based on file extensions:

  • .md files will use the CommonMark format
  • .mdx files will use the MDX format
Experimental CommonMark support

The CommonMark support is experimental and currently has a few limitations.

標準機能​

Markdown is a syntax that enables you to write formatted content in a readable syntax.

### ドキュメントの一節

**太字の**テキスト・*斜体の*テキスト・[リンク](/)を含んだハローワールド

![画像代替テキスト](/img/docusaurus.png)
http://localhost:3000

ドキュメントの一節

太字のテキスト・斜体のテキスト・リンクを含んだハローワールド

画像代替テキスト

Markdownは宣言的

Some may assume a 1-1 correlation between Markdown and HTML, e.g., ![Preview](/img/docusaurus.png) will always become <img src="/img/docusaurus.png" alt="Preview" />, as-is. However, that is not the case.

The Markdown syntax ![message](url) only declaratively tells Docusaurus that an image needs to be inserted here, but we may do other things like transforming a file path to URL path, so the generated markup may differ from the output of other Markdown renderers, or a naïve hand-transcription to the equivalent JSX/HTML code.

In general, you should only assume the semantics of the markup (``` fences become code blocks; > becomes quotes, etc.), but not the actual compiled output.

フロントマター​

Front matter is used to add metadata to your Markdown file. All content plugins have their own front matter schema, and use the front matter to enrich the default metadata inferred from the content or other configuration.

Front matter is provided at the very top of the file, enclosed by three dashes ---. The content is parsed as YAML.

---
title: 文書の表題
more_data:
  - 追加データは、配列や
  - object: オブジェクトで
    ok: 与えることができます
---
情報

The API documentation of each official plugin lists the supported attributes:

enhance your front matter

Use the Markdown config parseFrontMatter function to provide your own front matter parser, or to enhance the default parser.

It is possible to reuse the default parser to wrap it with your own custom proprietary logic. This makes it possible to implement convenient front matter transformations, shortcuts, or to integrate with external systems using front matter that Docusaurus plugins do not support.

docusaurus.config.js
export default {
  markdown: {
    parseFrontMatter: async (params) => {
      // Reuse the default parser
      const result = await params.defaultParseFrontMatter(params);

      // Process front matter description placeholders
      result.frontMatter.description =
        result.frontMatter.description?.replaceAll('{{MY_VAR}}', 'MY_VALUE');

      // Create your own front matter shortcut
      if (result.frontMatter.i_do_not_want_docs_pagination) {
        result.frontMatter.pagination_prev = null;
        result.frontMatter.pagination_next = null;
      }

      // Rename an unsupported front matter coming from another system
      if (result.frontMatter.cms_seo_summary) {
        result.frontMatter.description = result.frontMatter.cms_seo_summary;
        delete result.frontMatter.cms_seo_summary;
      }

      return result;
    },
  },
};

引用​

Markdown quotes are beautifully styled:

> オープンソースのドキュメントサイトをメンテナンスするのは簡単だ。
>
> — Docusaurus
http://localhost:3000

オープンソースのドキュメントサイトをメンテナンスするのは簡単だ。

— Docusaurus

詳細折りたたみ​

Markdown can embed HTML elements, and details HTML elements are beautifully styled:

### 詳細折りたたみ要素の例

<details>
  <summary>クリックで切り替え</summary>
  <div>
    <div>詳しい内容</div>
    <br/>
    <details>
      <summary>
        入れ子になった折りたたみ要素 （サプライズあり）
      </summary>
      <div>😲😲😲😲😲</div>
    </details>
  </div>
</details>
http://localhost:3000

詳細折りたたみ要素の例

クリックで切り替え
詳しい内容

入れ子になった折りたたみ要素 （サプライズあり）

😲😲😲😲😲