Skip to main content

注意書き

Markdownの基本構文に加え、3つのコロンでテキストを囲み、その後にその種類を示すラベルを付けることによる、特別な注意書き構文が利用できます。

例：

:::note

_Markdown_ `構文`を使った**内容**については、 [この`api`](#)を参照してください。

:::

:::tip

_Markdown_ `構文` を使った**内容**については、 [この`api`](#)を参照してください。

:::

:::info

_Markdown_ `構文` を使った**内容**については、 [この`api`](#)を参照してください。

:::

:::warning

Some **content** with _Markdown_ `syntax`. [この`api`](#)を参照してください。

:::

:::danger

_Markdown_ `構文` を使った**内容**については、 [この`api`](#)を参照してください。

:::
http://localhost:3000
メモ

Markdown 構文 を使った内容については、 このapiを参照してください。

ヒント

Markdown 構文 を使った内容については、 このapiを参照してください。

情報

Markdown 構文 を使った内容については、 このapiを参照してください。

警告

Some content with Markdown syntax. このapiを参照してください。

危険

Markdown 構文 を使った内容については、 このapiを参照してください。

Prettierとの併用​

Markdownファイルの整形にPrettierを使用している場合、Prettierがコードを自動整形して無効な注意書き構文にすることがあります。 この問題を回避するには、開始ディレクティブと終了ディレクティブの周りに空白行を追加します。 ここで紹介する例が、すべてコンテンツの周囲に空行があるのもこのためです。

<!-- Prettierにより改変されません -->
:::note

Hello world

:::

<!-- Prettierはこれを -->
:::note
Hello world
:::

<!-- このように改変する場合があります -->
::: note Hello world:::

タイトルの明記​

You may also specify an optional title.

:::note[_Markdown_ `構文`を**使った**タイトル！]

_Markdown_ `構文`を使った**内容**

:::
http://localhost:3000
Markdown 構文を使ったタイトル！

Markdown 構文を使った内容

入れ子になった注意書き​

注意書きは入れ子にすることができます。 親の注意書きのレベルごとに、コロン:の数を増やしてください。

:::::info[親]

親の内容

::::danger[子]

子の内容

:::tip[孫]

孫の内容

:::

::::

:::::
http://localhost:3000
親

親の内容

子

子の内容

孫

孫の内容

Admonitions with MDX​

You can use MDX inside admonitions too!

import Tabs from '@theme/Tabs';

import TabItem from '@theme/TabItem';

:::tip[タブ内で注意書きを使用]

<Tabs>
  <TabItem value="apple" label="リンゴ">リンゴです🍎</TabItem>
  <TabItem value="orange" label="ミカン">ミカンです🍊</TabItem>
  <TabItem value="banana" label="バナナ">バナナです🍌</TabItem>
</Tabs>

:::
http://localhost:3000
タブ内で注意書きを使用
リンゴです🍎

JSXでの使用方法​

Outside of Markdown, you can use the @theme/Admonition component to get the same output.

MyReactPage.jsx
import Admonition from '@theme/Admonition';

export default function MyReactPage() {
  return (
    <div>
      <Admonition type="info">
        <p>Some information</p>
      </Admonition>
    </div>
  );
}

The types that are accepted are the same as above: note, tip, danger, info, warning. Optionally, you can specify an icon by passing a JSX element or a string, or a title:

MyReactPage.jsx
<Admonition type="tip" icon="💡" title="Did you know...">
  Use plugins to introduce shorter syntax for the most commonly used JSX
  elements in your project.
</Admonition>
http://localhost:3000
💡Did you know...

Use plugins to introduce shorter syntax for the most commonly used JSX elements in your project.

Customizing admonitions​

There are two kinds of customizations possible with admonitions: parsing and rendering.

Customizing rendering behavior​

You can customize how each individual admonition type is rendered through swizzling. You can often achieve your goal through a simple wrapper. For example, in the follow example, we swap out the icon for info admonitions only.

src/theme/Admonition.js
import React from 'react';
import Admonition from '@theme-original/Admonition';
import MyCustomNoteIcon from '@site/static/img/info.svg';

export default function AdmonitionWrapper(props) {
  if (props.type !== 'info') {
    return <Admonition title="My Custom Admonition Title" {...props} />;
  }
  return <Admonition icon={<MyCustomNoteIcon />} {...props} />;
}

Customizing parsing behavior​

Admonitions are implemented with a Remark plugin. The plugin is designed to be configurable. To customize the Remark plugin for a specific content plugin (docs, blog, pages), pass the options through the admonitions key.

docusaurus.config.js
export default {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          admonitions: {
            keywords: ['note', 'tip', 'info', 'warning', 'danger'],
            extendDefaults: true,
          },
        },
      },
    ],
  ],
};

The plugin accepts the following options:

  • keywords: An array of keywords that can be used as the type for the admonition.
  • extendDefaults: Should the provided options (such as keywords) be merged into the existing defaults. Defaults to true.

The keyword will be passed as the type prop of the Admonition component.

Custom admonition type components​

By default, the theme doesn't know what do to with custom admonition keywords such as :::my-custom-admonition. It is your responsibility to map each admonition keyword to a React component so that the theme knows how to render them.

If you registered a new admonition type my-custom-admonition via the following config:

docusaurus.config.js
export default {
  // ...
  presets: [
    [
      'classic',
      {
        // ...
        docs: {
          admonitions: {
            keywords: ['my-custom-admonition'],
            extendDefaults: true,
          },
        },
      },
    ],
  ],
};

You can provide the corresponding React component for :::my-custom-admonition by creating the following file (unfortunately, since it's not a React component file, it's not swizzlable):

src/theme/Admonition/Types.js
import React from 'react';
import DefaultAdmonitionTypes from '@theme-original/Admonition/Types';

function MyCustomAdmonition(props) {
  return (
    <div style={{border: 'solid red', padding: 10}}>
      <h5 style={{color: 'blue', fontSize: 30}}>{props.title}</h5>
      <div>{props.children}</div>
    </div>
  );
}

const AdmonitionTypes = {
  ...DefaultAdmonitionTypes,

  // Add all your custom admonition types here...
  // You can also override the default ones if you want
  'my-custom-admonition': MyCustomAdmonition,
};

export default AdmonitionTypes;

Now you can use your new admonition keyword in a Markdown file, and it will be parsed and rendered with your custom logic:

:::my-custom-admonition[My Title]

It works!

:::
http://localhost:3000
My Title

It works!