c063 1.6.1 → 1.6.3

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 (7) hide show
  1. package/README.md +2 -0
  2. package/dist/components/CodeToken.d.ts +6 -6
  3. package/dist/components/CodeToken.js +8 -8
  4. package/dist/types/index.d.ts +5 -5
  5. package/package.json +1 -1
  6. package/src/components/CodeToken.tsx +10 -8
  7. package/src/types/index.tsx +66 -64
package/README.md CHANGED
@@ -75,6 +75,7 @@ interface CodeBlockProps<T extends React.ElementType> {
75
75
  showLineNumbers?: boolean; // Default true
76
76
  lineNumberStyle?: React.CSSProperties;
77
77
  theme?: CodeTheme; // e.g. "github-dark"
78
+ autoWrap:? boolean;
78
79
  }
79
80
  ```
80
81
 
@@ -84,6 +85,7 @@ interface CodeBlockProps<T extends React.ElementType> {
84
85
  interface CodeLineProps<T extends React.ElementType> {
85
86
  tokens: CodeTokenProps<T>[];
86
87
  theme?: CodeTheme;
88
+ autoWrap:? boolean;
87
89
  }
88
90
  ```
89
91
 
package/dist/components/CodeToken.d.ts CHANGED
@@ -3,15 +3,15 @@ import { CodeTokenProps } from "../types/index";
3
3
  * 渲染單一語法 token（例如關鍵字、字串、註解等），可指定標籤與樣式。
4
4
  *
5
5
  * @template T 元件渲染類型，預設為 <span>
6
- * @param props.as 指定要渲染的 HTML 標籤或客製元件
7
- * @param props.type 語法類型，用於對應不同顏色
8
- * @param props.style 額外樣式，會與語法顏色合併
9
- * @param props.children 顯示的程式碼字串
10
- * @param props.theme 主題設定
6
+ * @param as 指定要渲染的 HTML 標籤或客製元件
7
+ * @param type 語法類型，用於對應不同顏色
8
+ * @param style 額外樣式，會與語法顏色合併
9
+ * @param children 顯示的程式碼字串
10
+ * @param theme 主題設定
11
11
  * @param rest 其他 HTML 屬性
12
12
  * @returns JSX 元素，顯示帶有語法顏色的 token
13
13
  */
14
14
  export declare const CodeToken: {
15
- <T extends React.ElementType = "span">({ as, style, children, type, theme, ...rest }: CodeTokenProps<T>): import("react/jsx-runtime").JSX.Element;
15
+ <T extends React.ElementType = "span">({ as, style, children, className, type, theme, ...rest }: CodeTokenProps<T>): import("react/jsx-runtime").JSX.Element;
16
16
  displayName: string;
17
17
  };
package/dist/components/CodeToken.js CHANGED
@@ -4,18 +4,18 @@ import { themeMap } from "../libs/index";
4
4
  * 渲染單一語法 token（例如關鍵字、字串、註解等），可指定標籤與樣式。
5
5
  *
6
6
  * @template T 元件渲染類型，預設為 <span>
7
- * @param props.as 指定要渲染的 HTML 標籤或客製元件
8
- * @param props.type 語法類型，用於對應不同顏色
9
- * @param props.style 額外樣式，會與語法顏色合併
10
- * @param props.children 顯示的程式碼字串
11
- * @param props.theme 主題設定
7
+ * @param as 指定要渲染的 HTML 標籤或客製元件
8
+ * @param type 語法類型，用於對應不同顏色
9
+ * @param style 額外樣式，會與語法顏色合併
10
+ * @param children 顯示的程式碼字串
11
+ * @param theme 主題設定
12
12
  * @param rest 其他 HTML 屬性
13
13
  * @returns JSX 元素，顯示帶有語法顏色的 token
14
14
  */
