@riebeckite/plugin-code-enhance 0.0.12 → 0.0.14

package/README.md

@@ -1,86 +1,86 @@
-# @riebeckite/plugin-code-enhance
-
-Enhanced code blocks: Shiki highlighting plus a header with copy, wrap, and
-collapse controls.
-
-[日本語](./README_ja.md)
-
-## Overview
-
-`codeEnhance()` wraps [rehype-pretty-code](https://github.com/rehype-pretty-code/rehype-pretty-code)
-(Shiki) and post-processes each figure into `.rr-code` with a header and
-action buttons. The client entry wires up the buttons.
-
-## Usage
-
-```ts
-import { defineConfig } from "@riebeckite/core";
-import { codeEnhance } from "@riebeckite/plugin-code-enhance";
-
-export default defineConfig({
-  // ...
-  plugins: [
-    codeEnhance({
-      theme: { light: "github-light", dark: "github-dark" },
-      lineNumbers: true,
-      copyButton: true,
-      filename: true,
-      lineHighlight: true,
-      diffHighlight: true,
-      wrapToggle: true,
-    }),
-  ],
-});
-```
-
-## Features
-
-- Syntax highlighting via Shiki (rehype-pretty-code)
-- Header with the file name (code block title, falling back to the language)
-  and action buttons
-- Copy button with "Copied" feedback (client)
-- Wrap toggle (client)
-- Collapse / expand button (opt-in, client)
-- Line numbers (`data-line-number` gutter)
-- Line and character highlighting from pretty-code meta (`{1,3}`, `[/re/]`)
-- Diff coloring for lines starting with `+` / `-`
-- Terminal styling for `bash`, `console`, `sh`, `shell`, `terminal`, `zsh`
-  (inverted palette) with a `$` prompt prefix on non-empty lines
-- Focusable `<pre>` (`tabindex="0"`) for keyboard scrolling
-
-## Options
-
-| Option | Type | Default | Description |
-| ------ | ---- | ------- | ----------- |
-| `theme` | `string \| { light: string; dark: string }` | `{ light: "github-light", dark: "github-dark" }` | Shiki theme |
-| `lineNumbers` | `boolean` | `false` | Show line numbers |
-| `copyButton` | `boolean` | `true` | Show the copy button |
-| `filename` | `boolean` | `true` | Show the file name in the header |
-| `lineHighlight` | `boolean` | `true` | Apply meta-based line/char highlights |
-| `diffHighlight` | `boolean` | `true` | Color `+` / `-` lines |
-| `collapsible` | `boolean` | `false` | Add the collapse button |
-| `terminal` | `boolean` | `true` | Terminal styling for shell languages |
-| `commandPrompt` | `boolean` | `true` | `$` prompt prefix on terminal lines |
-| `wrapToggle` | `boolean` | `true` | Show the wrap toggle button |
-| `defaultCollapsed` | `boolean` | `false` | Start collapsed (requires `collapsible`) |
-
-## Client
-
-`initCodeEnhance(options?)` installs a document-level click handler for copy,
-wrap, and collapse buttons.
-
-| Option | Type | Default | Description |
-| ------ | ---- | ------- | ----------- |
-| `copyLabel` | `string` | `"Copy"` | Copy button label |
-| `copiedLabel` | `string` | `"Copied"` | Label after copying |
-
-## Exports
-
-- `codeEnhance(options?)` — plugin factory
-- `rehypeCodeEnhance(options?)` — rehype transform
-- `initCodeEnhance(options?)` — client initializer
-- Types: `CodeEnhanceOptions`, `CodeEnhanceClientOptions`, `CodeEnhanceTheme`
-
-## See also
-
-- [Plugin guide](../../../docs/en/plugin-system.md)
+# @riebeckite/plugin-code-enhance
+
+Enhanced code blocks: Shiki highlighting plus a header with copy, wrap, and
+collapse controls.
+
+[日本語](./README_ja.md)
+
+## Overview
+
+`codeEnhance()` wraps [rehype-pretty-code](https://github.com/rehype-pretty-code/rehype-pretty-code)
+(Shiki) and post-processes each figure into `.rr-code` with a header and
+action buttons. The client entry wires up the buttons.
+
+## Usage
+
+```ts
+import { defineConfig } from "@riebeckite/core";
+import { codeEnhance } from "@riebeckite/plugin-code-enhance";
+
+export default defineConfig({
+  // ...
+  plugins: [
+    codeEnhance({
+      theme: { light: "github-light", dark: "github-dark" },
+      lineNumbers: true,
+      copyButton: true,
+      filename: true,
+      lineHighlight: true,
+      diffHighlight: true,
+      wrapToggle: true,
+    }),
+  ],
+});
+```
+
+## Features
+
+- Syntax highlighting via Shiki (rehype-pretty-code)
+- Header with the file name (code block title, falling back to the language)
+  and action buttons
+- Copy button with "Copied" feedback (client)
+- Wrap toggle (client)
+- Collapse / expand button (opt-in, client)
+- Line numbers (`data-line-number` gutter)
+- Line and character highlighting from pretty-code meta (`{1,3}`, `[/re/]`)
+- Diff coloring for lines starting with `+` / `-`
+- Terminal styling for `bash`, `console`, `sh`, `shell`, `terminal`, `zsh`
+  (inverted palette) with a `$` prompt prefix on non-empty lines
+- Focusable `<pre>` (`tabindex="0"`) for keyboard scrolling
+
+## Options
+
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| `theme` | `string \| { light: string; dark: string }` | `{ light: "github-light", dark: "github-dark" }` | Shiki theme |
+| `lineNumbers` | `boolean` | `false` | Show line numbers |
+| `copyButton` | `boolean` | `true` | Show the copy button |
+| `filename` | `boolean` | `true` | Show the file name in the header |
+| `lineHighlight` | `boolean` | `true` | Apply meta-based line/char highlights |
+| `diffHighlight` | `boolean` | `true` | Color `+` / `-` lines |
+| `collapsible` | `boolean` | `false` | Add the collapse button |
+| `terminal` | `boolean` | `true` | Terminal styling for shell languages |
+| `commandPrompt` | `boolean` | `true` | `$` prompt prefix on terminal lines |
+| `wrapToggle` | `boolean` | `true` | Show the wrap toggle button |
+| `defaultCollapsed` | `boolean` | `false` | Start collapsed (requires `collapsible`) |
+
+## Client
+
+`initCodeEnhance(options?)` installs a document-level click handler for copy,
+wrap, and collapse buttons.
+
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| `copyLabel` | `string` | `"Copy"` | Copy button label |
+| `copiedLabel` | `string` | `"Copied"` | Label after copying |
+
+## Exports
+
+- `codeEnhance(options?)` — plugin factory
+- `rehypeCodeEnhance(options?)` — rehype transform
+- `initCodeEnhance(options?)` — client initializer
+- Types: `CodeEnhanceOptions`, `CodeEnhanceClientOptions`, `CodeEnhanceTheme`
+
+## See also
+
+- [Plugin guide](../../../docs/en/reference/plugin-api.md)

package/README_ja.md

@@ -1,53 +1,53 @@
-# @riebeckite/plugin-code-enhance
-
-Shiki によるシンタックスハイライトへ、コピー、折り返し、折りたたみなどの操作を加えるプラグインです。
-
-[English](./README.md)
-
-## 設定
-
-```ts
-import { defineConfig } from "@riebeckite/core";
-import { codeEnhance } from "@riebeckite/plugin-code-enhance";
-
-export default defineConfig({
-  // ...
-  plugins: [codeEnhance({ lineNumbers: true, wrapToggle: true })],
-});
-```
-
-`codeEnhance()` は `rehype-pretty-code` を使ってコードブロックを処理し、ファイル名と操作ボタンを持つ `.rr-code` 要素に整えます。ボタンの操作はクライアントエントリーが担当します。
-
-## 表示と操作
-
-- Shiki のテーマによる色付け、行番号、メタデータによる行・文字の強調
-- `+` と `-` で始まる行の差分表示
-- コピー、折り返し、任意の折りたたみ
-- `bash`、`console`、`sh` などを端末風に表示し、必要に応じて `$` を付ける
-- キーボードで内容を確認できるよう、`<pre>` をフォーカス可能にする
-
-## 主なオプション
-
-| オプション | 既定値 | 内容 |
-| --- | --- | --- |
-| `theme` | GitHub の明暗テーマ | Shiki テーマ。文字列または `{ light, dark }` |
-| `lineNumbers` | `false` | 行番号を表示するか |
-| `copyButton` | `true` | コピーボタンを表示するか |
-| `filename` | `true` | 見出しにファイル名を表示するか |
-| `lineHighlight` / `diffHighlight` | `true` | 強調表示・差分表示を有効にするか |
-| `collapsible` / `defaultCollapsed` | `false` | 折りたたみと初期状態 |
-| `terminal` / `commandPrompt` | `true` | 端末風表示と `$` の付与 |
-| `wrapToggle` | `true` | 折り返し切替を表示するか |
-
-`initCodeEnhance({ copyLabel, copiedLabel })` では、コピー前後のボタン文言を変更できます。
-
-## 公開 API
-
-- `codeEnhance(options?)` — プラグインファクトリ
-- `rehypeCodeEnhance(options?)` — Rehype 変換
-- `initCodeEnhance(options?)` — ブラウザ初期化関数
-- `CodeEnhanceOptions`、`CodeEnhanceClientOptions`、`CodeEnhanceTheme` — 型
-
-## 関連資料
-
-- [プラグインシステム](../../../docs/ja/plugin-system.md)
+# @riebeckite/plugin-code-enhance
+
+Shiki によるシンタックスハイライトへ、コピー、折り返し、折りたたみなどの操作を加えるプラグインです。
+
+[English](./README.md)
+
+## 設定
+
+```ts
+import { defineConfig } from "@riebeckite/core";
+import { codeEnhance } from "@riebeckite/plugin-code-enhance";
+
+export default defineConfig({
+  // ...
+  plugins: [codeEnhance({ lineNumbers: true, wrapToggle: true })],
+});
+```
+
+`codeEnhance()` は `rehype-pretty-code` を使ってコードブロックを処理し、ファイル名と操作ボタンを持つ `.rr-code` 要素に整えます。ボタンの操作はクライアントエントリーが担当します。
+
+## 表示と操作
+
+- Shiki のテーマによる色付け、行番号、メタデータによる行・文字の強調
+- `+` と `-` で始まる行の差分表示
+- コピー、折り返し、任意の折りたたみ
+- `bash`、`console`、`sh` などを端末風に表示し、必要に応じて `$` を付ける
+- キーボードで内容を確認できるよう、`<pre>` をフォーカス可能にする
+
+## 主なオプション
+
+| オプション | 既定値 | 内容 |
+| --- | --- | --- |
+| `theme` | GitHub の明暗テーマ | Shiki テーマ。文字列または `{ light, dark }` |
+| `lineNumbers` | `false` | 行番号を表示するか |
+| `copyButton` | `true` | コピーボタンを表示するか |
+| `filename` | `true` | 見出しにファイル名を表示するか |
+| `lineHighlight` / `diffHighlight` | `true` | 強調表示・差分表示を有効にするか |
+| `collapsible` / `defaultCollapsed` | `false` | 折りたたみと初期状態 |
+| `terminal` / `commandPrompt` | `true` | 端末風表示と `$` の付与 |
+| `wrapToggle` | `true` | 折り返し切替を表示するか |
+
+`initCodeEnhance({ copyLabel, copiedLabel })` では、コピー前後のボタン文言を変更できます。
+
+## 公開 API
+
+- `codeEnhance(options?)` — プラグインファクトリ
+- `rehypeCodeEnhance(options?)` — Rehype 変換
+- `initCodeEnhance(options?)` — ブラウザ初期化関数
+- `CodeEnhanceOptions`、`CodeEnhanceClientOptions`、`CodeEnhanceTheme` — 型
+
+## 関連資料
+
+- [プラグインシステム](../../../docs/ja/reference/plugin-api.md)

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import type { CodeEnhanceOptions } from "./src/types.js";
 export { initCodeEnhance } from "./src/init.js";
 export { rehypeCodeEnhance } from "./src/rehype.js";
+export { remarkCodeMeta } from "./src/remark.js";
 export type { CodeEnhanceClientOptions, CodeEnhanceOptions, CodeEnhanceTheme, } from "./src/types.js";
 export declare function codeEnhance(options?: CodeEnhanceOptions): import("@riebeckite/core").RiebeckitePlugin<CodeEnhanceOptions>;

package/dist/index.js

@@ -119,7 +119,7 @@ function restoreCodeMeta(tree) {
     if (!code) return;
     const meta = getCodeMeta(code);
     if (!meta) return;
-    node.data = { ...getRecord(node.data), meta };
+    code.data = { ...getRecord(code.data), meta };
   });
 }
 var LANGUAGE_CLASS_PREFIX = "language-";
