Skip to main content

Markdown(Docusaurus)

docusaurusの独自マークダウンについて

見出しについて​

## 見出し2です

### 見出し3です

#### 見出し4です

##### 見出し5です

見出し2です​

見出し3です​

見出し4です​

見出し5です​

画像データ​

![circle](/img/document/markdown/circle.drawio.svg)

circle

![square](/img/document/markdown/square.drawio.svg)

square

![circle](/img/document/markdown/circle.drawio.svg)
![square](/img/document/markdown/square.drawio.svg)

circle square

![circle](/img/document/markdown/circle.drawio.svg)
  
![square](/img/document/markdown/square.drawio.svg)

circle

square

改行​

行末にスペースを2つ入れると改行されます

あいうえお  
かきくけこ
さしすせそ

あいうえお
かきくけこ さしすせそ

引用​

> これは引用です。
> これは引用です。これは引用です。
> > これは引用（入れ子）です

これは引用です。 これは引用です。これは引用です。

これは引用（入れ子）です

太字​

これは **太字** です。

これは 太字 です。

斜体​

これは *斜体* です。

これは 斜体 です。

太字+斜体​

これは ***太字+斜体*** です

これは 太字+斜体 です

訂正線​

これは ~~訂正線~~です。

これは 訂正線です。

リンク​

[google](https://www.google.co.jp/)  
[https://www.google.co.jp/](https://www.google.co.jp/)

google
https://www.google.co.jp/

danger

MDXのVer3(2?)以降では、以下記述(<>で囲む)はエラーとなる

<https://www.google.co.jp/>

アコーディオン(詳細折り畳み要素)​

<details>
  <summary>test hello</summary>

test hello

</details>
test hello

test hello

danger

MDXのVer3(2?)以降では、以下記述(detailsの後に改行を付けずsummaryを記述)はエラーとなる

<details><summary>test hello</summary>

test hello

</details>

コードブロック​

```js
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'fr'],
  },
}
```
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'fr'],
  },
}

コードブロック(ファイル名あり)​

```js title="docusaurus.config.js"
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'fr'],
  },
}
```
docusaurus.config.js
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'fr'],
  },
}

コードブロック(ハイライト表示)​

ハイライト表示を行いたい箇所に対して、
// highlight-startと// highlight-endで囲むとハイライト表示される

```js
module.exports = {
  i18n: {
    // highlight-start
    defaultLocale: 'en',
    locales: ['en', 'fr'],
    // highlight-end
  },
}
```
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'fr'],
  },
}

コードブロック(タブ)​

info

import Tabsとimport TabItemは先頭(見出し1の直後)に配置することを推奨します

詳細はこちらを参照

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
<TabItem value="dev" label="Dev">

```bash
echo Hello Dev
```

</TabItem>
<TabItem value="test" label="Test">

```bash
echo Hello Test
```

</TabItem>
<TabItem value="prod" label="Prod">

```bash
echo Hello Prod
```

</TabItem>
</Tabs>
echo Hello Dev

インラインコード​

これは `code` です

これは code です

Table​

|  TH  |  TH  |
| ---- | ---- |
|  TD  |  TD  |
|  TD  |  TD  |
|  TD  |  TD  |
THTH
TDTD
TDTD
TDTD
| ヘッダ１ | ヘッダ２ | ヘッダ３ |
| :--- | :---: | ---: |
| 左揃え１ | 中央揃え２ | 右揃え３ |
| XXXXXXXXX | XXXXXXXXX | XXXXXXXXX |
| abc | def | ghi |
ヘッダ１ヘッダ２ヘッダ３
左揃え１中央揃え２右揃え３
XXXXXXXXXXXXXXXXXXXXXXXXXXX
abcdefghi

Table(見出しのみ中央表示)​

| <center>ヘッダ１</center> | <center>ヘッダ２</center> | <center>ヘッダ３</center> |
| :--- | :---: | ---: |
| 左揃え１ | 中央揃え２ | 右揃え３ |
| XXXXXXXXX | XXXXXXXXX | XXXXXXXXX |
| abc | def | ghi |
ヘッダ１
ヘッダ２
ヘッダ３
左揃え１中央揃え２右揃え３
XXXXXXXXXXXXXXXXXXXXXXXXXXX
abcdefghi

