c063 1.5.0 → 1.6.1

package/dist/components/CodeBlock.d.ts

@@ -11,6 +11,6 @@ import { CodeBlockProps } from "../types/index";
  * @returns JSX 元素，呈現語法高亮的程式碼區塊
  */
 export declare const CodeBlock: {
-    <T extends React.ElementType = "span">({ tokenLines, showLineNumbers, lineNumberStyle, theme, ...rest }: CodeBlockProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType = "span">({ tokenLines, showLineNumbers, lineNumberStyle, autoWrap, theme, ...rest }: CodeBlockProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/CodeBlock.js

@@ -11,14 +11,15 @@ import { CodeLine } from "./CodeLine";
  * @param rest 其他傳遞給 <pre> 的屬性
  * @returns JSX 元素，呈現語法高亮的程式碼區塊
  */
-export const CodeBlock = ({ tokenLines, showLineNumbers = true, lineNumberStyle, theme, ...rest }) => {
-    return (_jsx("pre", { ...rest, children: tokenLines.map((line, index) => (
-        // eslint-disable-next-line react/react-in-jsx-scope
-        _jsxs("div", { style: {
-                display: "flex",
-                flexWrap: "nowrap",
-                width: "100%",
-                gap: "0.5rem",
-            }, children: [showLineNumbers && (_jsx("span", { style: { color: "#888", userSelect: "none", ...lineNumberStyle }, children: index + 1 })), _jsx(CodeLine, { theme: theme, tokens: line })] }, index))) }));
+export const CodeBlock = ({ tokenLines, showLineNumbers = true, lineNumberStyle, autoWrap, theme, ...rest }) => {
+    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: {
+                                paddingInline: "0.5rem",
+                                textAlign: "right",
+                                whiteSpace: "pre",
+                                fontVariantNumeric: "tabular-nums",
+                                color: "#888",
+                                userSelect: "none",
+                                ...lineNumberStyle,
+                            }, children: index + 1 })), _jsx("td", { style: { width: "100%" }, children: _jsx(CodeLine, { theme: theme, tokens: line, autoWrap: autoWrap }) })] }, index))) }) }) }));
 };
 CodeBlock.displayName = "CodeBlock";

package/dist/components/CodeLine.d.ts

@@ -6,10 +6,11 @@ import { CodeLineProps } from "../types/index";
  * @param props.tokens 該行所包含的語法 token 陣列
  * @param props.style 自訂樣式，會與 whiteSpace: pre-wrap 合併
  * @param props.theme 主題
