@riebeckite/plugin-code-annotations 0.0.21 → 0.0.22

package/README.md

@@ -1,8 +1,9 @@
 # @riebeckite/plugin-code-annotations
 
-VitePress/Docusaurus-style code block annotations: line highlighting, focus,
-and diff markers that work on plain `<pre><code>` blocks and on the line
-wrappers produced by `@riebeckite/plugin-code-enhance`.
+<!-- Generated from docs/docs/plugins/code-annotations.md. Edit the canonical documentation in docs/docs/plugins and run `pnpm docs:sync`. -->
+
+Renders code diffs with the language syntax highlighter and Riebeckite's code
+block UI.
 
 [日本語](./README_ja.md)
 
@@ -13,126 +14,55 @@ import { defineConfig } from "@riebeckite/core";
 import { codeAnnotations } from "@riebeckite/plugin-code-annotations";
 
 export default defineConfig({
-  // ...
   plugins: [codeAnnotations()],
 });
 ```
 
-The plugin registers its own `style.css`. It adds no client entry and no
-runtime JavaScript.
+Use it with `@riebeckite/plugin-code-enhance` to retain syntax highlighting,
+line numbers, the language label, and copy controls.
 
 ## Syntax
 
-### Line highlighting (fence meta)
-
-Add a brace range after the language, exactly like Docusaurus and VitePress.
-
-````md
-```js {2,4-5}
-const a = 1;
-const b = 2;
-const c = 3;
-const d = 4;
-const e = 5;
-```
-````
-
-Lines `2`, `4`, and `5` receive `rb-code__line--highlighted`.
-
-### Focus
-
-Use the `focus` meta group, or an inline `[!code focus]` marker. An optional
-count focuses the current line and the following lines.
-
-````md
-```js focus:{2}
-const a = 1;
-const b = 2;
-```
-````
-
-````md
-```js
-const a = 1; // [!code focus]
-const b = 2;
-```
-````
-
-`.rb-code__line--focused` is applied. `[!code focus:3]` focuses three lines
-starting at the marker.
-
-### Diff
-
-````md
-```js
-const kept = true;
-const added = true;    // [!code ++]
-const removed = false; // [!code --]
-```
-````
-
-The marker comment is removed from the rendered text, and the line receives
-`rb-code__line--added` or `rb-code__line--removed`.
-
-### Explicit highlight marker
+Use `diff` as the fence language and put the target language after it. Lines
+starting with `+` are additions, lines starting with `-` are removals, and all
+other lines are unchanged.
 
 ````md
-```js
-const value = 1; // [!code highlight]
+```diff js
++ const message = "Hello";
+- const message = "World";
+const unchanged = true;
 ```
 ````
 
-Marker comments are recognized with the `//`, `#`, `--`, and `<!-- -->`
-comment prefixes, so the same syntax works for JavaScript, shell, SQL, Lua,
-HTML, and other languages.
-
-## Options
-
-| Option | Type | Default | Description |
-| ------ | ---- | ------- | ----------- |
-| `className` | `string` | `"rb-code"` | Class on the block root (`<pre>` or `rehype-pretty-code` `<figure>`) |
-| `lineClassName` | `string` | `"rb-code__line"` | Class on generated line wrappers |
-| `highlightClassName` | `string` | `"rb-code__line--highlighted"` | Class for highlighted lines |
-| `addedClassName` | `string` | `"rb-code__line--added"` | Class for `[!code ++]` lines |
-| `removedClassName` | `string` | `"rb-code__line--removed"` | Class for `[!code --]` lines |
-| `focusClassName` | `string` | `"rb-code__line--focused"` | Class for focused lines |
-| `language` | `string` | unset | Only annotate blocks of this language |
-
-```ts
-codeAnnotations({ highlightClassName: "is-highlighted" });
-```
+The `+` and `-` markers are rendered separately from the code, so Shiki
+highlights the JavaScript, TypeScript, Python, JSON, or other target language
+without treating the marker as source code. The copy button copies the visible
+diff, including its markers.
 
-## Using with code-enhance
+An empty, malformed, or missing target language leaves the fence as an ordinary
+`diff` code block. A target language that the syntax highlighter does not know
+falls back to its normal unhighlighted rendering and does not fail the build.
 
-`@riebeckite/plugin-code-annotations` does not import or depend on
-`@riebeckite/plugin-code-enhance`. It detects both raw `<pre><code>` text and
-the `.line` wrappers emitted by `rehype-pretty-code`:
+## Integration
 
-- If line wrappers already exist, their classes are extended in place and the
-  existing `data-line` attribute is kept.
-- Otherwise the plugin wraps the raw code text into
-  `<span class="rb-code__line" data-line="N">` elements.
-
-Because `rehype-pretty-code` substitutes the `<code>` element, the plan is also
-mirrored into the preserved fence meta, so annotations still apply after
-code-enhance runs. Place `codeAnnotations()` after `codeEnhance()` in the
-plugins array; the plugin uses `order: 10` to run after code-enhance's
-highlighting regardless.
+The plugin transforms Markdown in its remark phase, records each line marker in
+fence metadata, then restores the markers and the existing
+`rr-code__line--add` / `rr-code__line--remove` classes in its rehype phase.
+`code-enhance` supplies the line wrappers and all code block UI. The plugin does
+not import it, so the two packages remain independently configurable.
 
 ## Exports
 