Table(改行付)​

| ヘッダ１ | ヘッダ２ | ヘッダ３ |
| :--- | :---: | ---: |
| あいうえお<br></br>かきくけこ | あいうえおかきくけこ | あいうえおかきくけこ |
| あいうえおかきくけこ | あいうえお<br></br>かきくけこ | あいうえおかきくけこ |
| あいうえおかきくけこ | あいうえおかきくけこ | あいうえお<br></br>かきくけこ |
ヘッダ１ヘッダ２ヘッダ３
あいうえお
かきくけこ		あいうえおかきくけこあいうえおかきくけこ
あいうえおかきくけこあいうえお
かきくけこ		あいうえおかきくけこ
あいうえおかきくけこあいうえおかきくけこあいうえお
かきくけこ

HTML使用​

<font color="red">赤色のテスト</font>
<font color="blue">青色のテスト</font>
<font color="green">緑色のテスト</font>

**<font color="red">赤色のテスト</font>**
**<font color="blue">青色のテスト</font>**
**<font color="green">緑色のテスト</font>**
赤色のテスト 青色のテスト 緑色のテスト

赤色のテスト 青色のテスト 緑色のテスト

チェックリスト​

- [ ] これからやるタスク
- [x] 完了したタスク
  • これからやるタスク
  • 完了したタスク

箇条書き​

- リスト(-)
  - ネスト(space)
  • リスト(-)
    • ネスト(space)

番号付きリスト​

1. 番号リストA
    1. 番号リストA-1
    1. 番号リストA-2
1. 番号リストB
    1. 番号リストB-1
    1. 番号リストB-2
1. 番号リストC
  1. 番号リストA
    1. 番号リストA-1
    2. 番号リストA-2
  2. 番号リストB
    1. 番号リストB-1
    2. 番号リストB-2
  3. 番号リストC

番号付きリスト(間に画像を挟む)​

画像の前にスペースを1つ以上含めると連番になる
1. テスト1  
 ![circle](/img/document/markdown/circle.drawio.svg)
1. テスト2  
 ![square](/img/document/markdown/square.drawio.svg)
1. テスト3
  1. テスト1
    circle
  2. テスト2
    square
  3. テスト3

番号付きリスト(間にコードブロックを挟む)​

コードブロックの前にスペースを3つ以上含めると連番になる
1. テスト1

   ```bash
   test
   ```

1. テスト2

   ```bash title="test2"
   test2
   ```

1. テスト3

  1. テスト1

    test

  2. テスト2

    test2
    test2

  3. テスト3

番号付きリスト(間にアラートボックスを挟む)​

アラートボックスの前にスペースを3つ以上含めると連番になる
1. テスト1

   :::info
   test1
   :::

1. テスト2

   :::caution
   test2
   :::

1. テスト3

  1. テスト1

    info

    test1

  2. テスト2

    caution

    test2

  3. テスト3

番号付きリスト(間に箇条書きを挟む)​

箇条書きの前にスペースを4つ以上含めると連番になる
1. テスト1
    - 箇条書き1
1. テスト2
    - 箇条書き2
    - 箇条書き3
1. テスト3
    - 箇条書き4
    - 箇条書き5
  1. テスト1
    • 箇条書き1
  2. テスト2
    • 箇条書き2
    • 箇条書き3
  3. テスト3
    • 箇条書き4
    • 箇条書き5

水平線（罫線）​

***

アラートボックス/Admonitions(docusaurus独自)​

Admonitions(note)​

:::note
Your message here.
:::
note

Your message here.

Admonitions(danger)​

:::danger
Your message here.
:::
danger

Your message here.

Admonitions(tip)​

:::tip
Your message here.
:::
tip

Your message here.

Admonitions(info)​

:::info
Your message here.
:::
info

Your message here.

Admonitions(caution)​

:::caution
Your message here.
:::
caution

Your message here.

Admonitions(original)​

:::note[YOUR TITLE]
Your message here.
:::
YOUR TITLE

Your message here.