c063 1.6.0 → 1.6.2

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/README.md +2 -0
  2. package/dist/components/CodeBlock.js +1 -1
  3. package/dist/types/index.d.ts +3 -3
  4. package/package.json +1 -1
  5. package/src/components/CodeBlock.tsx +1 -1
  6. 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/CodeBlock.js CHANGED
@@ -12,7 +12,7 @@ import { CodeLine } from "./CodeLine";
12
12
  * @returns JSX 元素，呈現語法高亮的程式碼區塊
13
13
  */
14
14
  export const CodeBlock = ({ tokenLines, showLineNumbers = true, lineNumberStyle, autoWrap, theme, ...rest }) => {
15
- return (_jsx("pre", { ...rest, style: { margin: 0, padding: 0, overflowX: "auto" }, children: _jsx("table", { style: { borderCollapse: "collapse", width: "100%" }, children: _jsx("tbody", { children: tokenLines.map((line, index) => (_jsxs("tr", { children: [showLineNumbers && (_jsx("td", { style: {
15
+ return (_jsx("pre", { ...rest, style: { margin: 0, padding: 0, overflowX: "auto" }, children: _jsx("table", { style: { borderCollapse: "collapse", width: "100%" }, children: _jsx("tbody", { children: tokenLines.map((line, index) => (_jsxs("tr", { style: { verticalAlign: "top" }, children: [showLineNumbers && (_jsx("td", { style: {
16
16
  paddingInline: "0.5rem",
17
17
  textAlign: "right",
18
18
  whiteSpace: "pre",
package/dist/types/index.d.ts CHANGED
@@ -36,7 +36,7 @@ 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
  */
@@ -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
  *
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.0",
4
+ "version": "1.6.2",
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/CodeBlock.tsx CHANGED
@@ -25,7 +25,7 @@ export const CodeBlock = <T extends React.ElementType = "span">({
25
25
  <table style={{ borderCollapse: "collapse", width: "100%" }}>
26
26
  <tbody>
27
27
  {tokenLines.map((line, index) => (
28
- <tr key={index}>
28
+ <tr key={index} style={{ verticalAlign: "top" }}>
29
29
  {showLineNumbers && (
30
30
  <td
31
31
  style={{
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"
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];