Riebeckite
Menu
Color mode

Diff

差分を読みやすい形でコンテンツ内に表示するための Plugin です。

導入

bash
npm install @riebeckite/plugin-diff

Plugin の export 名や設定項目は、実装と package README を一次情報として確認してください。Riebeckite の Plugin は riebeckite.config.ts の plugins に登録して利用します。

使用例

変更前後を記事内で説明するときに、diff コードブロックをそのまま読みやすく表示できます。

markdown
```diff
- const enabled = false;
+ const enabled = true;
```

コンテンツディレクトリが Git ワーキングツリー内にあるビルドでは、記事末尾にリビジョンパネルが追加され、過去の変更を追いかけられます。履歴の検索は content.directory を基準に行うため、ビルドの作業ディレクトリがモノレポのアプリ側であっても動作します。初期表示の差分はビルド時に描画し、選択した比較はブラウザ上で計算します。ツリーの外にある場合はパネル自体を追加しません。

使いどころ

この Plugin が必要な場合だけ追加してください。Preset に含まれている場合は、同じ Plugin を重複して登録する必要はありません。

実際の表示例が用意されている場合は、Plugin Showcase でも確認できます。

詳細仕様

設定項目、公開 API、制約、追加の使用例は package README を参照してください。Plugin 全体の仕組みは Plugin System、Plugin を作る場合は Writing a Plugin を参照してください。

History

1 changesCollapseExpand
1 + # Diff
2 +
3 + 差分を読みやすい形でコンテンツ内に表示するための Plugin です。
4 +
5 + ## 導入
6 +
7 + ```bash
8 + npm install @riebeckite/plugin-diff
9 + ```
10 +
11 + Plugin の export 名や設定項目は、実装と package README を一次情報として確認してください。Riebeckite の Plugin は `riebeckite.config.ts` の `plugins` に登録して利用します。
12 +
13 + ## 使用例
14 +
15 + 変更前後を記事内で説明するときに、diff コードブロックをそのまま読みやすく表示できます。
16 +
17 + ````markdown
18 + ```diff
19 + - const enabled = false;
20 + + const enabled = true;
21 + ```
22 + ````
23 +
24 + コンテンツディレクトリが Git ワーキングツリー内にあるビルドでは、記事末尾にリビジョンパネルが追加され、過去の変更を追いかけられます。履歴の検索は `content.directory` を基準に行うため、ビルドの作業ディレクトリがモノレポのアプリ側であっても動作します。初期表示の差分はビルド時に描画し、選択した比較はブラウザ上で計算します。ツリーの外にある場合はパネル自体を追加しません。
25 +
26 + ## 使いどころ
27 +
28 + この Plugin が必要な場合だけ追加してください。Preset に含まれている場合は、同じ Plugin を重複して登録する必要はありません。
29 +
30 + 実際の表示例が用意されている場合は、[Plugin Showcase](./showcase.ja.md) でも確認できます。
31 +
32 + ## 詳細仕様
33 +
34 + 設定項目、公開 API、制約、追加の使用例は package README を参照してください。Plugin 全体の仕組みは [Plugin System](../framework/plugin-system.ja.md)、Plugin を作る場合は [Writing a Plugin](./writing-a-plugin.ja.md) を参照してください。
35 +