c063 1.6.5 → 1.7.0

package/dist/components/CodeBlock.js

@@ -1,5 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CodeLine } from "./CodeLine";
+const preStyle = { margin: 0, padding: 0, overflowX: "auto" };
+const tableStyle = { borderCollapse: "collapse", width: "100%" };
+const rowStyle = { verticalAlign: "top" };
+const codeCellStyle = { width: "100%" };
+const lineNumberBaseStyle = {
+    paddingInline: "0.5rem",
+    textAlign: "right",
+    whiteSpace: "pre",
+    fontVariantNumeric: "tabular-nums",
+    color: "#888",
+    userSelect: "none",
+};
 /**
  * 顯示完整程式碼區塊，支援多行語法 token 與行號顯示。
  *
@@ -12,14 +24,9 @@ import { CodeLine } from "./CodeLine";
  * @returns JSX 元素，呈現語法高亮的程式碼區塊
  */
 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",
+    return (_jsx("pre", { ...rest, style: preStyle, children: _jsx("table", { style: tableStyle, children: _jsx("tbody", { children: tokenLines.map((line, index) => (_jsxs("tr", { style: rowStyle, children: [showLineNumbers && (_jsx("td", { style: {
+                                ...lineNumberBaseStyle,
                                 ...lineNumberStyle,
-                            }, children: index + 1 })), _jsx("td", { style: { width: "100%" }, children: _jsx(CodeLine, { theme: theme, tokens: line, autoWrap: autoWrap }) })] }, index))) }) }) }));
+                            }, children: index + 1 })), _jsx("td", { style: codeCellStyle, children: _jsx(CodeLine, { theme: theme, tokens: line, autoWrap: autoWrap }) })] }, index))) }) }) }));
 };
 CodeBlock.displayName = "CodeBlock";

package/dist/components/CodeLine.d.ts

@@ -1,16 +1,2 @@
 import { CodeLineProps } from "../types/index";
-/**
- * 渲染單一程式碼行，包含多個語法 token。
- *
- * @template T 元件渲染類型，例如 <code>、<span> 等
- * @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, autoWrap, ...rest }: CodeLineProps<T>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CodeLine: import("react").MemoExoticComponent<(<T extends React.ElementType = "span">({ style, tokens, theme, autoWrap, ...rest }: CodeLineProps<T>) => import("react/jsx-runtime").JSX.Element)>;

package/dist/components/CodeLine.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
 import { CodeToken } from "./CodeToken";
 /**
  * 渲染單一程式碼行，包含多個語法 token。
@@ -11,10 +12,11 @@ import { CodeToken } from "./CodeToken";
  * @param rest 其他 HTMLAttributes
  * @returns JSX 元素，呈現語法 token 的單行程式碼
  */
