c063 1.6.2 → 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 (6) hide show
  1. package/dist/components/CodeToken.d.ts +6 -6
  2. package/dist/components/CodeToken.js +8 -8
  3. package/dist/types/index.d.ts +2 -2
  4. package/package.json +1 -1
  5. package/src/components/CodeToken.tsx +10 -8
  6. package/src/types/index.tsx +2 -2
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
@@ -43,7 +43,7 @@ export type CodeTokenProps<T extends React.ElementType = "span"> = AsComponentPr
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
  }>;
@@ -105,7 +105,7 @@ export type CodeBlockProps<T extends React.ElementType = "span"> = OverrideProps
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.2",
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
@@ -59,7 +59,7 @@ export type CodeTokenProps<T extends React.ElementType = "span"> =
59
59
  type?: CodeTokenType;
60
60
  /**
61
61
  * 語法主題名稱。
62
- * @default "vscode-dark"
62
+ * @default "vscode-dark-modern"
63
63
  */
64
64
  theme?: CodeTheme;
65
65
  }
@@ -136,7 +136,7 @@ export type CodeBlockProps<T extends React.ElementType = "span"> =
136
136
  showLineNumbers?: boolean;
137
137
  /**
138
138
  * 行號的樣式。
139
- * @default { color: "#888", fontSize: "0.8em" }
139
+ * @default{ color: "#888", fontSize: "0.8em" }
140
140
  * @example
141
141
  * ```tsx
142
142
  * <CodeBlock lineNumberStyle={{ color: "#888", fontSize: "0.8em" }} />