メインコンテンツまでスキップ

Ⓜ️Markdown の特徴

Docusaurus は Markdown と幾つかの 追加機能 を有しています。

Front Matter​

Markdown ドキュメントには Front Matter と呼ばれる最上部で宣言するメタデータがあります:

my-doc.md
---
id: my-doc-id
title: ドキュメントのタイトル
description: ドキュメントの説明
slug: /my-custom-url
---

## Markdown 見出し

Markdown テキスト with [リンク](./hello.md)

リンク​

一般的な Markdown リンクは URL や相対パスをサポートしています。

[新規ページ作成](/02-create-a-page)方法を見てみましょう。
[新規ページ作成](./02-create-a-page.mdx)方法を見てみましょう。

結果: 新規ページ作成方法を見てみましょう。

画像​

一般的な Markdown 画像はサポートされています。

絶対パスで静的ディレクトリの画像を参照出来ます (static/img/caravan-kidstec.png):

![caravan-kidstec logo](/img/caravan-kidstec.png)

caravan-kidstec logo

相対パスでも同様に画像を参照出来ます。これは Markdown ファイルの近くに画像を保存したい時に役立ちます:

![caravan-kidstec logo](./img/caravan-kidstec.png)

コードブロック​

Markdown コードブロックはシンタックスハイライトをサポートしています。

```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
  return <h1>こんにちは、Docusaurus！</h1>;
}
```
src/components/HelloDocusaurus.js
function HelloDocusaurus() {
  return <h1>こんにちは、Docusaurus！</h1>;
}

アラート記法​

Docusaurus は特別な構文を使ってアラートとコールアウトを作成します:

:::tip[アドバイス]

この素敵なオプション機能を使って

:::

:::danger[注意]

この操作は危険です

:::
アドバイス

この素敵なオプション機能を使って

注意

この操作は危険です

MDX と React Components​

MDX はドキュメントをより 使い易く、そして Markdown 内での React components の利用を可能にします:

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '20px',
      color: '#fff',
      padding: '10px',
      cursor: 'pointer',
    }}
    onClick={() => {
      alert(`あなたは ${color} 色の ${children} ラベルをクリックしました`)
    }}>
    {children}
  </span>
);

これは <Highlight color="#25c2a0">Docusaurus グリーン</Highlight> !

これは <Highlight color="#1877F2">Facebook ブルー</Highlight> !

これは Docusaurus グリーン !

これは Facebook ブルー !