-- `codeAnnotations(options?)` / `codeAnnotationsPlugin(options?)` — plugin factory
-- `remarkCodeAnnotations(options?)` — remark transform
-- `rehypeCodeAnnotations(options?)` — rehype transform
-- `parseCodeAnnotations(meta)` — parse fence meta into a plan
-- `parseLineRanges(spec)` — parse `1,3-5` into line numbers
-- `collectCodeAnnotations(meta, code)` — parse meta plus inline markers
-- `resolveCodeAnnotationsOptions(options?)` — fill in defaults
-- Types: `CodeAnnotationsOptions`, `ResolvedCodeAnnotationsOptions`,
-  `CodeAnnotationPlan`, `CodeAnnotationKind`
+- `codeAnnotations()` / `codeAnnotationsPlugin()` — plugin factory
+- `remarkCodeAnnotations()` — Markdown transform
+- `rehypeCodeAnnotations()` — HTML transform
+- `collectCodeDiff(code)` — separates diff markers from source text
+- `serializeCodeDiff(plan)` / `deserializeCodeDiff(value)` — line-plan helpers
+- `encodeCodeDiffMeta(plan)` / `extractCodeDiffMeta(meta)` — metadata helpers
+- Types: `CodeDiffPlan`, `DiffMarker`
 
 ## See also
 
-- [Plugin guide](../../../docs/docs/reference/plugin-api.md)
+- [Plugin guide](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/reference/plugin-api.md)
 - [`@riebeckite/plugin-code-enhance`](../code-enhance/README.md)
-

package/README_ja.md

@@ -1,9 +1,8 @@
 # @riebeckite/plugin-code-annotations
 
-VitePress / Docusaurus 風のコードブロック装飾を加えるプラグインです。フェンスの
-メタ情報による行の強調と、`[!code ...]` のインラインマーカーによるフォーカス・
-差分表示に対応します。素の `<pre><code>` と
-`@riebeckite/plugin-code-enhance` の行ラッパーの両方で動作します。
+<!-- Generated from docs/docs/plugins/code-annotations.ja.md. Edit the canonical documentation in docs/docs/plugins and run `pnpm docs:sync`. -->
+
+差分のコードブロックを、対象言語のシンタックスハイライトとRiebeckiteのコードブロックUIで表示します。
 
 [English](./README.md)
 
@@ -14,124 +13,49 @@ import { defineConfig } from "@riebeckite/core";
 import { codeAnnotations } from "@riebeckite/plugin-code-annotations";
 
 export default defineConfig({
-  // ...
   plugins: [codeAnnotations()],
 });
 ```
 
-プラグインは `style.css` のみを登録します。クライアントエントリーはなく、
-実行時 JavaScript は追加しません。
+シンタックスハイライト、行番号、言語ラベル、コピー操作を使う場合は、
+`@riebeckite/plugin-code-enhance` と併用してください。
 
 ## 書き方
 
-### フェンスメタによる行の強調
-
-言語の後ろに波括弧で行範囲を書きます。Docusaurus や VitePress と同じ記法です。
-
-````md
-```js {2,4-5}
-const a = 1;
-const b = 2;
-const c = 3;
-const d = 4;
-const e = 5;
-```
-````
-
-2、4、5 行目に `rb-code__line--highlighted` が付きます。
-
-### フォーカス
-
-`focus` メタ、またはインラインの `[!code focus]` を使います。行数を指定すると
-その行から続く行までをまとめてフォーカスします。
-
-````md
-```js focus:{2}
-const a = 1;
-const b = 2;
-```
-````
-
-````md
-```js
-const a = 1; // [!code focus]
-const b = 2;
-```
-````
-
-`rb-code__line--focused` が付きます。`[!code focus:3]` なら 3 行分です。
-
-### 差分
-
-````md
-```js
-const kept = true;
-const added = true;    // [!code ++]
-const removed = false; // [!code --]
-```
-````
-
-マーカーのコメントは表示テキストから取り除かれ、行には
-`rb-code__line--added` または `rb-code__line--removed` が付きます。
-
-### 明示的な強調マーカー
+コードフェンスの言語に `diff` を指定し、その後に対象言語を書きます。`+` で始まる行は追加、
+`-` で始まる行は削除、それ以外は変更のない行として扱います。
 
 ````md
-```js
-const value = 1; // [!code highlight]
+```diff js
++ const message = "Hello";
+- const message = "World";
+const unchanged = true;
 ```
 ````
 
-マーカーは `//`、`#`、`--`、`<!-- -->` のコメント記法に対応します。JavaScript、
-シェル、SQL、Lua、HTML などで同じ書き方が使えます。
-
-## オプション
-
-| オプション | 既定値 | 内容 |
-| --- | --- | --- |
-| `className` | `"rb-code"` | ブロック直下（`<pre>` または `rehype-pretty-code` の `<figure>`）に付くクラス |
-| `lineClassName` | `"rb-code__line"` | 生成する行ラッパーのクラス |
-| `highlightClassName` | `"rb-code__line--highlighted"` | 強調行のクラス |
-| `addedClassName` | `"rb-code__line--added"` | `[!code ++]` 行のクラス |
-| `removedClassName` | `"rb-code__line--removed"` | `[!code --]` 行のクラス |
-| `focusClassName` | `"rb-code__line--focused"` | フォーカス行のクラス |
-| `language` | 未設定 | 指定した言語のブロックだけを対象にする |
-
-```ts
-codeAnnotations({ highlightClassName: "is-highlighted" });
-```
+`+` と `-` はコード本体とは別に描画されます。そのためJavaScript、TypeScript、Python、JSON
+などのシンタックスハイライトを妨げません。コピー操作では、表示された差分と同じくマーカーも含めてコピーします。
 
-## code-enhance との併用
+対象言語が空、形式が不正、または指定されていないフェンスは、通常の `diff` コードブロックとして扱います。
+シンタックスハイライトが対応していない言語を指定しても、ハイライトなしで表示され、ビルドは失敗しません。
 
-`@riebeckite/plugin-code-annotations` は
-`@riebeckite/plugin-code-enhance` を import せず、依存もしません。素の
-`<pre><code>` のテキストと、`rehype-pretty-code` が出力する `.line` ラッパーの
-両方を検出します。
+## 連携
 
-- 行ラッパーがすでにある場合は、既存のクラスに追記し、既存の `data-line` を
-  そのまま使います。
-- ない場合は、コード本文を
-  `<span class="rb-code__line" data-line="N">` に分割します。
+このプラグインはremark段階で差分マーカーをコード本体から分離し、フェンスメタ情報に記録します。rehype段階では、
+マーカーと既存の `rr-code__line--add` / `rr-code__line--remove` クラスを戻します。行ラッパーやコードブロックUIは
+`code-enhance` が提供します。両パッケージはimportで依存していないため、個別に設定できます。
 