+ * @param prop.autoWrap 是否自動換行
  * @param rest 其他 HTMLAttributes
  * @returns JSX 元素，呈現語法 token 的單行程式碼
  */
 export declare const CodeLine: {
-    <T extends React.ElementType = "span">({ style, tokens, theme, ...rest }: CodeLineProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType = "span">({ style, tokens, theme, autoWrap, ...rest }: CodeLineProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/CodeLine.js

@@ -7,12 +7,13 @@ import { CodeToken } from "./CodeToken";
  * @param props.tokens 該行所包含的語法 token 陣列
  * @param props.style 自訂樣式，會與 whiteSpace: pre-wrap 合併
  * @param props.theme 主題
+ * @param prop.autoWrap 是否自動換行
  * @param rest 其他 HTMLAttributes
  * @returns JSX 元素，呈現語法 token 的單行程式碼
  */
-export const CodeLine = ({ style, tokens, theme, ...rest }) => {
+export const CodeLine = ({ style, tokens, theme, autoWrap = true, ...rest }) => {
     return (_jsx("code", { ...rest, style: {
-            whiteSpace: "pre-wrap",
+            whiteSpace: autoWrap ? "pre-wrap" : "nowrap",
             ...style,
         }, children: tokens.map((token, index) => (_jsx(CodeToken, { theme: theme, ...token }, index))) }));
 };

package/dist/types/index.d.ts

@@ -71,6 +71,11 @@ export type CodeLineProps<T extends React.ElementType> = OverrideProps<React.HTM
      * @default "vscode-dark"
      */
     theme?: CodeTheme;
+    /**
+     * 是否自動換行
+     * @default true
+     */
+    autoWrap?: boolean;
 }>;
 export type CodeBlockProps<T extends React.ElementType> = OverrideProps<React.HTMLAttributes<HTMLPreElement>, {
     /**
@@ -112,5 +117,10 @@ export type CodeBlockProps<T extends React.ElementType> = OverrideProps<React.HT
      * @default "default-dark-modern"
      */
     theme?: CodeTheme;
+    /**
+     * 是否自動換行
+     * @default true
+     */
+    autoWrap?: boolean;
 }>;
 export type ParsableLanguage = (typeof parsableLanguages)[number];

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "c063",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "description": "A React component for displaying code snippets with syntax highlighting.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/CodeBlock.tsx

@@ -1,5 +1,6 @@
 import { CodeBlockProps } from "../types/index";
 import { CodeLine } from "./CodeLine";
+
 /**
  * 顯示完整程式碼區塊，支援多行語法 token 與行號顯示。
  *
@@ -15,32 +16,38 @@ export const CodeBlock = <T extends React.ElementType = "span">({
   tokenLines,
   showLineNumbers = true,
   lineNumberStyle,
+  autoWrap,
   theme,
   ...rest
 }: CodeBlockProps<T>) => {
   return (
-    <pre {...rest}>
-      {tokenLines.map((line, index) => (
-        // eslint-disable-next-line react/react-in-jsx-scope
-        <div
-          key={index}
-          style={{
-            display: "flex",
-            flexWrap: "nowrap",
-            width: "100%",
-            gap: "0.5rem",
-          }}
-        >
-          {showLineNumbers && (
-            <span
-              style={{ color: "#888", userSelect: "none", ...lineNumberStyle }}
-            >
-              {index + 1}
-            </span>
-          )}
-          <CodeLine theme={theme} tokens={line} />
-        </div>
-      ))}
+    <pre {...rest} style={{ margin: 0, padding: 0, overflowX: "auto" }}>
+      <table style={{ borderCollapse: "collapse", width: "100%" }}>
+        <tbody>
+          {tokenLines.map((line, index) => (
+            <tr key={index} style={{ verticalAlign: "top" }}>
+              {showLineNumbers && (
+                <td
+                  style={{
+                    paddingInline: "0.5rem",
+                    textAlign: "right",
+                    whiteSpace: "pre",
+                    fontVariantNumeric: "tabular-nums",
+                    color: "#888",
+                    userSelect: "none",
+                    ...lineNumberStyle,
+                  }}
+                >
+                  {index + 1}
+                </td>
+              )}
+              <td style={{ width: "100%" }}>
+                <CodeLine theme={theme} tokens={line} autoWrap={autoWrap} />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </pre>
   );
 };

package/src/components/CodeLine.tsx

@@ -6,7 +6,8 @@ import { CodeToken } from "./CodeToken";
  * @template T 元件渲染類型，例如 <code>、<span> 等
  * @param props.tokens 該行所包含的語法 token 陣列
  * @param props.style 自訂樣式，會與 whiteSpace: pre-wrap 合併
- * @param props.theme 主題 
+ * @param props.theme 主題
+ * @param prop.autoWrap 是否自動換行
  * @param rest 其他 HTMLAttributes
  * @returns JSX 元素，呈現語法 token 的單行程式碼
  */
@@ -14,13 +15,14 @@ export const CodeLine = <T extends React.ElementType = "span">({
   style,
   tokens,
   theme,
+  autoWrap = true,
   ...rest
 }: CodeLineProps<T>) => {
   return (
     <code
       {...rest}
       style={{
-        whiteSpace: "pre-wrap",
+        whiteSpace: autoWrap ? "pre-wrap" : "nowrap",
         ...style,
       }}
     >

package/src/types/index.tsx

@@ -94,6 +94,12 @@ export type CodeLineProps<T extends React.ElementType> = OverrideProps<
      * @default "vscode-dark"
      */
     theme?: CodeTheme;
+
+    /**
+     * 是否自動換行
+     * @default true
+     */
+    autoWrap?: boolean;
   }
 >;
 
@@ -140,6 +146,12 @@ export type CodeBlockProps<T extends React.ElementType> = OverrideProps<
      * @default "default-dark-modern"
      */
     theme?: CodeTheme;
+
+    /**
+     * 是否自動換行
+     * @default true
+     */
+    autoWrap?: boolean;
   }
 >;