ほとんどのドキュメントページはテキストで構成されていますが、追加の構文を使用することで、より読みやすいページを作成できます。

Markdown

ページはMarkdownで記述します。Markdownドキュメントは、どのテキストエディタでも簡単に編集やプレビューが可能です。以下にドキュメントページの非常に単純な例を示します。

# Example page

This is an example page with a title and some text.

VRChat CreationのドキュメントはDocusaurusで構築されています。DocusaurusはMarkdownファイルをWebページに変換します：

DocusaurusはMarkdownの拡張であるMDXを使用します。DocusaurusとMDXを活用することで、ドキュメントをさまざまな方法で充実させることができます。

変更のプレビュー

VRChatのドキュメントに対して複雑な変更を提案したい場合は、手元のコンピュータでプレビューを行うことを推奨します。これにより、変更内容がWebサイト上でどのように表示されるかを確認できます。

変更内容をプレビューするには、GitHub上の手順に従ってください：

1. GitHubでcreator documentation repositoryのフォークを作成します。
2. Gitを使用してフォークをクローンします。
3. Docs/フォルダーでnpm installを実行し、npmを使用してDocusaurusをインストールします。
4. Docs/フォルダーでnpm run startを実行し、npmでDocusaurusを起動します。

Front matter

Front matterは、Markdownファイルに関するオプションのデータです。これを使用すると、Docusaurusがドキュメント内でページを表示する方法を変更できます。

ファイルの先頭に、3つのダッシュ（---）で囲んでFront matterを追加できます。内容はYAMLとして解析されます。

---
unlisted: true
---

以下の表に、最もよく使われるFront matterフィールドを示します。Docusaurusのドキュメントですべてのリストを確認できます。

• titleプロパティは使用しないでください。代わりにMarkdownタイトル（#）を使用してください。
• last_update プロパティは使用しないでください。自動的に計算されます。

注意書き（Admonitions）

注意書きを使用して、簡潔かつ重要な情報を強調できます。注意書きは他のテキストとは異なる見た目で表示されます。

• 注意書きを多用しないでください。
• 注意書きのタイトルを上書きしないでください。

:::tip

Use this for important recommendations or shortcuts.

:::

:::info

Use this for important limitations or context.

:::

:::warning

Use this important warnings or potential errors.

:::

:::danger

Use this for actions that can lead to irreversible damage. 

:::

コードブロック

ページにUdonSharpのコードを掲載するには、バッククォート3つを使用してコードブロックを作成してください。これは、特に例を示す際に役立ちます。

```
// This is an example code block.
Debug.Log("Hello, world!");
```

// This is an example code block.
Debug.Log("Hello, world!");

追加のオプションを有効にすることで、コードブロックを読みやすくできます：

```csharp showLineNumbers title="Assets/Example.cs"
// This is an example code block.
Debug.Log("Hello, world!");
```

// This is an example code block.
Debug.Log("Hello, world!");

• csharp または cs を使用して、C# の 構文ハイライト を有効にしてください。
• showLineNumbers を使用して、行番号 を表示してください。
• 適切な場合は title="" を使用して、ファイル名 を表示してください。

コードタブ

Udon GraphのスクリーンショットとUdonSharpのコードを並べて表示できます。読者が好みの言語を選択でき、すべてのコードタブコンポーネントがその選択を同期します。

Tabs および TabItem をインポートして使用する例を以下に示します：

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

<Tabs groupId="udon-compiler-language">
<TabItem value="graph" label="Udon Graph">

![A screenshot of the Udon Graph.](/img/worlds/graph-helloworld.png)

</TabItem>
<TabItem value="cs" label="UdonSharp">

```cs showLineNumbers
private void Start()
{
    Debug.Log("Hello, world!");
}
```

</TabItem>
</Tabs>

private void Start()
{
    Debug.Log("Hello, world!");
}