@riebeckite/plugin-code-enhance 0.0.27 → 0.0.28

package/README.md

@@ -46,10 +46,14 @@ export default defineConfig({
 - Line numbers (`data-line-number` gutter)
 - Line and character highlighting from pretty-code meta (`{1,3}`, `[/re/]`)
 - Diff coloring for `+` / `-` lines in `diff` code blocks
-- Terminal styling for `bash`, `console`, `sh`, `shell`, `terminal`, `zsh`
-  (inverted palette) with a `$` prompt prefix on non-empty lines
+- One dark, terminal-style surface for every code block (inverted palette)
+- A `$` prompt prefix on `bash`, `console`, `sh`, `shell`, `terminal`, `zsh`
+  lines
 - Focusable `<pre>` (`tabindex="0"`) for keyboard scrolling
 
+Themes can set `--rr-code-syntax` on an `rr-code` root to choose the syntax
+foreground without selecting highlighted-code descendants.
+
 ## Options
 
 | Option | Type | Default | Description |
@@ -61,8 +65,7 @@ export default defineConfig({
 | `lineHighlight` | `boolean` | `true` | Apply meta-based line/char highlights |
 | `diffHighlight` | `boolean` | `true` | Color `+` / `-` lines in `diff` blocks |
 | `collapsible` | `boolean` | `false` | Add the collapse button |
-| `terminal` | `boolean` | `true` | Terminal styling for shell languages |
-| `commandPrompt` | `boolean` | `true` | `$` prompt prefix on terminal lines |
+| `commandPrompt` | `boolean` | `true` | `$` prompt prefix on shell-language lines |
 | `wrapToggle` | `boolean` | `true` | Show the wrap toggle button |
 | `defaultCollapsed` | `boolean` | `false` | Start collapsed (requires `collapsible`) |
 | `copyLabel` | `string` | `"Copy"` | Copy button label forwarded to the client |

package/README_ja.md

@@ -25,9 +25,13 @@ export default defineConfig({
 - Shiki のテーマによる色付け、行番号、メタデータによる行・文字の強調
 - `diff` コードブロックの `+` と `-` で始まる行の差分表示
 - コピー、折り返し、任意の折りたたみ
-- `bash`、`console`、`sh` などを端末風に表示し、必要に応じて `$` を付ける
+- すべてのコードブロックを端末風の暗い配色で表示する
+- `bash`、`console`、`sh` などのシェル言語の行に `$` を付ける
 - キーボードで内容を確認できるよう、`<pre>` をフォーカス可能にする
 
+Theme は `rr-code` の root に `--rr-code-syntax` を指定すると、ハイライト済みコードの
+子要素を選択せずに構文色を指定できます。
+
 ## オプション
 
 | オプション | 型 | 既定値 | 内容 |
@@ -39,8 +43,7 @@ export default defineConfig({
 | `lineHighlight` | `boolean` | `true` | メタデータによる行・文字の強調を適用する |
 | `diffHighlight` | `boolean` | `true` | `diff` コードブロックの `+` / `-` で始まる行を色付けする |
 | `collapsible` | `boolean` | `false` | 折りたたみボタンを追加する |
-| `terminal` | `boolean` | `true` | シェル言語を端末風に表示する |
-| `commandPrompt` | `boolean` | `true` | 端末の各行に `$` を付ける |
+| `commandPrompt` | `boolean` | `true` | シェル言語の行に `$` を付ける |
 | `wrapToggle` | `boolean` | `true` | 折り返し切替ボタンを表示する |
 | `defaultCollapsed` | `boolean` | `false` | `collapsible` 有効時に折りたたんで開始する |
 | `copyLabel` | `string` | `"Copy"` | クライアントに渡すコピー前の文言 |
@@ -52,11 +55,11 @@ export default defineConfig({
 
 ## 公開 API
 
-- `codeEnhance(options?)` — プラグインファクトリ
-- `rehypeCodeEnhance(options?)` — Rehype 変換
-- `initCodeEnhance(options?)` — ブラウザ初期化関数
-- `DEFAULT_COPY_LABEL`、`DEFAULT_COPIED_LABEL` — 既定のコピー文言
-- `CodeEnhanceOptions`、`CodeEnhanceClientOptions`、`CodeEnhanceTheme` — 型
+- `codeEnhance(options?)`：プラグインファクトリ
+- `rehypeCodeEnhance(options?)`：Rehype 変換
+- `initCodeEnhance(options?)`：ブラウザ初期化関数
+- `DEFAULT_COPY_LABEL`、`DEFAULT_COPIED_LABEL`：既定のコピー文言
+- `CodeEnhanceOptions`、`CodeEnhanceClientOptions`、`CodeEnhanceTheme`：型
 
 ## 関連資料
 

package/dist/index.js

@@ -230,12 +230,11 @@ function enhancePrettyCodeFigures(tree, options) {
     const titleNode = findTitleNode(node);
     const title = titleNode ? getTextContent(titleNode) : null;
     const language = getLanguage(pre, code);
-    const isTerminal = options.terminal !== false && isTerminalLanguage(language);
+    const isShell = isTerminalLanguage(language);
     node.properties = {
       ...node.properties,
       className: mergeClassName(node.properties?.className, "rr-code"),
-      dataLanguage: language,
-      dataTerminal: isTerminal ? "true" : void 0
+      dataLanguage: language
     };
     pre.properties = {
       ...pre.properties,
@@ -253,8 +252,7 @@ function enhancePrettyCodeFigures(tree, options) {
       if (options.lineNumbers) markLineNumbers(code);
       if (options.diffHighlight !== false && isDiffLanguage(language))
         markDiffLines(code);
-      if (options.commandPrompt !== false && isTerminal)
-        markCommandPrompts(code);
+      if (options.commandPrompt !== false && isShell) markCommandPrompts(code);
     }
     const bodyChildren = node.children?.filter((child) => child !== titleNode) ?? [];
     const body = element("div", { className: "rr-code__body" }, bodyChildren);

package/dist/src/types.d.ts

@@ -14,7 +14,6 @@ export type CodeEnhanceOptions = CodeEnhanceClientOptions & {
     lineHighlight?: boolean;
     diffHighlight?: boolean;
     collapsible?: boolean;
-    terminal?: boolean;
     commandPrompt?: boolean;
     wrapToggle?: boolean;
     defaultCollapsed?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-code-enhance",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "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.27"
+    "@riebeckite/core": "0.0.28"
   },
   "devDependencies": {
     "tsx": "^4.22.4"

package/style.css

@@ -1,6 +1,6 @@
 .rr-code {
-  --rr-code-paper: var(--rb-color-paper, #ffffff);
-  --rr-code-ink: var(--rb-color-ink, #000000);
+  --rr-code-paper: var(--rb-color-ink, #000000);
+  --rr-code-ink: var(--rb-color-paper, #ffffff);
   --rr-code-muted: color-mix(in srgb, var(--rr-code-ink) 56%, transparent);
   --rr-code-rule: color-mix(in srgb, var(--rr-code-ink) 18%, transparent);
   --rr-code-accent: var(--rb-color-accent, #686868);
@@ -14,12 +14,6 @@
   margin-bottom: 2rem;
 }
 
-.rr-code[data-terminal="true"] {
-  --rr-code-paper: var(--rb-color-ink, #000000);
-  --rr-code-ink: var(--rb-color-paper, #ffffff);
-  --rr-code-syntax: var(--shiki-dark, inherit);
-}
-
 .rr-code__header {
   display: flex;
   align-items: center;
@@ -91,21 +85,9 @@
 
 .rr-code .rr-code__code,
 .rr-code .rr-code__code span {
-  color: var(--rr-code-syntax, var(--shiki-light, inherit));
-}
-
-:is(:root, .rb-theme-root)[data-theme="dark"] .rr-code .rr-code__code,
-:is(:root, .rb-theme-root)[data-theme="dark"] .rr-code .rr-code__code span {
   color: var(--rr-code-syntax, var(--shiki-dark, inherit));
 }
 
-@media (prefers-color-scheme: dark) {
-  :is(:root, .rb-theme-root):not([data-theme]) .rr-code .rr-code__code,
-  :is(:root, .rb-theme-root):not([data-theme]) .rr-code .rr-code__code span {
-    color: var(--rr-code-syntax, var(--shiki-dark, inherit));
-  }
-}
-
 .rr-code__line {
   display: inline-block;
   min-width: 100%;
@@ -163,8 +145,3 @@
     --rr-code-ink: var(--rb-color-ink, #ffffff);
   }
 }
-
-.rr-code[data-terminal="true"] .rr-code__code,
-.rr-code[data-terminal="true"] .rr-code__code span {
-  color: var(--shiki-dark, inherit);
-}