-`rehype-pretty-code` は `<code>` 要素を差し替えるため、注釈プランは保持される
-フェンスメタにも複製します。これにより code-enhance の後でも注釈が適用されます。
-プラグイン配列では `codeEnhance()` の後に `codeAnnotations()` を置いてください。
-`order: 10` により、順序に関わらず強調処理の後に実行されます。
+## 公開API
 
-## 公開 API
-
-- `codeAnnotations(options?)` / `codeAnnotationsPlugin(options?)` — プラグインファクトリ
-- `remarkCodeAnnotations(options?)` — remark 変換
-- `rehypeCodeAnnotations(options?)` — rehype 変換
-- `parseCodeAnnotations(meta)` — フェンスメタをプランに変換
-- `parseLineRanges(spec)` — `1,3-5` を行番号に変換
-- `collectCodeAnnotations(meta, code)` — メタとインラインマーカーをまとめて解析
-- `resolveCodeAnnotationsOptions(options?)` — 既定値を補完
-- 型: `CodeAnnotationsOptions`、`ResolvedCodeAnnotationsOptions`、
-  `CodeAnnotationPlan`、`CodeAnnotationKind`
+- `codeAnnotations()` / `codeAnnotationsPlugin()` — プラグインファクトリ
+- `remarkCodeAnnotations()` — Markdown変換
+- `rehypeCodeAnnotations()` — HTML変換
+- `collectCodeDiff(code)` — 差分マーカーとコード本体を分離
+- `serializeCodeDiff(plan)` / `deserializeCodeDiff(value)` — 行情報の変換
+- `encodeCodeDiffMeta(plan)` / `extractCodeDiffMeta(meta)` — メタ情報の変換
+- 型: `CodeDiffPlan`、`DiffMarker`
 
 ## 関連資料
 
-- [プラグインシステム](../../../docs/docs/reference/plugin-api.ja.md)
+- [プラグインシステム](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/reference/plugin-api.ja.md)
 - [`@riebeckite/plugin-code-enhance`](../code-enhance/README_ja.md)
-

package/dist/index.d.ts

@@ -1,18 +1,6 @@
-import type { CodeAnnotationsOptions } from "./src/types.js";
-export type { CollectedCodeAnnotations, InlineCodeAnnotation, } from "./src/annotations.js";
-export { ANNOTATIONS_META_PREFIX, collectCodeAnnotations, createEmptyPlan, deserializeAnnotations, encodeAnnotationsMeta, extractAnnotationsMeta, hasAnnotations, parseCodeAnnotations, parseLineRanges, serializeAnnotations, stripInlineCodeAnnotation, } from "./src/annotations.js";
-export { DEFAULT_CODE_ANNOTATIONS_OPTIONS, resolveCodeAnnotationsOptions, } from "./src/options.js";
+export type { CodeDiffPlan, DiffMarker } from "./src/annotations.js";
+export { appendCodeDiffMeta, collectCodeDiff, deserializeCodeDiff, encodeCodeDiffMeta, extractCodeDiffMeta, removeCodeDiffMeta, serializeCodeDiff, } from "./src/annotations.js";
 export { rehypeCodeAnnotations } from "./src/rehype.js";
 export { remarkCodeAnnotations } from "./src/remark.js";
-export type { CodeAnnotationKind, CodeAnnotationPlan, CodeAnnotationsOptions, ResolvedCodeAnnotationsOptions, } from "./src/types.js";
-/**
- * VitePress/Docusaurus-style code block annotations: line highlighting from
- * fence meta and inline `[!code ...]` marker comments for focus, highlight,
- * and diff lines.
- *
- * Runs after `@riebeckite/plugin-code-enhance` (via `order`) so it can annotate
- * the line wrappers produced by `rehype-pretty-code` instead of re-wrapping
- * them. It never imports or depends on code-enhance.
- */
-export declare function codeAnnotations(options?: CodeAnnotationsOptions): import("@riebeckite/core").RiebeckitePlugin<import("./index.js").ResolvedCodeAnnotationsOptions>;
+export declare function codeAnnotations(): import("@riebeckite/core").RiebeckitePlugin<unknown>;
 export declare const codeAnnotationsPlugin: typeof codeAnnotations;

package/dist/index.js

@@ -1,188 +1,55 @@
 // index.ts
-import { createStyleAsset, definePlugin } from "@riebeckite/core";
-
-// src/options.ts
-var DEFAULT_CODE_ANNOTATIONS_OPTIONS = {
-  className: "rb-code",
-  lineClassName: "rb-code__line",
-  highlightClassName: "rb-code__line--highlighted",
-  addedClassName: "rb-code__line--added",
-  removedClassName: "rb-code__line--removed",
-  focusClassName: "rb-code__line--focused"
-};
-function resolveCodeAnnotationsOptions(options = {}) {
-  const resolved = {
-    className: options.className ?? DEFAULT_CODE_ANNOTATIONS_OPTIONS.className,
-    lineClassName: options.lineClassName ?? DEFAULT_CODE_ANNOTATIONS_OPTIONS.lineClassName,
-    highlightClassName: options.highlightClassName ?? DEFAULT_CODE_ANNOTATIONS_OPTIONS.highlightClassName,
-    addedClassName: options.addedClassName ?? DEFAULT_CODE_ANNOTATIONS_OPTIONS.addedClassName,
-    removedClassName: options.removedClassName ?? DEFAULT_CODE_ANNOTATIONS_OPTIONS.removedClassName,
-    focusClassName: options.focusClassName ?? DEFAULT_CODE_ANNOTATIONS_OPTIONS.focusClassName
-  };
-  const language = options.language?.trim();
-  if (language) resolved.language = language;
-  return resolved;
-}
+import { definePlugin } from "@riebeckite/core";
 
 // src/annotations.ts
