エディター機能

Sprouti のエディターは、マークダウン記法に対応した高機能なテキストエディターです。
リアルタイムプレビューや差分表示など、効率的なドキュメント作成をサポートする機能が充実しています。

エディター画面の構成

1. エディター表示モード

デュアルペイン（推奨）

• 左側: マークダウンエディター
• 右側: リアルタイムプレビュー
• 特徴: 編集と確認を同時に行える

エディターのみ

• 全画面: エディターのみ表示
• 用途: 集中して編集したい場合

プレビューのみ

• 全画面: プレビューのみ表示
• 用途: 完成したドキュメントの確認

差分表示

• 分割表示: 変更前後の比較
• 用途: 編集内容の確認

2. ツールバー機能

マークダウン記法ガイド

見出し

# 大見出し (H1)

## 中見出し (H2)

### 小見出し (H3)

#### より小さな見出し (H4)

##### さらに小さな見出し (H5)

###### 最小見出し (H6)

テキスト装飾

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

リスト

## 箇条書きリスト

- 項目 1
- 項目 2
  - サブ項目
  - サブ項目

## 番号付きリスト

1. 最初の項目
2. 2 番目の項目
   1. サブ項目
   2. サブ項目

## チェックリスト

- [x] 完了済みタスク
- [ ] 未完了タスク
- [ ] 別の未完了タスク

リンクと画像

## リンク

[リンクテキスト](https://example.com)
[参照リンク][ref1]

[ref1]: https://example.com

## 画像

![代替テキスト](image.png)
![画像の説明](image.png 'タイトル')

テーブル

| 列 1     | 列 2     | 列 3     |
| -------- | -------- | -------- |
| データ 1 | データ 2 | データ 3 |
| データ 4 | データ 5 | データ 6 |

## 配置指定

| 左寄せ |  中央  | 右寄せ |
| :----- | :----: | -----: |
| Left   | Center |  Right |

コードブロック

## インラインコード

変数 `variable` の値を確認

## コードブロック

```javascript
function hello() {
  console.log('Hello, World!');
}
```

## ファイル名付きコードブロック

```python:example.py
def main():
    print("Hello, Python!")

if __name__ == "__main__":
    main()
```

引用

> これは引用文です。
> 複数行にわたって
> 引用できます。

> ## 引用内見出し
>
> 引用の中でも**強調**や*斜体*が使えます。

水平線

---

---

エディター機能詳細

1. シンタックスハイライト

対応言語

• プログラミング言語: JavaScript, Python, Java, C++, Go, Rust 等
• マークアップ: HTML, XML, JSON, YAML 等
• その他: CSS, SQL, Shell Script 等

カスタムテーマ

• ライトモード対応テーマ
• ダークモード対応テーマ
• コントラスト調整機能

2. 差分表示機能

使用場面

• 編集前後の比較: 変更内容の確認
• バージョン比較: 異なる時点での内容比較
• 協業での確認: 他者の編集内容確認

表示形式

• 追加: 緑色のハイライト
• 削除: 赤色のハイライト
• 変更: 黄色のハイライト

3. 検索機能

基本検索

• Ctrl/Cmd + F: 検索ダイアログを開く
• 大文字小文字: 区別あり/なしの切り替え
• 正規表現: 高度なパターン検索