15
- export const CodeToken = ({ as, style, children, type, theme, ...rest }) => {
15
+ export const CodeToken = ({ as, style, children, className, type = "default", theme = "default-dark-modern", ...rest }) => {
16
16
  const Tag = as || "span";
17
- return (_jsx(Tag, { ...rest, style: {
18
- color: themeMap[theme || "default-dark-modern"][type || "default"],
17
+ return (_jsx(Tag, { ...rest, className: `c063-${type} ${className || ""}`, style: {
18
+ color: themeMap[theme][type],
19
19
  ...style,
20
20
  }, children: children }));
21
21
  };
package/dist/types/index.d.ts CHANGED
@@ -36,14 +36,14 @@ export type CodeTheme = (typeof themes)[number];
36
36
  *
37
37
  * @template T HTML 或客製元素，例如 span、a、Link 等
38
38
  */
39
- export type CodeTokenProps<T extends React.ElementType> = AsComponentProps<T, {
39
+ export type CodeTokenProps<T extends React.ElementType = "span"> = AsComponentProps<T, {
40
40
  /**
41
41
  * 語法 token 的語意類型，用於指定樣式顏色。
42
42
  */
43
43
  type?: CodeTokenType;
44
44
  /**
45
45
  * 語法主題名稱。
46
- * @default "vscode-dark"
46
+ * @default "vscode-dark-modern"
47
47
  */
48
48
  theme?: CodeTheme;
49
49
  }>;
@@ -51,7 +51,7 @@ export type CodeTokenBuilder = <T extends React.ElementType = "span">(children:
51
51
  /**
52
52
  * 用於單一程式碼行的屬性，用在 <CodeLine /> 或類似元件中。
53
53
  */
54
- export type CodeLineProps<T extends React.ElementType> = OverrideProps<React.HTMLAttributes<HTMLElement>, {
54
+ export type CodeLineProps<T extends React.ElementType = "span"> = OverrideProps<React.HTMLAttributes<HTMLElement>, {
55
55
  /**
56
56
  * 該行所包含的語法 token。
57
57
  *
@@ -77,7 +77,7 @@ export type CodeLineProps<T extends React.ElementType> = OverrideProps<React.HTM
77
77
  */
78
78
  autoWrap?: boolean;
79
79
  }>;
80
- export type CodeBlockProps<T extends React.ElementType> = OverrideProps<React.HTMLAttributes<HTMLPreElement>, {
80
+ export type CodeBlockProps<T extends React.ElementType = "span"> = OverrideProps<React.HTMLAttributes<HTMLPreElement>, {
81
81
  /**
82
82
  * 所有程式碼行的 token 陣列。
83
83
  *
@@ -105,7 +105,7 @@ export type CodeBlockProps<T extends React.ElementType> = OverrideProps<React.HT
105
105
  showLineNumbers?: boolean;
106
106
  /**
107
107
  * 行號的樣式。
108
- * @default { color: "#888", fontSize: "0.8em" }
108
+ * @default{ color: "#888", fontSize: "0.8em" }
109
109
  * @example
110
110
  * ```tsx
111
111
  * <CodeBlock lineNumberStyle={{ color: "#888", fontSize: "0.8em" }} />
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/package.json",
3
3
  "name": "c063",
4
- "version": "1.6.1",
4
+ "version": "1.6.3",
5
5
  "description": "A React component for displaying code snippets with syntax highlighting.",
6
6
  "main": "dist/index.js",
7
7
  "types": "dist/index.d.ts",
package/src/components/CodeToken.tsx CHANGED
@@ -5,11 +5,11 @@ import { CodeTokenProps } from "../types/index";
5
5
  * 渲染單一語法 token（例如關鍵字、字串、註解等），可指定標籤與樣式。
6
6
  *
7
7
  * @template T 元件渲染類型，預設為 <span>
8
- * @param props.as 指定要渲染的 HTML 標籤或客製元件
9
- * @param props.type 語法類型，用於對應不同顏色
10
- * @param props.style 額外樣式，會與語法顏色合併
11
- * @param props.children 顯示的程式碼字串
12
- * @param props.theme 主題設定
8
+ * @param as 指定要渲染的 HTML 標籤或客製元件
9
+ * @param type 語法類型，用於對應不同顏色
10
+ * @param style 額外樣式，會與語法顏色合併
11
+ * @param children 顯示的程式碼字串
12
+ * @param theme 主題設定
13
13
  * @param rest 其他 HTML 屬性
14
14
  * @returns JSX 元素，顯示帶有語法顏色的 token
15
15
  */
@@ -17,8 +17,9 @@ export const CodeToken = <T extends React.ElementType = "span">({
17
17
  as,
18
18
  style,
19
19
  children,
20
- type,
21
- theme,
20
+ className,
21
+ type = "default",
22
+ theme = "default-dark-modern",
22
23
  ...rest
23
24
  }: CodeTokenProps<T>) => {
24
25
  const Tag = as || "span";
@@ -26,8 +27,9 @@ export const CodeToken = <T extends React.ElementType = "span">({
26
27
  return (
27
28
  <Tag
28
29
  {...rest}
30
+ className={`c063-${type} ${className || ""}`}
29
31
  style={{
30
- color: themeMap[theme || "default-dark-modern"][type || "default"],
32
+ color: themeMap[theme][type],
31
33
  ...style,
32
34
  }}
33
35
  >
package/src/types/index.tsx CHANGED
@@ -49,20 +49,21 @@ export type CodeTheme = (typeof themes)[number];
49
49
  *
50
50
  * @template T HTML 或客製元素，例如 span、a、Link 等
51
51
  */
52
- export type CodeTokenProps<T extends React.ElementType> = AsComponentProps<
53
- T,
54
- {
55
- /**
56
- * 語法 token 的語意類型，用於指定樣式顏色。
57
- */
58
- type?: CodeTokenType;
59
- /**
60
- * 語法主題名稱。
61
- * @default "vscode-dark"
62
- */
63
- theme?: CodeTheme;
64
- }
65
- >;
52
+ export type CodeTokenProps<T extends React.ElementType = "span"> =
53
+ AsComponentProps<
54
+ T,
55
+ {
56
+ /**
57
+ * 語法 token 的語意類型，用於指定樣式顏色。
58
+ */
59
+ type?: CodeTokenType;
60
+ /**
61
+ * 語法主題名稱。
62
+ * @default "vscode-dark-modern"
63
+ */
64
+ theme?: CodeTheme;
65
+ }
66
+ >;
66
67
 
67
68
  export type CodeTokenBuilder = <T extends React.ElementType = "span">(
68
69
  children: CodeTokenProps<T>["children"],
@@ -72,7 +73,7 @@ export type CodeTokenBuilder = <T extends React.ElementType = "span">(
72
73
  /**
73
74
  * 用於單一程式碼行的屬性，用在 <CodeLine /> 或類似元件中。
74
75
  */
75
- export type CodeLineProps<T extends React.ElementType> = OverrideProps<
76
+ export type CodeLineProps<T extends React.ElementType = "span"> = OverrideProps<
76
77
  React.HTMLAttributes<HTMLElement>,
77
78
  {
78
79
  /**
@@ -103,56 +104,57 @@ export type CodeLineProps<T extends React.ElementType> = OverrideProps<
103
104
  }
104
105
  >;
105
106
 
106
- export type CodeBlockProps<T extends React.ElementType> = OverrideProps<
107
- React.HTMLAttributes<HTMLPreElement>,
108
- {
109
- /**
110
- * 所有程式碼行的 token 陣列。
111
- *
112
- * @example
113
- * ```tsx
114
- * <CodeBlock tokenLines={[
115
- * [
116
- * { type: "keyword1", children: "const" },
117
- * { type: "variable", children: "x" },
118
- * { type: "operator", children: "=" },
119
- * { type: "number", children: "42" },
120
- * ],
121
- * [
122
- * { type: "keyword2", children: "return" },
123
- * { type: "variable", children: "x" },
124
- * ],
125
- * ]} />
126
- * ```
127
- */
128
- tokenLines: CodeTokenProps<T>[][];
107
+ export type CodeBlockProps<T extends React.ElementType = "span"> =
108
+ OverrideProps<
109
+ React.HTMLAttributes<HTMLPreElement>,
110
+ {
111
+ /**
112
+ * 所有程式碼行的 token 陣列。
113
+ *
114
+ * @example
115
+ * ```tsx
116
+ * <CodeBlock tokenLines={[
117
+ * [
118
+ * { type: "keyword1", children: "const" },
119
+ * { type: "variable", children: "x" },
120
+ * { type: "operator", children: "=" },
121
+ * { type: "number", children: "42" },
122
+ * ],
123
+ * [
124
+ * { type: "keyword2", children: "return" },
125
+ * { type: "variable", children: "x" },
126
+ * ],
127
+ * ]} />
128
+ * ```
129
+ */
130
+ tokenLines: CodeTokenProps<T>[][];
129
131
 
130
- /**
131
- * 是否顯示行號。
132
- * @default true
133
- */
134
- showLineNumbers?: boolean;
135
- /**
136
- * 行號的樣式。
137
- * @default { color: "#888", fontSize: "0.8em" }
138
- * @example
139
- * ```tsx
140
- * <CodeBlock lineNumberStyle={{ color: "#888", fontSize: "0.8em" }} />
141
- * ```
142
- * */
143
- lineNumberStyle?: React.CSSProperties;
144
- /**
145
- * 語法主題名稱。
146
- * @default "default-dark-modern"
147
- */
148
- theme?: CodeTheme;
132
+ /**
133
+ * 是否顯示行號。
134
+ * @default true
135
+ */
136
+ showLineNumbers?: boolean;
137
+ /**
138
+ * 行號的樣式。
139
+ * @default{ color: "#888", fontSize: "0.8em" }
140
+ * @example
141
+ * ```tsx
142
+ * <CodeBlock lineNumberStyle={{ color: "#888", fontSize: "0.8em" }} />
143
+ * ```
144
+ * */
145
+ lineNumberStyle?: React.CSSProperties;
146
+ /**
147
+ * 語法主題名稱。
148
+ * @default "default-dark-modern"
149
+ */
150
+ theme?: CodeTheme;
149
151
 
150
- /**
151
- * 是否自動換行
152
- * @default true
153
- */
154
- autoWrap?: boolean;
155
- }
156
- >;
152
+ /**
153
+ * 是否自動換行
154
+ * @default true
155
+ */
156
+ autoWrap?: boolean;
157
+ }
158
+ >;
157
159
 
158
160
  export type ParsableLanguage = (typeof parsableLanguages)[number];