@riebeckite/plugin-code-tabs 0.0.12 → 0.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +101 -101
  2. package/README_ja.md +55 -55
  3. package/package.json +2 -2
package/README.md CHANGED
@@ -1,101 +1,101 @@
1
- # @riebeckite/plugin-code-tabs
2
-
3
- Groups adjacent code blocks with `tab="..."` metadata into an accessible tab UI.
4
-
5
- [日本語](./README_ja.md)
6
-
7
- ## Installation
8
-
9
- ```ts
10
- import { defineConfig } from "@riebeckite/core";
11
- import { codeTabs } from "@riebeckite/plugin-code-tabs";
12
-
13
- export default defineConfig({
14
- // ...
15
- plugins: [codeTabs()],
16
- });
17
- ```
18
-
19
- The plugin registers its own `style.css` and client entry (`initCodeTabs`).
20
-
21
- ## Config
22
-
23
- ```ts
24
- codeTabs({
25
- syncTabs: false,
26
- });
27
- ```
28
-
29
- | Option | Type | Default | Description |
30
- | ------ | ---- | ------- | ----------- |
31
- | `syncTabs` | `boolean` | `false` | When enabled, selecting a label such as `TypeScript` also selects the same label in other code-tab groups on the page. |
32
-
33
- ## Syntax
34
-
35
- ````md
36
- ```dart tab="Flutter"
37
- void main() {}
38
- ```
39
-
40
- ```ts tab="React"
41
- console.log("Hello");
42
- ```
43
- ````
44
-
45
- Regular code blocks without `tab="..."` are not changed.
46
-
47
- ## Grouping rules
48
-
49
- Adjacent `tab="..."` code blocks become one group. Any other content ends the
50
- current group.
51
-
52
- ````md
53
- ```dart tab="Dart"
54
- ```
55
- ```ts tab="TypeScript"
56
- ```
57
- ````
58
-
59
- The two blocks above are one group.
60
-
61
- ````md
62
- ```dart tab="Dart"
63
- ```
64
-
65
- Text between blocks.
66
-
67
- ```ts tab="TypeScript"
68
- ```
69
- ````
70
-
71
- The paragraph separates them into different groups.
72
-
73
- ## Using with code-enhance
74
-
75
- `@riebeckite/plugin-code-tabs` does not import or depend on
76
- `@riebeckite/plugin-code-enhance`. It detects both normal `<pre><code>` blocks
77
- and enhanced `rehype-pretty-code` figures, then wraps the whole rendered code
78
- block as a panel. Syntax highlighting, filename headers, copy buttons, wrap,
79
- collapse, line numbers, and diff/highlight markup are preserved as much as
80
- possible.
81
-
82
- Place `codeTabs()` after `codeEnhance()` if both plugins are enabled so tabs wrap
83
- the enhanced code block output.
84
-
85
- ## Accessibility
86
-
87
- The generated HTML uses `role="tablist"`, `role="tab"`, and `role="tabpanel"`.
88
- The client supports click, `ArrowLeft`, `ArrowRight`, `Home`, `End`, `Enter`, and
89
- `Space`, and keeps `aria-selected` and `tabindex` in sync. Without JavaScript,
90
- all panels remain visible so every code block can still be read.
91
-
92
- ## Exports
93
-
94
- - `codeTabs(options?)` — plugin factory
95
- - `rehypeCodeTabs(options?)` — rehype transform
96
- - `initCodeTabs(options?)` — client initializer
97
- - Types: `CodeTabsOptions`, `CodeTabsClientOptions`
98
-
99
- ## See also
100
-
101
- - [Plugin guide](../../../docs/en/plugin-system.md)
1
+ # @riebeckite/plugin-code-tabs
2
+
3
+ Groups adjacent code blocks with `tab="..."` metadata into an accessible tab UI.
4
+
5
+ [日本語](./README_ja.md)
6
+
7
+ ## Installation
8
+
9
+ ```ts
10
+ import { defineConfig } from "@riebeckite/core";
11
+ import { codeTabs } from "@riebeckite/plugin-code-tabs";
12
+
13
+ export default defineConfig({
14
+ // ...
15
+ plugins: [codeTabs()],
16
+ });
17
+ ```
18
+
19
+ The plugin registers its own `style.css` and client entry (`initCodeTabs`).
20
+
21
+ ## Config
22
+
23
+ ```ts
24
+ codeTabs({
25
+ syncTabs: false,
26
+ });
27
+ ```
28
+
29
+ | Option | Type | Default | Description |
30
+ | ------ | ---- | ------- | ----------- |
31
+ | `syncTabs` | `boolean` | `false` | When enabled, selecting a label such as `TypeScript` also selects the same label in other code-tab groups on the page. |
32
+
33
+ ## Syntax
34
+
35
+ ````md
36
+ ```dart tab="Flutter"
37
+ void main() {}
38
+ ```
39
+
40
+ ```ts tab="React"
41
+ console.log("Hello");
42
+ ```
43
+ ````
44
+
45
+ Regular code blocks without `tab="..."` are not changed.
46
+
47
+ ## Grouping rules
48
+
49
+ Adjacent `tab="..."` code blocks become one group. Any other content ends the
50
+ current group.
51
+
52
+ ````md
53
+ ```dart tab="Dart"
54
+ ```
55
+ ```ts tab="TypeScript"
56
+ ```
57
+ ````
58
+
59
+ The two blocks above are one group.
60
+
61
+ ````md
62
+ ```dart tab="Dart"
63
+ ```
64
+
65
+ Text between blocks.
66
+
67
+ ```ts tab="TypeScript"
68
+ ```
69
+ ````
70
+
71
+ The paragraph separates them into different groups.
72
+
73
+ ## Using with code-enhance
74
+
75
+ `@riebeckite/plugin-code-tabs` does not import or depend on
76
+ `@riebeckite/plugin-code-enhance`. It detects both normal `<pre><code>` blocks
77
+ and enhanced `rehype-pretty-code` figures, then wraps the whole rendered code
78
+ block as a panel. Syntax highlighting, filename headers, copy buttons, wrap,
79
+ collapse, line numbers, and diff/highlight markup are preserved as much as
80
+ possible.
81
+
82
+ Place `codeTabs()` after `codeEnhance()` if both plugins are enabled so tabs wrap
83
+ the enhanced code block output.
84
+
85
+ ## Accessibility
86
+
87
+ The generated HTML uses `role="tablist"`, `role="tab"`, and `role="tabpanel"`.
88
+ The client supports click, `ArrowLeft`, `ArrowRight`, `Home`, `End`, `Enter`, and
89
+ `Space`, and keeps `aria-selected` and `tabindex` in sync. Without JavaScript,
90
+ all panels remain visible so every code block can still be read.
91
+
92
+ ## Exports
93
+
94
+ - `codeTabs(options?)` — plugin factory
95
+ - `rehypeCodeTabs(options?)` — rehype transform
96
+ - `initCodeTabs(options?)` — client initializer
97
+ - Types: `CodeTabsOptions`, `CodeTabsClientOptions`
98
+
99
+ ## See also
100
+
101
+ - [Plugin guide](../../../docs/en/reference/plugin-api.md)
package/README_ja.md CHANGED
@@ -1,55 +1,55 @@
1
- # @riebeckite/plugin-code-tabs
2
-
3
- 連続するコードブロックを、`tab="..."` の名前ごとにタブへまとめるプラグインです。
4
-
5
- [English](./README.md)
6
-
7
- ## 設定
8
-
9
- ```ts
10
- import { defineConfig } from "@riebeckite/core";
11
- import { codeTabs } from "@riebeckite/plugin-code-tabs";
12
-
13
- export default defineConfig({
14
- // ...
15
- plugins: [codeTabs()],
16
- });
17
- ```
18
-
19
- スタイルと `initCodeTabs` はプラグイン自身が登録します。
20
-
21
- ## コードブロックにタブ名を付ける
22
-
23
- ````md
24
- ```dart tab="Flutter"
25
- void main() {}
26
- ```
27
-
28
- ```ts tab="React"
29
- console.log("Hello");
30
- ```
31
- ````
32
-
33
- `tab` を持つコードブロックが連続している間だけ、一つのタブグループになります。段落、見出し、画像などが間に入ると別のグループです。`tab` のないコードブロックは変更しません。
34
-
35
- ## オプションとアクセシビリティ
36
-
37
- | オプション | 既定値 | 内容 |
38
- | --- | --- | --- |
39
- | `syncTabs` | `false` | あるタブを選ぶと、同じページの同名タブも切り替えるか |
40
-
41
- 生成する要素には `tablist`、`tab`、`tabpanel` のロールを設定します。矢印キー、`Home`、`End`、`Enter`、`Space` で操作でき、JavaScript が動かない場合は全パネルをそのまま読めます。
42
-
43
- `@riebeckite/plugin-code-enhance` と併用する場合は、強調表示後の出力をまとめられるよう `codeEnhance()` の後に `codeTabs()` を置いてください。
44
-
45
- ## 公開 API
46
-
47
- - `codeTabs(options?)` — プラグインファクトリ
48
- - `rehypeCodeTabs(options?)` — Rehype 変換
49
- - `initCodeTabs(options?)` — ブラウザ初期化関数
50
- - `CodeTabsOptions`、`CodeTabsClientOptions` — 型
51
-
52
- ## 関連資料
53
-
54
- - [プラグインシステム](../../../docs/ja/plugin-system.md)
55
- - [`@riebeckite/plugin-code-enhance`](../code-enhance/README_ja.md)
1
+ # @riebeckite/plugin-code-tabs
2
+
3
+ 連続するコードブロックを、`tab="..."` の名前ごとにタブへまとめるプラグインです。
4
+
5
+ [English](./README.md)
6
+
7
+ ## 設定
8
+
9
+ ```ts
10
+ import { defineConfig } from "@riebeckite/core";
11
+ import { codeTabs } from "@riebeckite/plugin-code-tabs";
12
+
13
+ export default defineConfig({
14
+ // ...
15
+ plugins: [codeTabs()],
16
+ });
17
+ ```
18
+
19
+ スタイルと `initCodeTabs` はプラグイン自身が登録します。
20
+
21
+ ## コードブロックにタブ名を付ける
22
+
23
+ ````md
24
+ ```dart tab="Flutter"
25
+ void main() {}
26
+ ```
27
+
28
+ ```ts tab="React"
29
+ console.log("Hello");
30
+ ```
31
+ ````
32
+
33
+ `tab` を持つコードブロックが連続している間だけ、一つのタブグループになります。段落、見出し、画像などが間に入ると別のグループです。`tab` のないコードブロックは変更しません。
34
+
35
+ ## オプションとアクセシビリティ
36
+
37
+ | オプション | 既定値 | 内容 |
38
+ | --- | --- | --- |
39
+ | `syncTabs` | `false` | あるタブを選ぶと、同じページの同名タブも切り替えるか |
40
+
41
+ 生成する要素には `tablist`、`tab`、`tabpanel` のロールを設定します。矢印キー、`Home`、`End`、`Enter`、`Space` で操作でき、JavaScript が動かない場合は全パネルをそのまま読めます。
42
+
43
+ `@riebeckite/plugin-code-enhance` と併用する場合は、強調表示後の出力をまとめられるよう `codeEnhance()` の後に `codeTabs()` を置いてください。
44
+
45
+ ## 公開 API
46
+
47
+ - `codeTabs(options?)` — プラグインファクトリ
48
+ - `rehypeCodeTabs(options?)` — Rehype 変換
49
+ - `initCodeTabs(options?)` — ブラウザ初期化関数
50
+ - `CodeTabsOptions`、`CodeTabsClientOptions` — 型
51
+
52
+ ## 関連資料
53
+
54
+ - [プラグインシステム](../../../docs/ja/reference/plugin-api.md)
55
+ - [`@riebeckite/plugin-code-enhance`](../code-enhance/README_ja.md)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@riebeckite/plugin-code-tabs",
3
- "version": "0.0.12",
3
+ "version": "0.0.13",
4
4
  "license": "Apache-2.0",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -21,7 +21,7 @@
21
21
  "./style.css": "./style.css"
22
22
  },
23
23
  "dependencies": {
24
- "@riebeckite/core": "0.0.12"
24
+ "@riebeckite/core": "0.0.13"
25
25
  },
26
26
  "publishConfig": {
27
27
  "access": "public"