-import { scanMarkdownFenceLines } from "@riebeckite/core";
-var ANNOTATIONS_META_PREFIX = "rb-annotations=";
-var ANNOTATION_KEYS = [
-  "highlight",
-  "added",
-  "removed",
-  "focus"
-];
-var FOCUS_META_PATTERN = /(?:^|\s)focus[:=]\{([^}]*)\}/g;
-var HIGHLIGHT_META_PATTERN = /\{([^{}]*)\}/g;
-var INLINE_ANNOTATION_PATTERN = /([ \t]*)(?:(?:\/\/|#|--)[ \t]*\[!code[ \t]+(focus|highlight|\+\+|--)(?::(\d+))?\]|<!--[ \t]*\[!code[ \t]+(focus|highlight|\+\+|--)(?::(\d+))?[ \t]*\][ \t]*-->)[ \t]*$/;
-function createEmptyPlan() {
-  return { highlight: [], added: [], removed: [], focus: [] };
-}
-function parseCodeAnnotations(meta) {
-  const plan = createEmptyPlan();
-  if (typeof meta !== "string" || meta.length === 0) return plan;
-  const rest = meta.replace(FOCUS_META_PATTERN, (_match, body) => {
-    addRanges(plan.focus, parseLineRanges(body));
-    return " ";
-  });
-  for (const match of rest.matchAll(HIGHLIGHT_META_PATTERN)) {
-    addRanges(plan.highlight, parseLineRanges(match[1] ?? ""));
-  }
-  return normalizePlan(plan);
-}
-function parseLineRanges(spec) {
-  const lines = [];
-  for (const part of spec.split(",")) {
-    const trimmed = part.trim();
-    if (trimmed === "") continue;
-    const range = /^(\d+)\s*-\s*(\d+)$/.exec(trimmed);
-    if (range) {
-      const first = Number(range[1]);
-      const second = Number(range[2]);
-      const from = Math.min(first, second);
-      const to = Math.max(first, second);
-      for (let line = from; line <= to; line += 1) lines.push(line);
-      continue;
-    }
-    if (/^\d+$/.test(trimmed)) lines.push(Number(trimmed));
-  }
-  return lines;
-}
-function stripInlineCodeAnnotation(line) {
-  const match = INLINE_ANNOTATION_PATTERN.exec(line);
-  if (!match) return { line, annotation: null };
-  const kind = normalizeKind(match[2] ?? match[4]);
-  if (!kind) return { line, annotation: null };
-  const rawCount = match[3] ?? match[5];
-  const parsedCount = rawCount === void 0 ? 1 : Number(rawCount);
-  const lineCount = Number.isFinite(parsedCount) ? Math.max(1, parsedCount) : 1;
-  const index = match.index ?? line.length;
-  const stripped = line.slice(0, index).replace(/[ \t]+$/, "");
-  return { line: stripped, annotation: { kind, lineCount } };
-}
-function collectCodeAnnotations(meta, code) {
-  const plan = parseCodeAnnotations(meta);
-  const strippedLines = [];
-  scanMarkdownFenceLines(code).forEach(({ value: rawLine, inFence }, index) => {
-    const { line, annotation } = inFence ? { line: rawLine, annotation: null } : stripInlineCodeAnnotation(rawLine);
-    strippedLines.push(line);
-    if (!annotation) return;
-    const lineNumber = index + 1;
-    if (annotation.kind === "focus") {
-      for (let focused = lineNumber; focused < lineNumber + annotation.lineCount; focused += 1) {
-        plan.focus.push(focused);
-      }
-      return;
-    }
-    plan[annotation.kind].push(lineNumber);
+var DIFF_META_PREFIX = "rb-diff=";
+function collectCodeDiff(code) {
+  const markers = [];
+  const lines = code.split("\n").map((line) => {
+    const marker = line.startsWith("+") || line.startsWith("-") ? line[0] : null;
+    markers.push(marker);
+    return marker ? line.slice(1) : line;
   });
-  const hasAnnotations2 = ANNOTATION_KEYS.some((key) => plan[key].length > 0);
-  return {
-    plan: hasAnnotations2 ? normalizePlan(plan) : createEmptyPlan(),
-    code: strippedLines.join("\n"),
-    hasAnnotations: hasAnnotations2
-  };
-}
-function normalizePlan(plan) {
-  return {
-    highlight: normalizeLines(plan.highlight),
-    added: normalizeLines(plan.added),
-    removed: normalizeLines(plan.removed),
-    focus: normalizeLines(plan.focus)
-  };
-}
-function hasAnnotations(plan) {
-  if (!plan) return false;
-  return ANNOTATION_KEYS.some((key) => plan[key].length > 0);
+  return { code: lines.join("\n"), plan: { markers } };
 }
-function serializeAnnotations(plan) {
-  return JSON.stringify(normalizePlan(plan));
+function serializeCodeDiff(plan) {
+  return JSON.stringify(plan);
 }
-function deserializeAnnotations(value) {
+function deserializeCodeDiff(value) {
   if (typeof value !== "string" || value === "") return null;
   try {
-    return coercePlan(JSON.parse(value));
+    const parsed = JSON.parse(value);
+    if (!Array.isArray(parsed.markers)) return null;
+    return {
+      markers: parsed.markers.map(
+        (marker) => marker === "+" || marker === "-" ? marker : null
+      )
+    };
   } catch {
     return null;
   }
 }
-function encodeAnnotationsMeta(plan) {
-  return `${ANNOTATIONS_META_PREFIX}${encodeURIComponent(
-    serializeAnnotations(plan)
-  )}`;
+function encodeCodeDiffMeta(plan) {
+  return `${DIFF_META_PREFIX}${encodeURIComponent(serializeCodeDiff(plan))}`;
 }
-function appendAnnotationsMeta(meta, plan) {
-  const token = encodeAnnotationsMeta(plan);
-  const base = typeof meta === "string" ? meta.trim() : "";
-  return base === "" ? token : `${base} ${token}`;
-}
-function extractAnnotationsMeta(meta) {
+function extractCodeDiffMeta(meta) {
   if (typeof meta !== "string") return null;
-  const match = meta.match(/(?:^|\s)rb-annotations=([^\s]+)/);
+  const match = meta.match(/(?:^|\s)rb-diff=([^\s]+)/);
   if (!match) return null;
   try {
-    return coercePlan(JSON.parse(decodeURIComponent(match[1])));
+    return deserializeCodeDiff(decodeURIComponent(match[1]));
   } catch {
     return null;
   }
 }
-function removeAnnotationsMeta(meta) {
-  if (typeof meta !== "string") return "";
-  return meta.replace(/(?:^|\s)rb-annotations=[^\s]+/g, " ").trim().replace(/\s+/g, " ");
-}
-function coercePlan(value) {
-  if (value === null || typeof value !== "object" || Array.isArray(value)) {
-    return null;
-  }
-  const record = value;
-  return {
-    highlight: coerceLines(record.highlight),
-    added: coerceLines(record.added),
-    removed: coerceLines(record.removed),
-    focus: coerceLines(record.focus)
-  };
-}
-function coerceLines(value) {
-  if (!Array.isArray(value)) return [];
-  return value.filter(
-    (entry) => typeof entry === "number" && Number.isFinite(entry) && entry > 0
-  );
-}
-function addRanges(target, ranges) {
-  target.push(...ranges);
-}
-function normalizeLines(lines) {
-  return [...new Set(lines.filter((line) => line > 0))].sort(
-    (left, right) => left - right
-  );
+function appendCodeDiffMeta(meta, plan) {
+  const token = encodeCodeDiffMeta(plan);
+  const base = typeof meta === "string" ? meta.trim() : "";
+  return base === "" ? token : `${base} ${token}`;
 }
-function normalizeKind(kind) {
-  if (kind === "++") return "added";
-  if (kind === "--") return "removed";
-  if (kind === "focus") return "focus";
-  if (kind === "highlight") return "highlight";
-  return null;
+function removeCodeDiffMeta(meta) {
+  if (typeof meta !== "string") return "";
+  return meta.replace(/(?:^|\s)rb-diff=[^\s]+/g, " ").trim().replace(/\s+/g, " ");
 }
 
 // src/hast.ts
@@ -214,19 +81,6 @@ function getBooleanProperty(node, key) {
   const value = getProperty(node, key);
   return value === true || value === "true" || value === "";
 }
-function hasProperty(node, key) {
-  return getProperty(node, key) !== void 0;
-}
-function getClassNameList(node) {
-  const value = node.properties?.className;
-  if (Array.isArray(value)) {
-    return value.filter((entry) => typeof entry === "string");
-  }
-  if (typeof value === "string") {
-    return value.split(/\s+/).filter(Boolean);
-  }
-  return [];
-}
 function mergeClassName(current, next) {
   const currentClass = Array.isArray(current) ? current.join(" ") : typeof current === "string" ? current : "";
   if (next === "") return currentClass;
@@ -239,12 +93,6 @@ function getDataMeta(node) {
   const meta = data.meta;
   return typeof meta === "string" ? meta : null;
 }
-function getTextContent(node) {
-  if (node.type === "text" && "value" in node && typeof node.value === "string") {
-    return node.value;
-  }
-  return getChildren(node).map(getTextContent).join("");
-}
 function getProperty(node, key) {
   const value = node.properties?.[key];
   if (value !== void 0) return value;
@@ -261,19 +109,37 @@ function getChildren(node) {
 }
 
 // src/rehype.ts
-function rehypeCodeAnnotations(options = resolveCodeAnnotationsOptions()) {
+function rehypeCodeAnnotations() {
   return (tree) => {
     visitElementTree(tree, (node, ancestors) => {
       if (node.tagName !== "code") return;
-      const parent = ancestors[ancestors.length - 1];
-      if (parent?.tagName !== "pre") return;
-      const pre = parent;
+      const pre = ancestors[ancestors.length - 1];
+      if (pre?.tagName !== "pre") return;
       const figure = findFigure(ancestors);
       const plan = readPlan(node, pre, figure);
-      stripAnnotationsFromProperties(node);
-      if (plan === null || !hasAnnotations(plan)) return;
-      if (!languageMatches(node, options.language)) return;
-      applyPlan(node, pre, figure, plan, options);
+      stripDiffFromProperties(node);
+      if (!plan) return;
+      const lines = getLineElements(node);
+      const codeLines = lines.length > 0 ? lines : wrapCodeLines(node);
+      codeLines.forEach((line, index) => {
+        const marker = plan.markers[index];
+        if (!marker) return;
+        line.properties = {
+          ...line.properties,
+          className: mergeClassName(
+            line.properties?.className,
+            marker === "+" ? "rr-code__line--add" : "rr-code__line--remove"
+          )
+        };
+        line.children = [
+          element(
+            "span",
+            { className: "rr-code__diff-marker", ariaHidden: "true" },
+            [text(marker)]
+          ),
+          ...line.children ?? []
+        ];
+      });
     });
   };
 }
@@ -286,169 +152,114 @@ function findFigure(ancestors) {
   return null;
 }
 function readPlan(code, pre, figure) {
-  const fromAttribute = deserializeAnnotations(
-    getStringProperty(code, "dataRbCodeAnnotations") ?? getStringProperty(code, "data-rb-code-annotations")
+  const fromAttribute = deserializeCodeDiff(
+    getStringProperty(code, "dataRbCodeDiff") ?? getStringProperty(code, "data-rb-code-diff")
   );
   if (fromAttribute) return fromAttribute;
-  const metas = [getDataMeta(figure), getDataMeta(pre), getDataMeta(code)];
-  for (const meta of metas) {
-    const plan = extractAnnotationsMeta(meta);
+  for (const meta of [
+    getDataMeta(figure),
+    getDataMeta(pre),
+    getDataMeta(code)
+  ]) {
+    const plan = extractCodeDiffMeta(meta);
     if (plan) return plan;
   }
   return null;
 }
-function stripAnnotationsFromProperties(code) {
+function stripDiffFromProperties(code) {
   if (!code.properties) return;
-  delete code.properties["data-rb-code-annotations"];
-  delete code.properties.dataRbCodeAnnotations;
+  delete code.properties["data-rb-code-diff"];
+  delete code.properties.dataRbCodeDiff;
   for (const key of ["data-meta", "dataMeta"]) {
     const value = code.properties[key];
     if (typeof value !== "string") continue;
-    const stripped = removeAnnotationsMeta(value);
+    const stripped = removeCodeDiffMeta(value);
     if (stripped !== "") code.properties[key] = stripped;
     else delete code.properties[key];
   }
 }
-function applyPlan(code, pre, figure, plan, options) {
-  const root = figure && getBooleanProperty(figure, "dataRehypePrettyCodeFigure") ? figure : pre;
-  root.properties = {
-    ...root.properties,
-    className: mergeClassName(root.properties?.className, options.className)
-  };
-  const lines = getLineElements(code);
-  if (lines.length > 0) {
-    lines.forEach((line, index) => {
-      applyLineClasses(line, index + 1, plan, options);
-    });
-    return;
-  }
-  const rawLines = getTextContent(code).replace(/\n$/, "").split("\n");
-  const children = [];
-  rawLines.forEach((lineText, index) => {
-    const classNames = [
-      options.lineClassName,
-      ...annotationClassNames(index + 1, plan, options)
-    ];
-    children.push(
-      element(
-        "span",
-        {
-          className: classNames.join(" "),
-          dataLine: String(index + 1)
-        },
-        [text(lineText)]
-      )
-    );
-    if (index < rawLines.length - 1) children.push(text("\n"));
-  });
-  code.children = children;
-}
-function applyLineClasses(line, lineNumber, plan, options) {
-  for (const name of annotationClassNames(lineNumber, plan, options)) {
-    line.properties = {
-      ...line.properties,
-      className: mergeClassName(line.properties?.className, name)
-    };
-  }
-}
-function annotationClassNames(lineNumber, plan, options) {
-  const names = [];
-  if (plan.highlight.includes(lineNumber)) {
-    names.push(options.highlightClassName);
-  }
-  if (plan.added.includes(lineNumber)) names.push(options.addedClassName);
-  if (plan.removed.includes(lineNumber)) names.push(options.removedClassName);
-  if (plan.focus.includes(lineNumber)) names.push(options.focusClassName);
-  return names;
-}
 function getLineElements(code) {
   return (code.children ?? []).filter(isElementNode).filter((child) => {
     if (child.tagName !== "span") return false;
-    if (hasProperty(child, "dataLine")) return true;
-    const classNames = getClassNameList(child);
-    return classNames.includes("line") || classNames.some((name) => name.endsWith("__line"));
+    return getBooleanProperty(child, "dataLine");
   });
 }
-function languageMatches(code, language) {
-  if (!language) return true;
-  return detectLanguage(code) === language;
-}
-function detectLanguage(code) {
-  const explicit = getStringProperty(code, "dataLanguage") ?? getStringProperty(code, "data-language");
-  if (explicit) return explicit;
-  for (const name of getClassNameList(code)) {
-    if (name.startsWith("language-")) return name.slice("language-".length);
-  }
-  return null;
+function wrapCodeLines(code) {
+  const lines = (code.children ?? []).filter((child) => child.type === "text").flatMap(
+    (child) => child.value.replace(/\n$/, "").split("\n")
+  );
+  const wrapped = lines.map(
+    (line, index) => element(
+      "span",
+      { className: "rr-code__line", dataLine: String(index + 1) },
+      [text(line)]
+    )
+  );
+  code.children = wrapped.flatMap(
+    (line, index) => index < wrapped.length - 1 ? [line, text("\n")] : [line]
+  );
+  return wrapped;
 }
 
 // src/remark.ts
-function remarkCodeAnnotations(options = resolveCodeAnnotationsOptions()) {
+function remarkCodeAnnotations() {
   return (tree) => {
     visitMdast(tree, (node) => {
-      if (node.type !== "code" || typeof node.value !== "string") return;
-      if (options.language !== void 0 && node.lang !== options.language) {
+      if (node.type !== "code" || node.lang !== "diff" || typeof node.value !== "string") {
         return;
       }
-      const meta = typeof node.meta === "string" ? node.meta : null;
-      const { plan, code, hasAnnotations: hasAnnotations2 } = collectCodeAnnotations(
-        meta,
-        node.value
-      );
-      if (!hasAnnotations2) return;
+      const language = parseTargetLanguage(node.meta);
+      if (!language) return;
+      const { code, plan } = collectCodeDiff(node.value);
+      node.lang = language;
       node.value = code;
       const hProperties = {
         ...node.data?.hProperties
       };
-      hProperties["data-rb-code-annotations"] = serializeAnnotations(plan);
-      const existingMeta = hProperties["data-meta"] ?? hProperties.dataMeta;
-      hProperties["data-meta"] = typeof existingMeta === "string" && existingMeta !== "" ? appendAnnotationsMeta(existingMeta, plan) : encodeAnnotationsMeta(plan);
+      hProperties["data-rb-code-diff"] = serializeCodeDiff(plan);
+      hProperties["data-meta"] = appendCodeDiffMeta(node.meta, plan);
       node.data = { ...node.data ?? {}, hProperties };
     });
   };
 }
+function parseTargetLanguage(meta) {
+  if (typeof meta !== "string") return null;
+  const language = meta.trim().split(/\s+/, 1)[0];
+  return language && /^[\w#+.-]+$/.test(language) ? language : null;
+}
 function visitMdast(node, visitor) {
   visitor(node);
   for (const child of node.children ?? []) visitMdast(child, visitor);
 }
 
 // index.ts
-function codeAnnotations(options = {}) {
-  const resolved = resolveCodeAnnotationsOptions(options);
+function codeAnnotations() {
   return definePlugin({
     name: "code-annotations",
     order: 10,
     processedContentCache: {
-      version: "code-annotations-v1",
+      version: "code-annotations-v2",
       dependencyMode: "none"
     },
-    options: resolved,
     extendMarkdownPipeline: (pipeline) => {
-      pipeline.use(remarkCodeAnnotations, resolved);
+      pipeline.use(remarkCodeAnnotations);
     },
     extendHtmlPipeline: (pipeline) => {
-      pipeline.use(rehypeCodeAnnotations, resolved);
-    },
-    assets: [createStyleAsset("code-annotations")]
+      pipeline.use(rehypeCodeAnnotations);
+    }
   });
 }
 var codeAnnotationsPlugin = codeAnnotations;
 export {
-  ANNOTATIONS_META_PREFIX,
-  DEFAULT_CODE_ANNOTATIONS_OPTIONS,
+  appendCodeDiffMeta,
   codeAnnotations,
   codeAnnotationsPlugin,
-  collectCodeAnnotations,
-  createEmptyPlan,
-  deserializeAnnotations,
-  encodeAnnotationsMeta,
-  extractAnnotationsMeta,
-  hasAnnotations,
-  parseCodeAnnotations,
-  parseLineRanges,
+  collectCodeDiff,
+  deserializeCodeDiff,
+  encodeCodeDiffMeta,
+  extractCodeDiffMeta,
   rehypeCodeAnnotations,
   remarkCodeAnnotations,
-  resolveCodeAnnotationsOptions,
-  serializeAnnotations,
-  stripInlineCodeAnnotation
+  removeCodeDiffMeta,
+  serializeCodeDiff
 };

package/dist/src/annotations.d.ts

@@ -1,48 +1,15 @@
-import type { CodeAnnotationKind, CodeAnnotationPlan } from "./types.js";
-/** Prefix used to smuggle a plan through the preserved fence meta channel. */
-export declare const ANNOTATIONS_META_PREFIX = "rb-annotations=";
-export declare function createEmptyPlan(): CodeAnnotationPlan;
-/**
- * Parse the highlight/focus specifiers of a code fence meta string.
- *
- * Docusaurus-style `{1,3-5}` groups become `highlight` lines. An optional
- * `focus:{1,2}` (or `focus={1,2}`) group becomes `focus` lines. Inline marker
- * comments are not part of the meta string and are handled by
- * {@link collectCodeAnnotations}.
- */
-export declare function parseCodeAnnotations(meta: string | null | undefined): CodeAnnotationPlan;
-/**
- * Parse a numeric range list such as `1,3-5` into sorted 1-based line numbers.
- */
-export declare function parseLineRanges(spec: string): number[];
-export type InlineCodeAnnotation = {
-    kind: CodeAnnotationKind;
-    lineCount: number;
+export declare const DIFF_META_PREFIX = "rb-diff=";
+export type DiffMarker = "+" | "-" | null;
+export type CodeDiffPlan = {
+    markers: DiffMarker[];
 };
-/**
- * Remove a trailing `[!code ...]` marker comment from a line and report what
- * it annotated. The comment prefix may be `//`, `#`, `--`, or an HTML comment.
- */
-export declare function stripInlineCodeAnnotation(line: string): {
-    line: string;
-    annotation: InlineCodeAnnotation | null;
-};
-export type CollectedCodeAnnotations = {
-    plan: CodeAnnotationPlan;
+export declare function collectCodeDiff(code: string): {
     code: string;
-    hasAnnotations: boolean;
+    plan: CodeDiffPlan;
 };
-/**
- * Parse fence meta and inline markers from a code block, returning the
- * annotation plan and the code text with marker comments removed.
- */
-export declare function collectCodeAnnotations(meta: string | null | undefined, code: string): CollectedCodeAnnotations;
-export declare function normalizePlan(plan: CodeAnnotationPlan): CodeAnnotationPlan;
-export declare function hasAnnotations(plan: CodeAnnotationPlan | null): boolean;
-export declare function serializeAnnotations(plan: CodeAnnotationPlan): string;
-export declare function deserializeAnnotations(value: unknown): CodeAnnotationPlan | null;
-export declare function encodeAnnotationsMeta(plan: CodeAnnotationPlan): string;
-export declare function appendAnnotationsMeta(meta: string | null | undefined, plan: CodeAnnotationPlan): string;
-export declare function extractAnnotationsMeta(meta: string | null | undefined): CodeAnnotationPlan | null;
-/** Remove an embedded plan token, keeping any surrounding fence meta. */
-export declare function removeAnnotationsMeta(meta: string | null | undefined): string;
+export declare function serializeCodeDiff(plan: CodeDiffPlan): string;
+export declare function deserializeCodeDiff(value: unknown): CodeDiffPlan | null;
+export declare function encodeCodeDiffMeta(plan: CodeDiffPlan): string;
+export declare function extractCodeDiffMeta(meta: string | null | undefined): CodeDiffPlan | null;
+export declare function appendCodeDiffMeta(meta: string | null | undefined, plan: CodeDiffPlan): string;
+export declare function removeCodeDiffMeta(meta: string | null | undefined): string;

package/dist/src/rehype.d.ts

@@ -1,8 +1,2 @@
-import type { HastNode, ResolvedCodeAnnotationsOptions } from "./types.js";
-/**
- * Materializes annotation plans recorded by {@link remarkCodeAnnotations}.
- * Reuses existing per-line wrappers (for example the ones emitted by
- * `rehype-pretty-code` through `@riebeckite/plugin-code-enhance`) and falls
- * back to wrapping raw `<code>` text into `rb-code__line` spans.
- */
-export declare function rehypeCodeAnnotations(options?: ResolvedCodeAnnotationsOptions): (tree: HastNode) => void;
+import type { HastNode } from "./types.js";
+export declare function rehypeCodeAnnotations(): (tree: HastNode) => void;

package/dist/src/remark.d.ts

@@ -1,16 +1 @@
-import type { ResolvedCodeAnnotationsOptions } from "./types.js";
-/**
- * Reads the fence meta and inline `[!code ...]` markers of every code block,
- * strips the marker comments from the code text, and records the resulting
- * plan for the rehype stage.
- *
- * The plan travels through two properties:
- *
- * - `data-rb-code-annotations` is the primary channel and is read directly for
- *   plain `<pre><code>` blocks.
- * - `data-meta` carries an encoded copy because
- *   `rehype-pretty-code` (used by `@riebeckite/plugin-code-enhance`) replaces
- *   the `<code>` element and drops its properties. code-enhance already reads
- *   `data-meta`, so the copy survives on the generated `<figure>`.
- */
-export declare function remarkCodeAnnotations(options?: ResolvedCodeAnnotationsOptions): (tree: unknown) => void;
+export declare function remarkCodeAnnotations(): (tree: unknown) => void;

package/dist/src/types.d.ts

@@ -1,44 +1,3 @@
-export type CodeAnnotationsOptions = {
-    /**
-     * Class applied to the code block root (`<pre>` or the
-     * `rehype-pretty-code` `<figure>`). Defaults to `"rb-code"`.
-     */
-    className?: string;
-    /**
-     * Class applied to each generated line wrapper. Defaults to
-     * `"rb-code__line"`. Existing line wrappers are not re-classed.
-     */
-    lineClassName?: string;
-    /** Class applied to highlighted lines. Defaults to `"rb-code__line--highlighted"`. */
-    highlightClassName?: string;
-    /** Class applied to `++` lines. Defaults to `"rb-code__line--added"`. */
-    addedClassName?: string;
-    /** Class applied to `--` lines. Defaults to `"rb-code__line--removed"`. */
-    removedClassName?: string;
-    /** Class applied to focused lines. Defaults to `"rb-code__line--focused"`. */
-    focusClassName?: string;
-    /**
-     * When set, annotations are only applied to code blocks whose detected
-     * language matches this value. Unset by default.
-     */
-    language?: string;
-};
-export type ResolvedCodeAnnotationsOptions = {
-    className: string;
-    lineClassName: string;
-    highlightClassName: string;
-    addedClassName: string;
-    removedClassName: string;
-    focusClassName: string;
-    language?: string;
-};
-export type CodeAnnotationPlan = {
-    highlight: number[];
-    added: number[];
-    removed: number[];
-    focus: number[];
-};
-export type CodeAnnotationKind = "highlight" | "added" | "removed" | "focus";
 export type ElementNode = {
     type: string;
     tagName?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-code-annotations",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -11,15 +11,14 @@
       "import": "./dist/index.js",
       "source": "./index.ts",
       "default": "./dist/index.js"
-    },
-    "./style.css": "./style.css"
+    }
   },
   "dependencies": {
-    "@riebeckite/core": "0.0.21"
+    "@riebeckite/core": "0.0.22"
   },
   "devDependencies": {
     "tsx": "^4.22.4",
-    "@riebeckite/test": "0.0.21"
+    "@riebeckite/test": "0.0.22"
   },
   "publishConfig": {
     "access": "public"
@@ -28,8 +27,7 @@
     "LICENSE",
     "README.md",
     "README_ja.md",
-    "dist",
-    "style.css"
+    "dist"
   ],
   "repository": {
     "type": "git",
@@ -40,7 +38,7 @@
   "bugs": {
     "url": "https://github.com/Rerurate514/riebeckite/issues"
   },
-  "description": "Code block annotations, highlights, and diff markers for Riebeckite.",
+  "description": "Syntax-highlighted diff code fences for Riebeckite.",
   "keywords": [
     "riebeckite",
     "plugin",
@@ -50,9 +48,7 @@
   "engines": {
     "node": "^20.19.0 || >=22.12.0"
   },
-  "sideEffects": [
-    "./style.css"
-  ],
+  "sideEffects": false,
   "scripts": {
     "build": "node ../../../scripts/build_package.mjs",
     "test": "node --import tsx --test \"test/*.test.ts\""

package/dist/src/options.d.ts

@@ -1,10 +0,0 @@
-import type { CodeAnnotationsOptions, ResolvedCodeAnnotationsOptions } from "./types.js";
-export declare const DEFAULT_CODE_ANNOTATIONS_OPTIONS: {
-    readonly className: "rb-code";
-    readonly lineClassName: "rb-code__line";
-    readonly highlightClassName: "rb-code__line--highlighted";
-    readonly addedClassName: "rb-code__line--added";
-    readonly removedClassName: "rb-code__line--removed";
-    readonly focusClassName: "rb-code__line--focused";
-};
-export declare function resolveCodeAnnotationsOptions(options?: CodeAnnotationsOptions): ResolvedCodeAnnotationsOptions;

package/style.css

@@ -1,36 +0,0 @@
-.rb-code {
-  --rb-code-annotation-accent: var(--rb-color-accent, #686868);
-  position: relative;
-}
-
-.rb-code__line {
-  display: block;
-  min-width: 100%;
-}
-
-.rb-code__line--highlighted {
-  background: color-mix(
-    in srgb,
-    var(--rb-code-annotation-accent) 14%,
-    transparent
-  );
-}
-
-.rb-code__line--added {
-  background: color-mix(in srgb, #1f883d 14%, transparent);
-}
-
-.rb-code__line--removed {
-  background: color-mix(in srgb, #cf222e 14%, transparent);
-}
-
-.rb-code__line--focused {
-  background: color-mix(
-    in srgb,
-    var(--rb-code-annotation-accent) 10%,
-    transparent
-  );
-  outline: 1px solid
-    color-mix(in srgb, var(--rb-code-annotation-accent) 45%, transparent);
-  outline-offset: -1px;
-}