Markdownプレビュー

ZetoPadにはドキュメントやノート用のリッチなMarkdownプレビューが含まれています。

プレビューを有効化

1. Markdownスニペットを開く（.md拡張子または言語をMarkdownに設定）
2. ツールバーの目のアイコン（👁）をクリック
3. またはCmd+Shift+Pを押してプレビューを切り替え

プレビューモード

並べて表示

エディターとプレビューを水平に分割して同時に表示。

プレビューのみ

エディターを非表示にして、レンダリングされたプレビューのみを表示。

サポートされるMarkdown機能

基本的な書式設定

**太字テキスト**
*斜体テキスト*
~~取り消し線~~
`インラインコード`

見出し

# 見出し 1
## 見出し 2
### 見出し 3

リスト

- 順序なし項目
- 別の項目
  - ネストした項目

1. 順序付き項目
2. 2番目の項目

コードブロック

```python
def hello():
    print("Hello, World!")
```

コードブロックはエディターと同じシンタックスハイライトを持ちます。

テーブル

| ヘッダー 1 | ヘッダー 2 |
|-----------|-----------|
| セル 1    | セル 2    |
| セル 3    | セル 4    |

リンクと画像

[リンクテキスト](https://example.com)
![代替テキスト](image.png)

引用

> これは引用です
> 複数行にわたることができます

タスクリスト

- [x] 完了したタスク
- [ ] 保留中のタスク

Mermaidダイアグラム

ZetoPadはMermaidダイアグラムをインラインでレンダリングします：

フローチャート

```mermaid
graph TD
    A[開始] --> B{決定}
    B -->|はい| C[何かをする]
    B -->|いいえ| D[別のことをする]
    C --> E[終了]
    D --> E
```

シーケンス図

```mermaid
sequenceDiagram
    クライアント->>サーバー: リクエスト
    サーバー->>データベース: クエリ
    データベース-->>サーバー: 結果
    サーバー-->>クライアント: レスポンス
```

クラス図

```mermaid
classDiagram
    Animal <|-- Dog
    Animal <|-- Cat
    Animal : +name
    Animal : +speak()
```

状態図

```mermaid
stateDiagram-v2
    [*] --> 待機
    待機 --> 処理中: 開始
    処理中 --> 完了: 完了
    完了 --> [*]
```

ライブプレビュー

入力と同時にプレビューがリアルタイムで更新され、変更をすぐに確認できます。

スタイリング

プレビューは現在のテーマカラーを使用します：

• 背景
• テキスト
• コードブロック
• リンク
• 見出し

これによりエディターの外観との一貫性が保たれます。