-export const CodeLine = ({ style, tokens, theme, autoWrap = true, ...rest }) => {
+const CodeLineInner = ({ style, tokens, theme, autoWrap = true, ...rest }) => {
     return (_jsx("code", { ...rest, style: {
             whiteSpace: autoWrap ? "pre-wrap" : "nowrap",
             ...style,
         }, children: tokens.map((token, index) => (_jsx(CodeToken, { theme: theme, ...token }, index))) }));
 };
+export const CodeLine = memo(CodeLineInner);
 CodeLine.displayName = "CodeLine";

package/dist/components/CodeToken.d.ts

@@ -1,17 +1,2 @@
 import { CodeTokenProps } from "../types/index";
-/**
- * 渲染單一語法 token（例如關鍵字、字串、註解等），可指定標籤與樣式。
- *
- * @template T 元件渲染類型，預設為 <span>
- * @param as 指定要渲染的 HTML 標籤或客製元件
- * @param type 語法類型，用於對應不同顏色
- * @param style 額外樣式，會與語法顏色合併
- * @param children 顯示的程式碼字串
- * @param theme 主題設定
- * @param rest 其他 HTML 屬性
- * @returns JSX 元素，顯示帶有語法顏色的 token
- */
-export declare const CodeToken: {
-    <T extends React.ElementType = "span">({ as, style, children, className, type, theme, ...rest }: CodeTokenProps<T>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const CodeToken: import("react").MemoExoticComponent<(<T extends React.ElementType = "span">({ as, style, children, className, type, theme, ...rest }: CodeTokenProps<T>) => import("react/jsx-runtime").JSX.Element)>;

package/dist/components/CodeToken.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
 import { themeMap } from "../libs/index";
 /**
  * 渲染單一語法 token（例如關鍵字、字串、註解等），可指定標籤與樣式。
@@ -12,11 +13,12 @@ import { themeMap } from "../libs/index";
  * @param rest 其他 HTML 屬性
  * @returns JSX 元素，顯示帶有語法顏色的 token
  */
-export const CodeToken = ({ as, style, children, className, type = "default", theme = "default-dark-modern", ...rest }) => {
+const CodeTokenInner = ({ as, style, children, className, type = "default", theme = "default-dark-modern", ...rest }) => {
     const Tag = as || "span";
     return (_jsx(Tag, { ...rest, className: `c063-${type} ${className || ""}`, style: {
             color: themeMap[theme][type],
             ...style,
         }, children: children }));
 };
+export const CodeToken = memo(CodeTokenInner);
 CodeToken.displayName = "CodeToken";

package/dist/libs/index.d.ts

@@ -1,19 +1,19 @@
 import type { CodeTokenType, CodeTheme } from "../types";
 declare const _themeRegistry: {
-    readonly "default-dark-modern": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
-    readonly "default-dark": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
-    readonly "default-dark-plus": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
-    readonly "visual-studio-light": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
-    readonly "default-light-plus": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
-    readonly "default-light-modern": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
-    readonly "github-light": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
-    readonly "github-light-default": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
-    readonly "github-light-colorblind": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
-    readonly "github-dark": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
-    readonly "github-dark-default": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
-    readonly "github-dark-colorblind": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
+    readonly "default-dark-modern": Record<"string" | "number" | "function" | "keyword1" | "keyword2" | "comment" | "type" | "variable" | "constant" | "brackets1" | "brackets2" | "brackets3" | "operator" | "default", import("csstype").Property.Color | undefined>;
+    readonly "default-dark": Record<"string" | "number" | "function" | "keyword1" | "keyword2" | "comment" | "type" | "variable" | "constant" | "brackets1" | "brackets2" | "brackets3" | "operator" | "default", import("csstype").Property.Color | undefined>;
+    readonly "default-dark-plus": Record<"string" | "number" | "function" | "keyword1" | "keyword2" | "comment" | "type" | "variable" | "constant" | "brackets1" | "brackets2" | "brackets3" | "operator" | "default", import("csstype").Property.Color | undefined>;
+    readonly "visual-studio-light": Record<"string" | "number" | "function" | "keyword1" | "keyword2" | "comment" | "type" | "variable" | "constant" | "brackets1" | "brackets2" | "brackets3" | "operator" | "default", import("csstype").Property.Color | undefined>;
+    readonly "default-light-plus": Record<"string" | "number" | "function" | "keyword1" | "keyword2" | "comment" | "type" | "variable" | "constant" | "brackets1" | "brackets2" | "brackets3" | "operator" | "default", import("csstype").Property.Color | undefined>;
+    readonly "default-light-modern": Record<"string" | "number" | "function" | "keyword1" | "keyword2" | "comment" | "type" | "variable" | "constant" | "brackets1" | "brackets2" | "brackets3" | "operator" | "default", import("csstype").Property.Color | undefined>;
+    readonly "github-light": Record<"string" | "number" | "function" | "keyword1" | "keyword2" | "comment" | "type" | "variable" | "constant" | "brackets1" | "brackets2" | "brackets3" | "operator" | "default", import("csstype").Property.Color | undefined>;
+    readonly "github-light-default": Record<"string" | "number" | "function" | "keyword1" | "keyword2" | "comment" | "type" | "variable" | "constant" | "brackets1" | "brackets2" | "brackets3" | "operator" | "default", import("csstype").Property.Color | undefined>;
+    readonly "github-light-colorblind": Record<"string" | "number" | "function" | "keyword1" | "keyword2" | "comment" | "type" | "variable" | "constant" | "brackets1" | "brackets2" | "brackets3" | "operator" | "default", import("csstype").Property.Color | undefined>;
+    readonly "github-dark": Record<"string" | "number" | "function" | "keyword1" | "keyword2" | "comment" | "type" | "variable" | "constant" | "brackets1" | "brackets2" | "brackets3" | "operator" | "default", import("csstype").Property.Color | undefined>;
+    readonly "github-dark-default": Record<"string" | "number" | "function" | "keyword1" | "keyword2" | "comment" | "type" | "variable" | "constant" | "brackets1" | "brackets2" | "brackets3" | "operator" | "default", import("csstype").Property.Color | undefined>;
+    readonly "github-dark-colorblind": Record<"string" | "number" | "function" | "keyword1" | "keyword2" | "comment" | "type" | "variable" | "constant" | "brackets1" | "brackets2" | "brackets3" | "operator" | "default", import("csstype").Property.Color | undefined>;
 };
 export declare const themes: (keyof typeof _themeRegistry)[];
 export declare const themeMap: Record<CodeTheme, Record<CodeTokenType, React.CSSProperties["color"]>>;
-export declare const parsableLanguages: readonly ["javascript"];
+export declare const CODE_TOKEN_TYPES: readonly ["keyword1", "keyword2", "function", "string", "number", "comment", "type", "variable", "constant", "brackets1", "brackets2", "brackets3", "operator", "default"];
 export {};

package/dist/libs/index.js

@@ -28,4 +28,19 @@ const _themeRegistry = {
 export const themes = Object.keys(_themeRegistry);
 // themeMap 保留給外部使用
 export const themeMap = _themeRegistry;
-export const parsableLanguages = ["javascript"];
+export const CODE_TOKEN_TYPES = [
+    "keyword1", // 關鍵字 1
+    "keyword2", // 關鍵字 2
+    "function", // 函式名稱
+    "string", // 字串常值
+    "number", // 數字常值
+    "comment", // 註解內容
+    "type", // 類型定義
+    "variable", // 變數名稱、函式名稱、類別名稱等識別符號
+    "constant", // 常數值，例如 enum 值、靜態屬性等
+    "brackets1", // 括號第一層
+    "brackets2", // 括號第二層
+    "brackets3", // 括號第三層
+    "operator", // 運算符號
+    "default", // 其他符號，例如逗號、分號、點號等
+];

package/dist/libs/parser/configs/javascript.d.ts

@@ -0,0 +1,2 @@
+import { ParsableLanguageConfig } from "../../../types";
+export declare const config: ParsableLanguageConfig;

package/dist/libs/parser/configs/javascript.js

@@ -0,0 +1,82 @@
+export const config = {
+    patterns: [
+        { type: "comment", regex: /^(\/\/.*|\/\*[\s\S]*?\*\/)/ },
+        {
+            type: "string",
+            regex: /^("([^"\\]|\\.)*"?|'([^'\\]|\\.)*'?|`([^`\\]|\\.)*`?)/,
+        },
+        { type: "number", regex: /^\d+(\.\d+)?/ },
+        {
+            type: "operator",
+            regex: /^(===|==|!==|!=|<=|>=|=>|\.\.\.|&&|\|\||\+\+|--|\+=|-=|\*=|\/=|\+=|&=|\|=|\^=|<<=|>>=|>>>=|[+\-*/%=&|^~<>!?:,;.])/,
+        },
+        { type: "brackets1", regex: /^[\(\)\[\]\{\}]/ },
+        { type: "variable", regex: /^[a-zA-Z_$][a-zA-Z0-9_$]*/ },
+        { type: "default", regex: /^[ \t\r]+/ },
+    ],
+    keywords1: new Set([
+        "const",
+        "var",
+        "let",
+        "function",
+        "class",
+        "import",
+        "export",
+        "return",
+        "if",
+        "else",
+        "for",
+        "while",
+        "do",
+        "switch",
+        "case",
+        "break",
+        "continue",
+        "try",
+        "catch",
+        "finally",
+        "throw",
+        "new",
+        "this",
+        "super",
+        "extends",
+        "implements",
+        "interface",
+        "type",
+        "enum",
+        "async",
+        "await",
+        "from",
+        "as",
+        "declare",
+        "namespace",
+        "module",
+        "public",
+        "private",
+        "protected",
+        "static",
+        "readonly",
+        "abstract",
+    ]),
+    keywords2: new Set([
+        "true",
+        "false",
+        "null",
+        "undefined",
+        "NaN",
+        "Infinity",
+        "void",
+        "typeof",
+        "instanceof",
+        "in",
+        "of",
+        "delete",
+        "this",
+        "console",
+        "window",
+        "document",
+        "global",
+        "process",
+    ]),
+    detectFunctions: true,
+};

package/dist/libs/parser/index.d.ts

@@ -0,0 +1,4 @@
+export declare const parsableLanguages: readonly ["javascript"];
+export declare const parserConfigs: {
+    javascript: import("../..").ParsableLanguageConfig;
+};

package/dist/libs/parser/index.js

@@ -0,0 +1,5 @@
+import { config as javascript } from "./configs/javascript";
+export const parsableLanguages = ["javascript"];
+export const parserConfigs = {
+    javascript,
+};

package/dist/types/index.d.ts

@@ -1,5 +1,7 @@
-import { parsableLanguages, themes } from "../libs";
+import { themes } from "../libs";
 import { AsComponentProps, OverrideProps } from "./common";
+import { CODE_TOKEN_TYPES } from "../libs/index";
+import { parsableLanguages } from "../libs/parser";
 /**
  * 用於表示語法高亮中每個 token 的語意分類，對應於 `<CodeToken />` 中的 `type`。
  *
@@ -22,7 +24,7 @@ import { AsComponentProps, OverrideProps } from "./common";
  * const token: CodeTokenType = "keyword1";
  * const token2: CodeTokenType = "string";
  */
-export type CodeTokenType = `keyword${1 | 2}` | "function" | "string" | "number" | "comment" | "type" | "variable" | "constant" | `brackets${1 | 2 | 3}` | "operator" | "default";
+export type CodeTokenType = (typeof CODE_TOKEN_TYPES)[number];
 /**
  * 表示可用的語法高亮主題名稱。
  * 對應 `themes` 陣列中定義的名稱，例如 `"vscode-dark"`。
@@ -124,3 +126,39 @@ export type CodeBlockProps<T extends React.ElementType = "span"> = OverrideProps
     autoWrap?: boolean;
 }>;
 export type ParsableLanguage = (typeof parsableLanguages)[number];
+/**
+ * 程式碼解析函式類型，接受原始程式碼字串，輸出 `CodeTokenProps` 的二維陣列。
+ *
+ * @example
+ * ```tsx
+ * const tokens = parseTokens.javascript("const x = 1;");
+ * ```
+ */
+export type ParseTokensFunction = (code: string) => CodeTokenProps[][];
+/**
+ * 為了方便擴充其他語言，我們將解析邏輯抽離為通用的 `createGenericParser` 工廠函式。
+ * 只要傳入該語言的一組 regex pattern 與關鍵字，即可產生對應的解析器。
+ */
+export type ParsableLanguageConfig = {
+    /**
+     * 該語言的 token 匹配規則，按優先順序排列。
+     * 注意：變數 (variable) 通常放在最後，作為 fallback。
+     */
+    patterns: {
+        type: CodeTokenType;
+        regex: RegExp;
+    }[];
+    /**
+     * 第一類關鍵字集合 (例如 control flow: if, return, ...)
+     */
+    keywords1?: Set<string>;
+    /**
+     * 第二類關鍵字集合 (例如 basic types, values: true, null, ...)
+     */
+    keywords2?: Set<string>;
+    /**
+     * 是否啟用函式偵測 (當變數後方緊接 "(" 時視為 function)
+     * @default true
+     */
+    detectFunctions?: boolean;
+};

package/dist/utils/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { CodeTokenBuilder, CodeTokenProps, CodeTokenType } from "../types";
+import { CodeTokenBuilder, CodeTokenProps, CodeTokenType, ParsableLanguage, ParseTokensFunction } from "../types";
 /**
  * 檢查給定的值是否為有效的 `CodeTokenType`。
  * @param value 要檢查的值
@@ -65,3 +65,16 @@ export declare const isTokenEqual: <T extends React.ElementType>(a: CodeTokenPro
  * @returns 分組後的 token 映射，key 為 `CodeTokenType`
  */
 export declare const groupTokensByType: <T extends React.ElementType>(lines: CodeTokenProps<T>[][]) => Record<CodeTokenType, CodeTokenProps<T>[]>;
+/**
+ * `parseTokens` 是語法解析器的代理集合，用來解析特定語言的程式碼字串。
+ *
+ * 每個 key 對應一種可解析語言（如 `"javascript"`、`"python"` 等），
+ * 傳入原始程式碼字串後，回傳解析後的 token 二維陣列（每行一組 token）。
+ *
+ * @example
+ * ```ts
+ * const tokens = parseTokens.javascript("const x = 1;");
+ * ```
+ * @returns 以 `ParsableLanguage` 為 key 的解析函式集合。
+ */
+export declare const parseTokens: Record<ParsableLanguage, ParseTokensFunction>;

package/dist/utils/index.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { parserConfigs } from "../libs/parser";
 const CODE_TOKEN_TYPES = new Set([
     "keyword1",
     "keyword2",
@@ -154,26 +155,122 @@ export const groupTokensByType = (lines) => {
     return grouped;
 };
 /**
- * 待實作
+ * 通用解析器工廠
+ */
+const createGenericParser = (config) => {
+    const { patterns, keywords1 = new Set(), keywords2 = new Set(), detectFunctions = true, } = config;
+    return (code) => {
+        const lines = [];
+        let currentLine = [];
+        let cursor = 0;
+        let bracketDepth = 0;
+        const getBracketType = (depth) => {
+            const types = ["brackets1", "brackets2", "brackets3"];
+            return types[depth % 3];
+        };
+        while (cursor < code.length) {
+            // 處理換行
+            if (code[cursor] === "\n") {
+                lines.push(currentLine);
+                currentLine = [];
+                cursor++;
+                continue;
+            }
+            let bestMatch = null;
+            const remainingCode = code.slice(cursor);
+            for (const { type, regex } of patterns) {
+                const match = remainingCode.match(regex);
+                if (match) {
+                    bestMatch = { type, value: match[0] };
+                    break;
+                }
+            }
+            if (bestMatch) {
+                let finalType = bestMatch.type;
+                // 針對 variable 類型進行關鍵字或函式檢查
+                if (finalType === "variable") {
+                    if (keywords1.has(bestMatch.value)) {
+                        finalType = "keyword1";
+                    }
+                    else if (keywords2.has(bestMatch.value)) {
+                        finalType = "keyword2";
+                    }
+                    else if (detectFunctions) {
+                        // 檢查後方是否緊接括號，若是則視為函式
+                        let nextIdx = bestMatch.value.length;
+                        while (nextIdx < remainingCode.length &&
+                            /[ \t\r\n]/.test(remainingCode[nextIdx])) {
+                            nextIdx++;
+                        }
+                        if (nextIdx < remainingCode.length &&
+                            remainingCode[nextIdx] === "(") {
+                            finalType = "function";
+                        }
+                    }
+                }
+                // 處理括號顏色輪替
+                if (finalType === "brackets1") {
+                    const char = bestMatch.value;
+                    // 開括號增加深度，閉括號減少深度（簡單實作）
+                    if (["(", "[", "{"].includes(char)) {
+                        finalType = getBracketType(bracketDepth);
+                        bracketDepth++;
+                    }
+                    else {
+                        bracketDepth = Math.max(0, bracketDepth - 1);
+                        finalType = getBracketType(bracketDepth);
+                    }
+                }
+                // 處理多行 Token (如多行註解) 可能跨越換行的情況
+                if (bestMatch.value.includes("\n")) {
+                    const subLines = bestMatch.value.split(/\r?\n/);
+                    subLines.forEach((lineContent, index) => {
+                        if (lineContent.length > 0) {
+                            currentLine.push({ type: finalType, children: lineContent });
+                        }
+                        // 如果不是最後一段，表示遇到換行
+                        if (index < subLines.length - 1) {
+                            lines.push(currentLine);
+                            currentLine = [];
+                        }
+                    });
+                }
+                else {
+                    currentLine.push({ type: finalType, children: bestMatch.value });
+                }
+                cursor += bestMatch.value.length;
+            }
+            else {
+                // 匹配失敗，作為預設文字推進一個字元
+                currentLine.push({ type: "default", children: code[cursor] });
+                cursor++;
+            }
+        }
+        // 處理最後一行
+        if (currentLine.length > 0 || lines.length === 0) {
+            lines.push(currentLine);
+        }
+        return lines;
+    };
+};
+/**
  * `parseTokens` 是語法解析器的代理集合，用來解析特定語言的程式碼字串。
  *
  * 每個 key 對應一種可解析語言（如 `"javascript"`、`"python"` 等），
  * 傳入原始程式碼字串後，回傳解析後的 token 二維陣列（每行一組 token）。
  *
- *
  * @example
  * ```ts
  * const tokens = parseTokens.javascript("const x = 1;");
  * ```
- *
- * @returns 語法高亮用的 `CodeTokenProps` 二維陣列
+ * @returns 以 `ParsableLanguage` 為 key 的解析函式集合。
  */
-const parseTokens = new Proxy({}, {
+export const parseTokens = new Proxy({}, {
     get: (_, prop) => {
-        const parser = (content) => {
-            const result = [];
-            return result;
-        };
+        if (!(prop in parserConfigs)) {
+            throw new Error(`Unsupported language: ${String(prop)}`);
+        }
+        const parser = createGenericParser(parserConfigs[prop]);
         return parser;
     },
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "c063",
-  "version": "1.6.5",
+  "version": "1.7.0",
   "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,6 +1,20 @@
+import { CSSProperties } from "react";
 import { CodeBlockProps } from "../types/index";
 import { CodeLine } from "./CodeLine";
 
+const preStyle: CSSProperties = { margin: 0, padding: 0, overflowX: "auto" };
+const tableStyle: CSSProperties = { borderCollapse: "collapse", width: "100%" };
+const rowStyle: CSSProperties = { verticalAlign: "top" };
+const codeCellStyle: CSSProperties = { width: "100%" };
+const lineNumberBaseStyle: CSSProperties = {
+  paddingInline: "0.5rem",
+  textAlign: "right",
+  whiteSpace: "pre",
+  fontVariantNumeric: "tabular-nums",
+  color: "#888",
+  userSelect: "none",
+};
+
 /**
  * 顯示完整程式碼區塊，支援多行語法 token 與行號顯示。
  *
@@ -21,27 +35,22 @@ export const CodeBlock = <T extends React.ElementType = "span">({
   ...rest
 }: CodeBlockProps<T>) => {
   return (
-    <pre {...rest} style={{ margin: 0, padding: 0, overflowX: "auto" }}>
-      <table style={{ borderCollapse: "collapse", width: "100%" }}>
+    <pre {...rest} style={preStyle}>
+      <table style={tableStyle}>
         <tbody>
           {tokenLines.map((line, index) => (
-            <tr key={index} style={{ verticalAlign: "top" }}>
+            <tr key={index} style={rowStyle}>
               {showLineNumbers && (
                 <td
                   style={{
-                    paddingInline: "0.5rem",
-                    textAlign: "right",
-                    whiteSpace: "pre",
-                    fontVariantNumeric: "tabular-nums",
-                    color: "#888",
-                    userSelect: "none",
+                    ...lineNumberBaseStyle,
                     ...lineNumberStyle,
                   }}
                 >
                   {index + 1}
                 </td>
               )}
-              <td style={{ width: "100%" }}>
+              <td style={codeCellStyle}>
                 <CodeLine theme={theme} tokens={line} autoWrap={autoWrap} />
               </td>
             </tr>

package/src/components/CodeLine.tsx

@@ -1,3 +1,4 @@
+import { memo } from "react";
 import { CodeLineProps } from "../types/index";
 import { CodeToken } from "./CodeToken";
 /**
@@ -11,7 +12,7 @@ import { CodeToken } from "./CodeToken";
  * @param rest 其他 HTMLAttributes
  * @returns JSX 元素，呈現語法 token 的單行程式碼
  */
-export const CodeLine = <T extends React.ElementType = "span">({
+const CodeLineInner = <T extends React.ElementType = "span">({
   style,
   tokens,
   theme,
@@ -33,4 +34,6 @@ export const CodeLine = <T extends React.ElementType = "span">({
   );
 };
 
+export const CodeLine = memo(CodeLineInner);
+
 CodeLine.displayName = "CodeLine";

package/src/components/CodeToken.tsx

@@ -1,3 +1,4 @@
+import { memo } from "react";
 import { themeMap } from "../libs/index";
 import { CodeTokenProps } from "../types/index";
 
@@ -13,7 +14,7 @@ import { CodeTokenProps } from "../types/index";
  * @param rest 其他 HTML 屬性
  * @returns JSX 元素，顯示帶有語法顏色的 token
  */
-export const CodeToken = <T extends React.ElementType = "span">({
+const CodeTokenInner = <T extends React.ElementType = "span">({
   as,
   style,
   children,
@@ -38,4 +39,6 @@ export const CodeToken = <T extends React.ElementType = "span">({
   );
 };
 
+export const CodeToken = memo(CodeTokenInner);
+
 CodeToken.displayName = "CodeToken";

package/src/libs/index.tsx

@@ -38,4 +38,19 @@ export const themeMap: Record<
   Record<CodeTokenType, React.CSSProperties["color"]>
 > = _themeRegistry;
 
-export const parsableLanguages = ["javascript"] as const;
+export const CODE_TOKEN_TYPES = [
+  "keyword1", // 關鍵字 1
+  "keyword2", // 關鍵字 2
+  "function", // 函式名稱
+  "string", // 字串常值
+  "number", // 數字常值
+  "comment", // 註解內容
+  "type",  // 類型定義
+  "variable",  // 變數名稱、函式名稱、類別名稱等識別符號
+  "constant", // 常數值，例如 enum 值、靜態屬性等
+  "brackets1", // 括號第一層
+  "brackets2", // 括號第二層
+  "brackets3", // 括號第三層
+  "operator", // 運算符號
+  "default", // 其他符號，例如逗號、分號、點號等
+] as const;

package/src/libs/parser/configs/javascript.tsx

@@ -0,0 +1,84 @@
+import { ParsableLanguageConfig } from "../../../types";
+export const config: ParsableLanguageConfig = {
+  patterns: [
+    { type: "comment", regex: /^(\/\/.*|\/\*[\s\S]*?\*\/)/ },
+    {
+      type: "string",
+      regex: /^("([^"\\]|\\.)*"?|'([^'\\]|\\.)*'?|`([^`\\]|\\.)*`?)/,
+    },
+    { type: "number", regex: /^\d+(\.\d+)?/ },
+    {
+      type: "operator",
+      regex:
+        /^(===|==|!==|!=|<=|>=|=>|\.\.\.|&&|\|\||\+\+|--|\+=|-=|\*=|\/=|\+=|&=|\|=|\^=|<<=|>>=|>>>=|[+\-*/%=&|^~<>!?:,;.])/,
+    },
+    { type: "brackets1", regex: /^[\(\)\[\]\{\}]/ },
+    { type: "variable", regex: /^[a-zA-Z_$][a-zA-Z0-9_$]*/ },
+    { type: "default", regex: /^[ \t\r]+/ },
+  ],
+  keywords1: new Set([
+    "const",
+    "var",
+    "let",
+    "function",
+    "class",
+    "import",
+    "export",
+    "return",
+    "if",
+    "else",
+    "for",
+    "while",
+    "do",
+    "switch",
+    "case",
+    "break",
+    "continue",
+    "try",
+    "catch",
+    "finally",
+    "throw",
+    "new",
+    "this",
+    "super",
+    "extends",
+    "implements",
+    "interface",
+    "type",
+    "enum",
+    "async",
+    "await",
+    "from",
+    "as",
+    "declare",
+    "namespace",
+    "module",
+    "public",
+    "private",
+    "protected",
+    "static",
+    "readonly",
+    "abstract",
+  ]),
+  keywords2: new Set([
+    "true",
+    "false",
+    "null",
+    "undefined",
+    "NaN",
+    "Infinity",
+    "void",
+    "typeof",
+    "instanceof",
+    "in",
+    "of",
+    "delete",
+    "this",
+    "console",
+    "window",
+    "document",
+    "global",
+    "process",
+  ]),
+  detectFunctions: true,
+};

package/src/libs/parser/index.tsx

@@ -0,0 +1,8 @@
+import { config as javascript } from "./configs/javascript";
+
+export const parsableLanguages = ["javascript"] as const;
+export const parserConfigs = {
+  javascript,
+};
+
+

package/src/types/index.tsx

@@ -1,5 +1,7 @@
-import { parsableLanguages, themes } from "../libs";
+import { themes } from "../libs";
 import { AsComponentProps, OverrideProps } from "./common";
+import { CODE_TOKEN_TYPES } from "../libs/index";
+import { parsableLanguages } from "../libs/parser";
 /**
  * 用於表示語法高亮中每個 token 的語意分類，對應於 `<CodeToken />` 中的 `type`。
  *
@@ -22,18 +24,7 @@ import { AsComponentProps, OverrideProps } from "./common";
  * const token: CodeTokenType = "keyword1";
  * const token2: CodeTokenType = "string";
  */
-export type CodeTokenType =
-  | `keyword${1 | 2}` // 關鍵字，分兩種樣式
-  | "function" // 函式名
-  | "string" // 字串常值：'abc'、"hello"
-  | "number" // 數值常量：123、3.14
-  | "comment" // 註解內容：// 或 /* */
-  | "type" // 類型定義：type、interface、enum
-  | "variable" // 變數名、函式名、類別名等識別符號
-  | "constant" // 常數值：例如 enum 值、靜態屬性
-  | `brackets${1 | 2 | 3}` // 括號，多層巢狀不同樣式：{[()]}
-  | "operator" // 運算符號：=、+、*、===、<、>= 等
-  | "default"; // 其他符號：, ; . ? ! 等
+export type CodeTokenType = (typeof CODE_TOKEN_TYPES)[number];
 
 /**
  * 表示可用的語法高亮主題名稱。
@@ -67,7 +58,7 @@ export type CodeTokenProps<T extends React.ElementType = "span"> =
 
 export type CodeTokenBuilder = <T extends React.ElementType = "span">(
   children: CodeTokenProps<T>["children"],
-  props?: CodeTokenProps<T>
+  props?: CodeTokenProps<T>,
 ) => CodeTokenProps<T>;
 
 /**
@@ -158,3 +149,39 @@ export type CodeBlockProps<T extends React.ElementType = "span"> =
   >;
 
 export type ParsableLanguage = (typeof parsableLanguages)[number];
+
+/**
+ * 程式碼解析函式類型，接受原始程式碼字串，輸出 `CodeTokenProps` 的二維陣列。
+ *
+ * @example
+ * ```tsx
+ * const tokens = parseTokens.javascript("const x = 1;");
+ * ```
+ */
+export type ParseTokensFunction = (code: string) => CodeTokenProps[][];
+
+/**
+ * 為了方便擴充其他語言，我們將解析邏輯抽離為通用的 `createGenericParser` 工廠函式。
+ * 只要傳入該語言的一組 regex pattern 與關鍵字，即可產生對應的解析器。
+ */
+
+export type ParsableLanguageConfig = {
+  /**
+   * 該語言的 token 匹配規則，按優先順序排列。
+   * 注意：變數 (variable) 通常放在最後，作為 fallback。
+   */
+  patterns: { type: CodeTokenType; regex: RegExp }[];
+  /**
+   * 第一類關鍵字集合 (例如 control flow: if, return, ...)
+   */
+  keywords1?: Set<string>;
+  /**
+   * 第二類關鍵字集合 (例如 basic types, values: true, null, ...)
+   */
+  keywords2?: Set<string>;
+  /**
+   * 是否啟用函式偵測 (當變數後方緊接 "(" 時視為 function)
+   * @default true
+   */
+  detectFunctions?: boolean;
+};

package/src/utils/index.tsx

@@ -4,7 +4,10 @@ import {
   CodeTokenProps,
   CodeTokenType,
   ParsableLanguage,
+  ParsableLanguageConfig,
+  ParseTokensFunction,
 } from "../types";
+import { parserConfigs } from "../libs/parser";
 
 const CODE_TOKEN_TYPES = new Set<CodeTokenType>([
   "keyword1",
@@ -62,7 +65,7 @@ const c063 = new Proxy(
        */
       const builder = <T extends React.ElementType = "span">(
         children: React.ReactNode,
-        props?: CodeTokenProps<T>
+        props?: CodeTokenProps<T>,
       ) => {
         if (!isCodeTokenType(prop)) {
           throw new Error(`Invalid CodeTokenType: ${String(prop)}`);
@@ -75,7 +78,7 @@ const c063 = new Proxy(
       };
       return builder;
     },
-  }
+  },
 ) as Record<CodeTokenType, CodeTokenBuilder>;
 export default c063;
 
@@ -125,7 +128,7 @@ const _extractReactNode = (children: React.ReactNode): string => {
  * ```
  */
 export const extractTokenContent = <T extends React.ElementType>(
-  token: CodeTokenProps<T>
+  token: CodeTokenProps<T>,
 ): string => {
   return _extractReactNode(token.children);
 };
@@ -139,7 +142,7 @@ export const extractTokenContent = <T extends React.ElementType>(
  */
 export const isTokenEqual = <T extends React.ElementType>(
   a: CodeTokenProps<T>,
-  b: CodeTokenProps<T>
+  b: CodeTokenProps<T>,
 ): boolean => {
   if (!isCodeTokenType(a.type) || !isCodeTokenType(b.type)) {
     return false;
@@ -154,7 +157,7 @@ export const isTokenEqual = <T extends React.ElementType>(
  * @returns 分組後的 token 映射，key 為 `CodeTokenType`
  */
 export const groupTokensByType = <T extends React.ElementType>(
-  lines: CodeTokenProps<T>[][]
+  lines: CodeTokenProps<T>[][],
 ): Record<CodeTokenType, CodeTokenProps<T>[]> => {
   const grouped: Record<CodeTokenType, CodeTokenProps<T>[]> = {
     keyword1: [],
@@ -181,30 +184,144 @@ export const groupTokensByType = <T extends React.ElementType>(
 };
 
 /**
- * 待實作
+ * 通用解析器工廠
+ */
+const createGenericParser = (
+  config: ParsableLanguageConfig,
+): ParseTokensFunction => {
+  const {
+    patterns,
+    keywords1 = new Set(),
+    keywords2 = new Set(),
+    detectFunctions = true,
+  } = config;
+
+  return (code: string) => {
+    const lines: CodeTokenProps<"span">[][] = [];
+    let currentLine: CodeTokenProps<"span">[] = [];
+    let cursor = 0;
+    let bracketDepth = 0;
+
+    const getBracketType = (depth: number): CodeTokenType => {
+      const types: CodeTokenType[] = ["brackets1", "brackets2", "brackets3"];
+      return types[depth % 3];
+    };
+
+    while (cursor < code.length) {
+      // 處理換行
+      if (code[cursor] === "\n") {
+        lines.push(currentLine);
+        currentLine = [];
+        cursor++;
+        continue;
+      }
+
+      let bestMatch: { type: CodeTokenType; value: string } | null = null;
+      const remainingCode = code.slice(cursor);
+
+      for (const { type, regex } of patterns) {
+        const match = remainingCode.match(regex);
+        if (match) {
+          bestMatch = { type, value: match[0] };
+          break;
+        }
+      }
+
+      if (bestMatch) {
+        let finalType: CodeTokenType = bestMatch.type;
+
+        // 針對 variable 類型進行關鍵字或函式檢查
+        if (finalType === "variable") {
+          if (keywords1.has(bestMatch.value)) {
+            finalType = "keyword1";
+          } else if (keywords2.has(bestMatch.value)) {
+            finalType = "keyword2";
+          } else if (detectFunctions) {
+            // 檢查後方是否緊接括號，若是則視為函式
+            let nextIdx = bestMatch.value.length;
+            while (
+              nextIdx < remainingCode.length &&
+              /[ \t\r\n]/.test(remainingCode[nextIdx])
+            ) {
+              nextIdx++;
+            }
+            if (
+              nextIdx < remainingCode.length &&
+              remainingCode[nextIdx] === "("
+            ) {
+              finalType = "function";
+            }
+          }
+        }
+
+        // 處理括號顏色輪替
+        if (finalType === "brackets1") {
+          const char = bestMatch.value;
+          // 開括號增加深度，閉括號減少深度（簡單實作）
+          if (["(", "[", "{"].includes(char)) {
+            finalType = getBracketType(bracketDepth);
+            bracketDepth++;
+          } else {
+            bracketDepth = Math.max(0, bracketDepth - 1);
+            finalType = getBracketType(bracketDepth);
+          }
+        }
+
+        // 處理多行 Token (如多行註解) 可能跨越換行的情況
+        if (bestMatch.value.includes("\n")) {
+          const subLines = bestMatch.value.split(/\r?\n/);
+          subLines.forEach((lineContent, index) => {
+            if (lineContent.length > 0) {
+              currentLine.push({ type: finalType, children: lineContent });
+            }
+            // 如果不是最後一段，表示遇到換行
+            if (index < subLines.length - 1) {
+              lines.push(currentLine);
+              currentLine = [];
+            }
+          });
+        } else {
+          currentLine.push({ type: finalType, children: bestMatch.value });
+        }
+
+        cursor += bestMatch.value.length;
+      } else {
+        // 匹配失敗，作為預設文字推進一個字元
+        currentLine.push({ type: "default", children: code[cursor] });
+        cursor++;
+      }
+    }
+
+    // 處理最後一行
+    if (currentLine.length > 0 || lines.length === 0) {
+      lines.push(currentLine);
+    }
+
+    return lines;
+  };
+};
+/**
  * `parseTokens` 是語法解析器的代理集合，用來解析特定語言的程式碼字串。
  *
  * 每個 key 對應一種可解析語言（如 `"javascript"`、`"python"` 等），
  * 傳入原始程式碼字串後，回傳解析後的 token 二維陣列（每行一組 token）。
  *
- *
  * @example
  * ```ts
  * const tokens = parseTokens.javascript("const x = 1;");
  * ```
- *
- * @returns 語法高亮用的 `CodeTokenProps` 二維陣列
+ * @returns 以 `ParsableLanguage` 為 key 的解析函式集合。
  */
-const parseTokens = new Proxy(
+export const parseTokens = new Proxy(
   {},
   {
     get: (_, prop: ParsableLanguage) => {
-      const parser = (content: string): CodeTokenProps<"span">[][] => {
-        const result: CodeTokenProps<"span">[][] = [];
+      if (!(prop in parserConfigs)) {
+        throw new Error(`Unsupported language: ${String(prop)}`);
+      }
 
-        return result;
-      };
+      const parser = createGenericParser(parserConfigs[prop]);
       return parser;
     },
-  }
-) as Record<ParsableLanguage, (content: string) => CodeTokenProps<"span">[][]>;
+  },
+) as Record<ParsableLanguage, ParseTokensFunction>;