mcpField
D
diffs

diffs

github.com/pierrecomputer開発6.4k488 回インストール1 日前に更新
リポジトリ

diffs について

@pierre/diffs は、シンタックスハイライト付きのファイルや差分を描画するライブラリです。React とバニラ JavaScript 向けの API があり、エディター、サーバーサイドレンダリング、ワーカーにも対応する任意のエントリーを備えています。

主な機能

  1. 01ハイライト付きファイル描画
  2. 02差分の描画
  3. 03React とバニラ JavaScript の API
  4. 04任意のエディター対応
  5. 05サーバーサイドレンダリングとワーカー

活用シーン

  1. 01アプリでソースファイルを表示
  2. 02コードレビュー用の差分ビューを構築
  3. 03React またはバニラ画面でファイルを編集
  4. 04サーバーでマークアップを事前生成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/pierrecomputer/pierre --skill diffs

インストール後、Claude Code で/diffsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
api-core.md
api-editor.md
api-highlighting.md
api-react.md
api-rendering.md
api-ssr.md
api-types.md
api-worker.md
recipe-annotations.md
recipe-code-view.md
recipe-custom-highlighting.md
recipe-edit-react.md
recipe-edit-vanilla.md
recipe-react.md
recipe-ssr.md
recipe-vanilla.md
recipe-workers.md

詳細

@pierre/diffs

@pierre/diffs を使って、シンタックスハイライト付きのファイルや差分をレンダリングします。オプションのエディター、SSR、ワーカーのエントリーを使うと、それぞれの機能を利用できます。

@pierre/highlights を使ったスタンドアロン HTML の生成やトークン生成については、 highlights スキルをお読みください。

インストール

pnpm add @pierre/diffs

アプリで React エントリーを使用する場合は、react と react-dom をインストールしてください。

API リファレンスを選択する

対象リファレンス
ルートコンポーネント、パース、ファイル拡張子 APIコア API
言語、テーマ、ハイライターの状態、ストリームハイライト API
レンダラー、マネージャー、DOM ヘルパー、比較、定数低レベルレンダリング API
共有データ、オプション、レンダリング、選択、エディターの型共有型
@pierre/diffs/reactReact API
@pierre/diffs/editエディター API
@pierre/diffs/ssrSSR API
@pierre/diffs/worker とワーカースクリプトワーカー API

レシピを選択する

タスクレシピ
React でファイルや差分をレンダリングするReact でレンダリングする
React を使わずにファイルや差分をレンダリングするバニラ JavaScript でレンダリングする
仮想化されたレビュー画面を構築するCodeView を使う
React の画面や CodeView を編集するReact で編集する
バニラの画面や CodeView を編集するバニラ JavaScript で編集する
サーバーでマークアップをプリロードするSSR を使う
ワーカープールを通じてハイライトするワーカーを使う
行注釈と選択を追加する注釈と選択を追加する
カスタム言語やテーマを登録するカスタムハイライトを登録する

コメント

Markdown 対応