@@ -343,6 +343,27 @@ function isTerminalLanguage(language) {
   );
 }
 
+// src/remark.ts
+function remarkCodeMeta() {
+  return (tree) => {
+    visitMdast(tree, (node) => {
+      if (node.type !== "code") return;
+      if (typeof node.meta !== "string" || node.meta.trim() === "") return;
+      node.data = {
+        ...node.data ?? {},
+        hProperties: {
+          ...node.data?.hProperties,
+          "data-meta": node.meta
+        }
+      };
+    });
+  };
+}
+function visitMdast(node, visitor) {
+  visitor(node);
+  for (const child of node.children ?? []) visitMdast(child, visitor);
+}
+
 // src/init.ts
 var DEFAULT_COPY_LABEL = "Copy";
 var DEFAULT_COPIED_LABEL = "Copied";
@@ -402,6 +423,7 @@ function codeEnhance(options = {}) {
   return definePlugin({
     name: "code-enhance",
     options,
+    remarkPlugins: [remarkCodeMeta],
     extendHtmlPipeline: (pipeline) => {
       pipeline.use(rehypeCodeEnhance, options);
     },
@@ -412,5 +434,6 @@ function codeEnhance(options = {}) {
 export {
   codeEnhance,
   initCodeEnhance,
-  rehypeCodeEnhance
+  rehypeCodeEnhance,
+  remarkCodeMeta
 };

package/dist/src/remark.d.ts

@@ -0,0 +1,2 @@
+/** Preserves code-fence metadata for rehype-pretty-code. */
+export declare function remarkCodeMeta(): (tree: unknown) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-code-enhance",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -23,7 +23,7 @@
   "dependencies": {
     "rehype-pretty-code": "^0.14.1",
     "shiki": "^3.13.0",
-    "@riebeckite/core": "0.0.12"
+    "@riebeckite/core": "0.0.14"
   },
   "devDependencies": {
     "tsx": "^4.22.4"