c063 1.3.2 → 1.4.0

package/dist/components/CodeBlock.d.ts

@@ -1,4 +1,4 @@
-import { CodeBlockProps } from "../types/props";
+import { CodeBlockProps } from "../types/index";
 /**
  * 顯示完整程式碼區塊，支援多行語法 token 與行號顯示。
  *

package/dist/components/CodeLine.d.ts

@@ -1,4 +1,4 @@
-import { CodeLineProps } from "../types/props";
+import { CodeLineProps } from "../types/index";
 /**
  * 渲染單一程式碼行，包含多個語法 token。
  *

package/dist/components/CodeToken.d.ts

@@ -1,4 +1,4 @@
-import { CodeTokenProps } from "../types/props";
+import { CodeTokenProps } from "../types/index";
 /**
  * 渲染單一語法 token（例如關鍵字、字串、註解等），可指定標籤與樣式。
  *

package/dist/components/CodeToken.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { themeMap } from "../libs";
+import { useLayoutEffect, useState } from "react";
+import { loadTheme } from "../utils/theme";
 /**
  * 渲染單一語法 token（例如關鍵字、字串、註解等），可指定標籤與樣式。
  *
@@ -13,8 +14,16 @@ import { themeMap } from "../libs";
  */
 export const CodeToken = ({ as, style, children, type, theme, ...rest }) => {
     const Tag = as || "span";
-    return (_jsx(Tag, { ...rest, style: {
-            color: themeMap[theme || "default-dark-modern"][type || "default"],
+    const [currTheme, setCurrTheme] = useState(null);
+    useLayoutEffect(() => {
+        if (theme) {
+            loadTheme(theme).then((res) => setCurrTheme(res));
+        }
+    }, [theme]);
+    return (
+    // eslint-disable-next-line react/react-in-jsx-scope
+    _jsx(Tag, { ...rest, style: {
+            color: (currTheme === null || currTheme === void 0 ? void 0 : currTheme[type || "default"]) || undefined,
             ...style,
         }, children: children }));
 };

package/dist/libs/index.d.ts

@@ -1,18 +1,2 @@
-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>;
-};
-export declare const themes: (keyof typeof _themeRegistry)[];
-export declare const themeMap: Record<CodeTheme, Record<CodeTokenType, React.CSSProperties["color"]>>;
-export {};
+export declare const themes: readonly ["default-dark-modern", "default-dark", "default-dark-plus", "visual-studio-light", "default-light-plus", "default-light-modern", "github-light", "github-light-default", "github-light-colorblind", "github-dark", "github-dark-default", "github-dark-colorblind"];
+export declare const parsableLanguages: readonly ["javascript"];

package/dist/libs/index.js

@@ -1,30 +1,15 @@
-import { map as darkModern } from "./default-dark-modern";
-import { map as dark } from "./default-dark";
-import { map as darkPlus } from "./default-dark-plus";
-import { map as vsLight } from "./visual-studio-light";
-import { map as lightPlus } from "./default-light-plus";
-import { map as lightModern } from "./default-light-modern";
-import { map as ghLight } from "./github-light";
-import { map as ghLightDefault } from "./github-light-default";
-import { map as ghLightBilnd } from "./github-light-colorblind";
-import { map as ghDark } from "./github-dark";
-import { map as ghDarkDefault } from "./github-dark-default";
-import { map as ghDarkBilnd } from "./github-dark-colorblind";
-const _themeRegistry = {
-    "default-dark-modern": darkModern,
-    "default-dark": dark,
-    "default-dark-plus": darkPlus,
-    "visual-studio-light": vsLight,
-    "default-light-plus": lightPlus,
-    "default-light-modern": lightModern,
-    "github-light": ghLight,
-    "github-light-default": ghLightDefault,
-    "github-light-colorblind": ghLightBilnd,
-    "github-dark": ghDark,
-    "github-dark-default": ghDarkDefault,
-    "github-dark-colorblind": ghDarkBilnd,
-};
-// 自動推導主題名稱
-export const themes = Object.keys(_themeRegistry);
-// themeMap 保留給外部使用
-export const themeMap = _themeRegistry;
+export const themes = [
+    "default-dark-modern",
+    "default-dark",
+    "default-dark-plus",
+    "visual-studio-light",
+    "default-light-plus",
+    "default-light-modern",
+    "github-light",
+    "github-light-default",
+    "github-light-colorblind",
+    "github-dark",
+    "github-dark-default",
+    "github-dark-colorblind",
+];
+export const parsableLanguages = ["javascript"];

package/dist/libs/themes/default-dark-modern.d.ts

@@ -0,0 +1,2 @@
+import { CodeTokenType } from "../../types";
+export declare const map: Record<CodeTokenType, React.CSSProperties["color"]>;

package/dist/libs/themes/default-dark-modern.js

@@ -0,0 +1,16 @@
+export const map = {
+    function: "#dcdcaa",
+    keyword1: "#569cd6",
+    keyword2: "#c586c0",
+    string: "#ce9178",
+    number: "#b5cea8",
+    comment: "#6a9955",
+    variable: "#9cdcfe",
+    constant: "#4fc1ff",
+    type: "#4ec9b0",
+    brackets1: "#ffd700",
+    brackets2: "#da70d6",
+    brackets3: "#179fff",
+    operator: "#d4d4d4",
+    default: "#d4d4d4",
+};

package/dist/libs/themes/default-dark-plus.d.ts

@@ -0,0 +1,2 @@
+import { CodeTokenType } from "../../types";
+export declare const map: Record<CodeTokenType, React.CSSProperties["color"]>;

package/dist/libs/themes/default-dark-plus.js

@@ -0,0 +1,16 @@
+export const map = {
+    function: "#dcdcaa",
+    keyword1: "#569cd6",
+    keyword2: "#c586c0",
+    string: "#ce9178",
+    number: "#b5cea8",
+    comment: "#6a9955",
+    variable: "#9cdcfe",
+    constant: "#4fc1ff",
+    type: "#4ec9b0",
+    brackets1: "#ffd700",
+    brackets2: "#da70d6",
+    brackets3: "#179fff",
+    operator: "#d4d4d4",
+    default: "#d4d4d4",
+};

package/dist/libs/themes/default-dark.d.ts

@@ -0,0 +1,2 @@
+import { CodeTokenType } from "../../types";
+export declare const map: Record<CodeTokenType, React.CSSProperties["color"]>;

package/dist/libs/themes/default-dark.js

@@ -0,0 +1,16 @@
+export const map = {
+    function: "#d4d4d4",
+    keyword1: "#569cd6",
+    keyword2: "#569cd6",
+    string: "#ce9178",
+    number: "#b5cea8",
+    comment: "#6a9955",
+    variable: "#d4d4d4",
+    constant: "#d4d4d4",
+    type: "#d4d4d4",
+    brackets1: "#ffd700",
+    brackets2: "#da70d6",
+    brackets3: "#179fff",
+    operator: "#d4d4d4",
+    default: "#d4d4d4",
+};

package/dist/libs/themes/default-light-modern.d.ts

@@ -0,0 +1,2 @@
+import { CodeTokenType } from "../../types";
+export declare const map: Record<CodeTokenType, React.CSSProperties["color"]>;

package/dist/libs/themes/default-light-modern.js

@@ -0,0 +1,16 @@
+export const map = {
+    function: "rgb(121, 94, 38)",
+    keyword1: "rgb(0, 0, 255)",
+    keyword2: "rgb(175, 0, 219)",
+    string: "rgb(163, 21, 21)",
+    number: "rgb(9, 134, 88)",
+    comment: "rgb(0, 128, 0)",
+    variable: "rgb(0, 16, 128)",
+    constant: "rgb(0, 112, 193)",
+    type: "rgb(0, 0, 255)",
+    brackets1: "rgb(4, 49, 250)",
+    brackets2: "rgb(49, 147, 49)",
+    brackets3: "rgb(123, 56, 20)",
+    operator: "rgb(0, 0, 0)",
+    default: "rgb(0, 0, 0)",
+};

package/dist/libs/themes/default-light-plus.d.ts

@@ -0,0 +1,2 @@
+import { CodeTokenType } from "../../types";
+export declare const map: Record<CodeTokenType, React.CSSProperties["color"]>;

package/dist/libs/themes/default-light-plus.js

@@ -0,0 +1,16 @@
+export const map = {
+    function: "#795e26",
+    keyword1: "#0000ff",
+    keyword2: "#af00db",
+    string: "#a31515",
+    number: "#098658",
+    comment: "#008000",
+    variable: "#001080",
+    constant: "#0070c1",
+    type: "#267f99",
+    brackets1: "#0431fa",
+    brackets2: "#319331",
+    brackets3: "#7b3814",
+    operator: "#000000",
+    default: "#000000",
+};

package/dist/libs/themes/github-dark-colorblind.d.ts

@@ -0,0 +1,2 @@
+import { CodeTokenType } from "../../types";
+export declare const map: Record<CodeTokenType, React.CSSProperties["color"]>;

package/dist/libs/themes/github-dark-colorblind.js

@@ -0,0 +1,16 @@
+export const map = {
+    function: "rgb(210, 168, 255)",
+    keyword1: "rgb(236, 142, 44)",
+    keyword2: "rgb(236, 142, 44)",
+    string: "rgb(165, 214, 255)",
+    number: "rgb(121, 192, 255)",
+    comment: "#rgb(139, 148, 158)",
+    variable: "rgb(201, 209, 217)",
+    constant: "rgb(121, 192, 255)",
+    type: "rgb(236, 142, 44)",
+    brackets1: "rgb(121, 192, 255)",
+    brackets2: "rgb(121, 192, 255)",
+    brackets3: "rgb(227, 179, 65)",
+    operator: "rgb(236, 142, 44)",
+    default: "rgb(201, 209, 217)",
+};

package/dist/libs/themes/github-dark-default.d.ts

@@ -0,0 +1,2 @@
+import { CodeTokenType } from "../../types";
+export declare const map: Record<CodeTokenType, React.CSSProperties["color"]>;

package/dist/libs/themes/github-dark-default.js

@@ -0,0 +1,16 @@
+export const map = {
+    function: "#d2a8ff",
+    keyword1: "#ff7b72",
+    keyword2: "#ff7b72",
+    string: "#a5d6ff",
+    number: "#79c0ff",
+    comment: "#6a737d",
+    variable: "#e6edf3",
+    constant: "#79c0ff",
+    type: "#ff7b72",
+    brackets1: "#79c0ff",
+    brackets2: "#56d364",
+    brackets3: "#e3b341",
+    operator: "#ff7b72",
+    default: "#e6edf3",
+};

package/dist/libs/themes/github-dark.d.ts

@@ -0,0 +1,2 @@
+import { CodeTokenType } from "../../types";
+export declare const map: Record<CodeTokenType, React.CSSProperties["color"]>;

package/dist/libs/themes/github-dark.js

@@ -0,0 +1,16 @@
+export const map = {
+    function: "#b392f0",
+    keyword1: "#f97583",
+    keyword2: "#f97583",
+    string: "#9ecbff",
+    number: "#79b8ff",
+    comment: "##6a737d",
+    variable: "#e1e4e8",
+    constant: "#79b8ff",
+    type: "#f97583",
+    brackets1: "#79b8ff",
+    brackets2: "#ffab70",
+    brackets3: "#b392f0",
+    operator: "#f97583",
+    default: "#e1e4e8",
+};

package/dist/libs/themes/github-light-colorblind.d.ts

@@ -0,0 +1,2 @@
+import { CodeTokenType } from "../../types";
+export declare const map: Record<CodeTokenType, React.CSSProperties["color"]>;

package/dist/libs/themes/github-light-colorblind.js

@@ -0,0 +1,16 @@
+export const map = {
+    function: "#8250df",
+    keyword1: "#b35900",
+    keyword2: "#b35900",
+    string: "#0a3069",
+    number: "#0550ae",
+    comment: "#6e7781",
+    variable: "#24292f",
+    constant: "#0550ae",
+    type: "#b35900",
+    brackets1: "#0969da",
+    brackets2: "#0969da",
+    brackets3: "#9a6700",
+    operator: "#b35900",
+    default: "#24292f",
+};

package/dist/libs/themes/github-light-default.d.ts

@@ -0,0 +1,2 @@
+import { CodeTokenType } from "../../types";
+export declare const map: Record<CodeTokenType, React.CSSProperties["color"]>;

package/dist/libs/themes/github-light-default.js

@@ -0,0 +1,16 @@
+export const map = {
+    function: "#8250df",
+    keyword1: "#cf222e",
+    keyword2: "#cf222e",
+    string: "#0a3069",
+    number: "##0550ae",
+    comment: "#6e7781",
+    variable: "#1f2328",
+    constant: "#0550ae",
+    type: "#cf222e",
+    brackets1: "#0969da",
+    brackets2: "#1a7f37",
+    brackets3: "#9a6700",
+    operator: "#cf222e",
+    default: "#24292e",
+};

package/dist/libs/themes/github-light.d.ts

@@ -0,0 +1,2 @@
+import { CodeTokenType } from "../../types";
+export declare const map: Record<CodeTokenType, React.CSSProperties["color"]>;

package/dist/libs/themes/github-light.js

@@ -0,0 +1,16 @@
+export const map = {
+    function: "#6f42c1",
+    keyword1: "#d73a49",
+    keyword2: "#d73a49",
+    string: "#032f62",
+    number: "#005cc5",
+    comment: "#6a737d",
+    variable: "#24292e",
+    constant: "#0070c1",
+    type: "#6f42c1",
+    brackets1: "#005cc5",
+    brackets2: "#e36209",
+    brackets3: "#5a32a3",
+    operator: "#d73a49",
+    default: "#24292e",
+};

package/dist/libs/themes/visual-studio-light.d.ts

@@ -0,0 +1,2 @@
+import { CodeTokenType } from "../../types";
+export declare const map: Record<CodeTokenType, React.CSSProperties["color"]>;

package/dist/libs/themes/visual-studio-light.js

@@ -0,0 +1,16 @@
+export const map = {
+    function: "#000000",
+    keyword1: "#0000ff",
+    keyword2: "#0000ff",
+    string: "#a31515",
+    number: "#098658",
+    comment: "#008000",
+    variable: "#000000",
+    constant: "#000000",
+    type: "#000000",
+    brackets1: "#0431fa",
+    brackets2: "#319331",
+    brackets3: "#7b3814",
+    operator: "#000000",
+    default: "#800000",
+};

package/dist/types/index.d.ts

@@ -1,2 +1,117 @@
-export * from "./common";
-export * from "./props";
+import { parsableLanguages, themes } from "../libs";
+import { AsComponentProps, OverrideProps } from "./common";
+/**
+ * 用於表示語法高亮中每個 token 的語意分類，對應於 `<CodeToken />` 中的 `type`。
+ *
+ * 每個類型會對應特定的顏色與用途，例如關鍵字、數字、字串、註解等，
+ * 可配合 `codeColoreMap` 指定顯示樣式。s
+ *
+ * 類型分為以下幾大類：
+ *
+ * - `keyword1` / `keyword2`: 關鍵字，如 `const`、`return`、`import` 等，分顏色類別。
+ * - `string`: 字串常值，如 `'text'`、`"value"`。
+ * - `number`: 數字常值，如 `123`、`3.14`。
+ * - `comment`: 註解內容，如 `//`。
+ * - `type`: 類型定義，如 `interface`、`enum`、`type`。
+ * - `variable`: 識別符號，如變數名、函式名、類別名。
+ * - `constant`: 常數或靜態值，如 `PI`、`MAX_VALUE`。
+ * - `brackets1 | brackets2 | brackets3`: 括號配對，區分不同層級的括號。
+ * - `operator`: 運算符，如 `=`, `+`, `===`, `<`, `>=`。
+ * - `default`: 其他符號，如 `;`, `,`, `.`, `?`, `"`, `'`。
+ *
+ * @example
+ * 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";
+/**
+ * 表示可用的語法高亮主題名稱。
+ * 對應 `themes` 陣列中定義的名稱，例如 `"vscode-dark"`。
+ *
+ * @example
+ * const theme: CodeTheme = "vscode-dark";
+ */
+export type CodeTheme = (typeof themes)[number];
+/**
+ * 單一語法 token 的屬性，用於 <CodeToken /> 元件。
+ *
+ * @template T HTML 或客製元素，例如 span、a、Link 等
+ */
+export type CodeTokenProps<T extends React.ElementType> = AsComponentProps<T, {
+    /**
+     * 語法 token 的語意類型，用於指定樣式顏色。
+     */
+    type?: CodeTokenType;
+    /**
+     * 語法主題名稱。
+     * @default "vscode-dark"
+     */
+    theme?: CodeTheme;
+}>;
+export type CodeTokenBuilder = <T extends React.ElementType>(children: CodeTokenProps<T>["children"], props?: CodeTokenProps<T>) => CodeTokenProps<T>;
+/**
+ * 用於單一程式碼行的屬性，用在 <CodeLine /> 或類似元件中。
+ */
+export type CodeLineProps<T extends React.ElementType> = OverrideProps<React.HTMLAttributes<HTMLElement>, {
+    /**
+     * 該行所包含的語法 token。
+     *
+     * @example
+     * ```tsx
+     * <CodeLine tokens={[
+     *   { type: "keyword-blue", children: "const" },
+     *   { type: "variable", children: "myVar" },
+     *   { type: "operator", children: "=" },
+     *   { type: "string", children: "'Hello'" },
+     * ]} />
+     * ```
+     */
+    tokens: CodeTokenProps<T>[];
+    /**
+     * 語法主題名稱。
+     * @default "vscode-dark"
+     */
+    theme?: CodeTheme;
+}>;
+export type CodeBlockProps<T extends React.ElementType> = OverrideProps<React.HTMLAttributes<HTMLPreElement>, {
+    /**
+     * 所有程式碼行的 token 陣列。
+     *
+     * @example
+     * ```tsx
+     * <CodeBlock tokenLines={[
+     *   [
+     *     { type: "keyword-blue", children: "const" },
+     *     { type: "variable", children: "x" },
+     *     { type: "operator", children: "=" },
+     *     { type: "number", children: "42" },
+     *   ],
+     *   [
+     *     { type: "keyword-purple", children: "return" },
+     *     { type: "variable", children: "x" },
+     *   ],
+     * ]} />
+     * ```
+     */
+    tokenLines: CodeTokenProps<T>[][];
+    /**
+     * 是否顯示行號。
+     * @default true
+     */
+    showLineNumbers?: boolean;
+    /**
+     * 行號的樣式。
+     * @default { color: "#888", fontSize: "0.8em" }
+     * @example
+     * ```tsx
+     * <CodeBlock lineNumberStyle={{ color: "#888", fontSize: "0.8em" }} />
+     * ```
+     * */
+    lineNumberStyle?: React.CSSProperties;
+    /**
+     * 語法主題名稱。
+     * @default "vscode-dark"
+     */
+    theme?: CodeTheme;
+}>;
+export type ParsableLanguage = (typeof parsableLanguages)[number];

package/dist/types/index.js

@@ -1,2 +1 @@
-export * from "./common";
-export * from "./props";
+export {};

package/dist/utils/index.d.ts

@@ -15,7 +15,7 @@ import { CodeTokenBuilder, CodeTokenProps, CodeTokenType } from "../types";
  *
  * @returns 一個以 `CodeTokenType` 為 key 的建構器函式集合
  */
-export declare const c063: Record<CodeTokenType, CodeTokenBuilder>;
+declare const c063: Record<CodeTokenType, CodeTokenBuilder>;
 /**
  * 產生指定空白數量的 CodeToken，用於程式碼中的縮排或空格。
  *
@@ -26,3 +26,4 @@ export declare const c063: Record<CodeTokenType, CodeTokenBuilder>;
  * tokens.push(whiteSpace(2)); // -> { type: "default", children: "  " }
  */
 export declare const whiteSpace: (count?: number) => CodeTokenProps<"span">;
+export default c063;

package/dist/utils/index.js

@@ -14,7 +14,7 @@
  *
  * @returns 一個以 `CodeTokenType` 為 key 的建構器函式集合
  */
-export const c063 = new Proxy({}, {
+const c063 = new Proxy({}, {
     get: (_, prop) => {
         const builder = (children, props) => {
             return {
@@ -36,3 +36,4 @@ export const c063 = new Proxy({}, {
  * tokens.push(whiteSpace(2)); // -> { type: "default", children: "  " }
  */
 export const whiteSpace = (count = 1) => c063.default(" ".repeat(count));
+export default c063;

package/dist/utils/parser.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/parser.js

@@ -0,0 +1,26 @@
+import { parsableLanguages } from "../libs";
+const isParsableLanguage = (lang) => {
+    return parsableLanguages.includes(lang);
+};
+// 解析單行 CodeTokenProps
+const _parseTokenLine = (line, lang) => {
+    if (!isParsableLanguage(lang))
+        return [];
+    const result = [];
+    // 這邊放對應語言的解析邏輯或呼叫外部 parser
+    // 目前先用預設行全文字 token
+    result.push({ type: "default", children: line });
+    return result;
+};
+const parseTokenLines = new Proxy({}, {
+    get: (_, prop) => (content) => content.split("\n").map((line) => _parseTokenLine(line, prop)),
+});
+// parseTokenLines.javascript(
+//   `const FanYu = {
+//   name: '范余振富',
+//   nickname: '飯魚',
+//   age: 19, // <-點看看🤫
+//   hobbies: ['寫程式', '繪畫'],
+//   skills: ['TypeScript', 'React', 'Python'],
+// } as const;`
+// );

package/dist/utils/theme.d.ts

@@ -0,0 +1,2 @@
+import { CodeTheme, CodeTokenType } from "../types";
+export declare const loadTheme: (theme: CodeTheme) => Promise<Record<CodeTokenType, React.CSSProperties["color"]>>;

package/dist/utils/theme.js

@@ -0,0 +1,4 @@
+export const loadTheme = async (theme) => {
+    const { map } = await import(`../libs/themes/${theme}`);
+    return map;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "c063",
-  "version": "1.3.2",
+  "version": "1.4.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,4 +1,4 @@
-import { CodeBlockProps } from "../types/props";
+import { CodeBlockProps } from "../types/index";
 import { CodeLine } from "./CodeLine";
 /**
  * 顯示完整程式碼區塊，支援多行語法 token 與行號顯示。

package/src/components/CodeLine.tsx

@@ -1,4 +1,4 @@
-import { CodeLineProps } from "../types/props";
+import { CodeLineProps } from "../types/index";
 import { CodeToken } from "./CodeToken";
 /**
  * 渲染單一程式碼行，包含多個語法 token。

package/src/components/CodeToken.tsx

@@ -1,5 +1,7 @@
-import { themeMap } from "../libs";
-import { CodeTokenProps } from "../types/props";
+import { useLayoutEffect, useState } from "react";
+import { CodeTokenProps, CodeTokenType } from "../types/index";
+import { loadTheme } from "../utils/theme";
+
 /**
  * 渲染單一語法 token（例如關鍵字、字串、註解等），可指定標籤與樣式。
  *
@@ -20,12 +22,23 @@ export const CodeToken = <T extends React.ElementType = "span">({
   ...rest
 }: CodeTokenProps<T>) => {
   const Tag = as || "span";
+  const [currTheme, setCurrTheme] = useState<Record<
+    CodeTokenType,
+    React.CSSProperties["color"]
+  > | null>(null);
+
+  useLayoutEffect(() => {
+    if (theme) {
+      loadTheme(theme).then((res) => setCurrTheme(res));
+    }
+  }, [theme]);
 
   return (
+    // eslint-disable-next-line react/react-in-jsx-scope
     <Tag
       {...rest}
       style={{
-        color: themeMap[theme || "default-dark-modern"][type || "default"],
+        color: currTheme?.[type || "default"] || undefined,
         ...style,
       }}
     >

package/src/libs/index.tsx

@@ -1,39 +1,16 @@
-import type { CodeTokenType, CodeTheme } from "../types";
-import { map as darkModern } from "./default-dark-modern";
-import { map as dark } from "./default-dark";
-import { map as darkPlus } from "./default-dark-plus";
-import { map as vsLight } from "./visual-studio-light";
-import { map as lightPlus } from "./default-light-plus";
-import { map as lightModern } from "./default-light-modern";
-import { map as ghLight } from "./github-light";
-import { map as ghLightDefault } from "./github-light-default";
-import { map as ghLightBilnd } from "./github-light-colorblind";
-import { map as ghDark } from "./github-dark";
-import { map as ghDarkDefault } from "./github-dark-default";
-import { map as ghDarkBilnd } from "./github-dark-colorblind";
+export const themes = [
+  "default-dark-modern",
+  "default-dark",
+  "default-dark-plus",
+  "visual-studio-light",
+  "default-light-plus",
+  "default-light-modern",
+  "github-light",
+  "github-light-default",
+  "github-light-colorblind",
+  "github-dark",
+  "github-dark-default",
+  "github-dark-colorblind",
+] as const;
 
-const _themeRegistry = {
-  "default-dark-modern": darkModern,
-  "default-dark": dark,
-  "default-dark-plus": darkPlus,
-  "visual-studio-light": vsLight,
-  "default-light-plus": lightPlus,
-  "default-light-modern": lightModern,
-  "github-light": ghLight,
-  "github-light-default": ghLightDefault,
-  "github-light-colorblind": ghLightBilnd,
-  "github-dark": ghDark,
-  "github-dark-default": ghDarkDefault,
-  "github-dark-colorblind": ghDarkBilnd,
-} as const;
-
-// 自動推導主題名稱
-export const themes = Object.keys(
-  _themeRegistry
-) as (keyof typeof _themeRegistry)[];
-
-// themeMap 保留給外部使用
-export const themeMap: Record<
-  CodeTheme,
-  Record<CodeTokenType, React.CSSProperties["color"]>
-> = _themeRegistry;
+export const parsableLanguages = ["javascript"] as const;

package/src/libs/{default-dark-modern.tsx → themes/default-dark-modern.tsx}

@@ -1,4 +1,4 @@
-import { CodeTokenType } from "../types";
+import { CodeTokenType } from "../../types";
 
 export const map: Record<CodeTokenType, React.CSSProperties["color"]> = {
   function: "#dcdcaa",

package/src/libs/{default-dark-plus.tsx → themes/default-dark-plus.tsx}

@@ -1,4 +1,4 @@
-import { CodeTokenType } from "../types";
+import { CodeTokenType } from "../../types";
 
 export const map: Record<CodeTokenType, React.CSSProperties["color"]> = {
   function: "#dcdcaa",

package/src/libs/{default-dark.tsx → themes/default-dark.tsx}

@@ -1,4 +1,4 @@
-import { CodeTokenType } from "../types";
+import { CodeTokenType } from "../../types";
 
 export const map: Record<CodeTokenType, React.CSSProperties["color"]> = {
   function: "#d4d4d4",

package/src/libs/{default-light-modern.tsx → themes/default-light-modern.tsx}

@@ -1,4 +1,4 @@
-import { CodeTokenType } from "../types";
+import { CodeTokenType } from "../../types";
 
 export const map: Record<CodeTokenType, React.CSSProperties["color"]> = {
   function: "rgb(121, 94, 38)",

package/src/libs/{default-light-plus.tsx → themes/default-light-plus.tsx}

@@ -1,4 +1,4 @@
-import { CodeTokenType } from "../types";
+import { CodeTokenType } from "../../types";
 
 export const map: Record<CodeTokenType, React.CSSProperties["color"]> = {
   function: "#795e26",

package/src/libs/{github-dark-colorblind.tsx → themes/github-dark-colorblind.tsx}

@@ -1,4 +1,4 @@
-import { CodeTokenType } from "../types";
+import { CodeTokenType } from "../../types";
 
 export const map: Record<CodeTokenType, React.CSSProperties["color"]> = {
   function: "rgb(210, 168, 255)",

package/src/libs/{github-dark-default.tsx → themes/github-dark-default.tsx}

@@ -1,4 +1,4 @@
-import { CodeTokenType } from "../types";
+import { CodeTokenType } from "../../types";
 
 export const map: Record<CodeTokenType, React.CSSProperties["color"]> = {
   function: "#d2a8ff",
@@ -6,14 +6,13 @@ export const map: Record<CodeTokenType, React.CSSProperties["color"]> = {
   keyword2: "#ff7b72",
   string: "#a5d6ff",
   number: "#79c0ff",
-  comment: "##6a737d",
+  comment: "#6a737d",
   variable: "#e6edf3",
   constant: "#79c0ff",
   type: "#ff7b72",
   brackets1: "#79c0ff",
   brackets2: "#56d364",
   brackets3: "#e3b341",
-  brackets4: "#ffa198",
   operator: "#ff7b72",
   default: "#e6edf3",
 };

package/src/libs/{github-dark.tsx → themes/github-dark.tsx}

@@ -1,4 +1,4 @@
-import { CodeTokenType } from "../types";
+import { CodeTokenType } from "../../types";
 
 export const map: Record<CodeTokenType, React.CSSProperties["color"]> = {
   function: "#b392f0",

package/src/libs/{github-light-colorblind.tsx → themes/github-light-colorblind.tsx}

@@ -1,4 +1,4 @@
-import { CodeTokenType } from "../types";
+import { CodeTokenType } from "../../types";
 
 export const map: Record<CodeTokenType, React.CSSProperties["color"]> = {
   function: "#8250df",

package/src/libs/{github-light-default.tsx → themes/github-light-default.tsx}

@@ -1,4 +1,4 @@
-import { CodeTokenType } from "../types";
+import { CodeTokenType } from "../../types";
 
 export const map: Record<CodeTokenType, React.CSSProperties["color"]> = {
   function: "#8250df",

package/src/libs/{github-light.tsx → themes/github-light.tsx}

@@ -1,4 +1,4 @@
-import { CodeTokenType } from "../types";
+import { CodeTokenType } from "../../types";
 
 export const map: Record<CodeTokenType, React.CSSProperties["color"]> = {
   function: "#6f42c1",

package/src/libs/{visual-studio-light.tsx → themes/visual-studio-light.tsx}

@@ -1,5 +1,4 @@
-import { CodeTokenType } from "../types";
-
+import { CodeTokenType } from "../../types";
 export const map: Record<CodeTokenType, React.CSSProperties["color"]> = {
   function: "#000000",
   keyword1: "#0000ff",

package/src/types/index.ts

@@ -1,2 +1,147 @@
-export * from "./common";
-export * from "./props";
+import { parsableLanguages, themes } from "../libs";
+import { AsComponentProps, OverrideProps } from "./common";
+/**
+ * 用於表示語法高亮中每個 token 的語意分類，對應於 `<CodeToken />` 中的 `type`。
+ *
+ * 每個類型會對應特定的顏色與用途，例如關鍵字、數字、字串、註解等，
+ * 可配合 `codeColoreMap` 指定顯示樣式。s
+ *
+ * 類型分為以下幾大類：
+ *
+ * - `keyword1` / `keyword2`: 關鍵字，如 `const`、`return`、`import` 等，分顏色類別。
+ * - `string`: 字串常值，如 `'text'`、`"value"`。
+ * - `number`: 數字常值，如 `123`、`3.14`。
+ * - `comment`: 註解內容，如 `//`。
+ * - `type`: 類型定義，如 `interface`、`enum`、`type`。
+ * - `variable`: 識別符號，如變數名、函式名、類別名。
+ * - `constant`: 常數或靜態值，如 `PI`、`MAX_VALUE`。
+ * - `brackets1 | brackets2 | brackets3`: 括號配對，區分不同層級的括號。
+ * - `operator`: 運算符，如 `=`, `+`, `===`, `<`, `>=`。
+ * - `default`: 其他符號，如 `;`, `,`, `.`, `?`, `"`, `'`。
+ *
+ * @example
+ * 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"; // 其他符號：, ; . ? ! 等
+
+/**
+ * 表示可用的語法高亮主題名稱。
+ * 對應 `themes` 陣列中定義的名稱，例如 `"vscode-dark"`。
+ *
+ * @example
+ * const theme: CodeTheme = "vscode-dark";
+ */
+export type CodeTheme = (typeof themes)[number];
+
+/**
+ * 單一語法 token 的屬性，用於 <CodeToken /> 元件。
+ *
+ * @template T HTML 或客製元素，例如 span、a、Link 等
+ */
+export type CodeTokenProps<T extends React.ElementType> = AsComponentProps<
+  T,
+  {
+    /**
+     * 語法 token 的語意類型，用於指定樣式顏色。
+     */
+    type?: CodeTokenType;
+    /**
+     * 語法主題名稱。
+     * @default "vscode-dark"
+     */
+    theme?: CodeTheme;
+  }
+>;
+
+export type CodeTokenBuilder = <T extends React.ElementType>(
+  children: CodeTokenProps<T>["children"],
+  props?: CodeTokenProps<T>
+) => CodeTokenProps<T>;
+
+/**
+ * 用於單一程式碼行的屬性，用在 <CodeLine /> 或類似元件中。
+ */
+export type CodeLineProps<T extends React.ElementType> = OverrideProps<
+  React.HTMLAttributes<HTMLElement>,
+  {
+    /**
+     * 該行所包含的語法 token。
+     *
+     * @example
+     * ```tsx
+     * <CodeLine tokens={[
+     *   { type: "keyword-blue", children: "const" },
+     *   { type: "variable", children: "myVar" },
+     *   { type: "operator", children: "=" },
+     *   { type: "string", children: "'Hello'" },
+     * ]} />
+     * ```
+     */
+    tokens: CodeTokenProps<T>[];
+    /**
+     * 語法主題名稱。
+     * @default "vscode-dark"
+     */
+    theme?: CodeTheme;
+  }
+>;
+
+export type CodeBlockProps<T extends React.ElementType> = OverrideProps<
+  React.HTMLAttributes<HTMLPreElement>,
+  {
+    /**
+     * 所有程式碼行的 token 陣列。
+     *
+     * @example
+     * ```tsx
+     * <CodeBlock tokenLines={[
+     *   [
+     *     { type: "keyword-blue", children: "const" },
+     *     { type: "variable", children: "x" },
+     *     { type: "operator", children: "=" },
+     *     { type: "number", children: "42" },
+     *   ],
+     *   [
+     *     { type: "keyword-purple", children: "return" },
+     *     { type: "variable", children: "x" },
+     *   ],
+     * ]} />
+     * ```
+     */
+    tokenLines: CodeTokenProps<T>[][];
+
+    /**
+     * 是否顯示行號。
+     * @default true
+     */
+    showLineNumbers?: boolean;
+    /**
+     * 行號的樣式。
+     * @default { color: "#888", fontSize: "0.8em" }
+     * @example
+     * ```tsx
+     * <CodeBlock lineNumberStyle={{ color: "#888", fontSize: "0.8em" }} />
+     * ```
+     * */
+    lineNumberStyle?: React.CSSProperties;
+    /**
+     * 語法主題名稱。
+     * @default "vscode-dark"
+     */
+    theme?: CodeTheme;
+  }
+>;
+
+export type ParsableLanguage = (typeof parsableLanguages)[number];

package/src/utils/{index.ts → index.tsx}

@@ -15,7 +15,7 @@ import { CodeTokenBuilder, CodeTokenProps, CodeTokenType } from "../types";
  *
  * @returns 一個以 `CodeTokenType` 為 key 的建構器函式集合
  */
-export const c063 = new Proxy(
+const c063 = new Proxy(
   {},
   {
     get: (_, prop: CodeTokenType) => {
@@ -45,3 +45,5 @@ export const c063 = new Proxy(
  */
 export const whiteSpace = (count: number = 1): CodeTokenProps<"span"> =>
   c063.default(" ".repeat(count));
+
+export default c063;

package/src/utils/parser.tsx

@@ -0,0 +1,38 @@
+import { parsableLanguages } from "../libs";
+import { CodeTokenProps, ParsableLanguage } from "../types/index";
+
+const isParsableLanguage = (lang: string): lang is ParsableLanguage => {
+  return parsableLanguages.includes(lang as ParsableLanguage);
+};
+
+// 解析單行 CodeTokenProps
+const _parseTokenLine = (
+  line: string,
+  lang: ParsableLanguage
+): CodeTokenProps<"span">[] => {
+  if (!isParsableLanguage(lang)) return [];
+  const result: CodeTokenProps<"span">[] = [];
+  // 這邊放對應語言的解析邏輯或呼叫外部 parser
+  // 目前先用預設行全文字 token
+  result.push({ type: "default", children: line });
+  return result;
+};
+const parseTokenLines = new Proxy(
+  {},
+  {
+    get:
+      (_, prop: ParsableLanguage) =>
+      (content: string): CodeTokenProps<"span">[][] =>
+        content.split("\n").map((line) => _parseTokenLine(line, prop)),
+  }
+) as Record<ParsableLanguage, (content: string) => CodeTokenProps<"span">[][]>;
+
+// parseTokenLines.javascript(
+//   `const FanYu = {
+//   name: '范余振富',
+//   nickname: '飯魚',
+//   age: 19, // <-點看看🤫
+//   hobbies: ['寫程式', '繪畫'],
+//   skills: ['TypeScript', 'React', 'Python'],
+// } as const;`
+// );

package/src/utils/theme.tsx

@@ -0,0 +1,8 @@
+import { CodeTheme, CodeTokenType } from "../types";
+
+export const loadTheme = async (
+  theme: CodeTheme
+): Promise<Record<CodeTokenType, React.CSSProperties["color"]>> => {
+  const { map } = await import(`../libs/themes/${theme}`);
+  return map;
+};

package/eslint.config.js

@@ -1,13 +0,0 @@
-import js from "@eslint/js";
-import globals from "globals";
-import tseslint from "typescript-eslint";
-import pluginReact from "eslint-plugin-react";
-import { defineConfig } from "eslint/config";
-
-
-export default defineConfig([
-  { files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], plugins: { js }, extends: ["js/recommended"] },
-  { files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], languageOptions: { globals: globals.browser } },
-  tseslint.configs.recommended,
-  pluginReact.configs.flat.recommended,
-]);

package/src/types/props.tsx

@@ -1,145 +0,0 @@
-import { themes } from "../libs";
-import { AsComponentProps, OverrideProps } from "./common";
-/**
- * 用於表示語法高亮中每個 token 的語意分類，對應於 `<CodeToken />` 中的 `type`。
- *
- * 每個類型會對應特定的顏色與用途，例如關鍵字、數字、字串、註解等，
- * 可配合 `codeColoreMap` 指定顯示樣式。s
- *
- * 類型分為以下幾大類：
- *
- * - `keyword1` / `keyword2`: 關鍵字，如 `const`、`return`、`import` 等，分顏色類別。
- * - `string`: 字串常值，如 `'text'`、`"value"`。
- * - `number`: 數字常值，如 `123`、`3.14`。
- * - `comment`: 註解內容，如 `//`。
- * - `type`: 類型定義，如 `interface`、`enum`、`type`。
- * - `variable`: 識別符號，如變數名、函式名、類別名。
- * - `constant`: 常數或靜態值，如 `PI`、`MAX_VALUE`。
- * - `brackets1`, `brackets2`, `brackets3`: 括號配對，區分不同層級的括號。
- * - `operator`: 運算符，如 `=`, `+`, `===`, `<`, `>=`。
- * - `default`: 其他符號，如 `;`, `,`, `.`, `?`, `"`, `'`。
- *
- * @example
- * const token: CodeTokenType = "keyword1";
- * const token2: CodeTokenType = "string";
- */
-export type CodeTokenType =
-  | `keyword${number}` // 關鍵字，分兩種樣式層級
-  | "function" // 函式名
-  | "string" // 字串常值：'abc'、"hello"
-  | "number" // 數值常量：123、3.14
-  | "comment" // 註解內容：// 或 /* */
-  | "type" // 類型定義：type、interface、enum
-  | "variable" // 變數名、函式名、類別名等識別符號
-  | "constant" // 常數值：例如 enum 值、靜態屬性
-  | `brackets${number}` // 括號配對，多層不同樣式：(), [], {}
-  | "operator" // 運算符號：=、+、*、===、<、>= 等
-  | "default"; // 其他符號：, ; . ? ! 等
-
-/**
- * 表示可用的語法高亮主題名稱。
- * 對應 `themes` 陣列中定義的名稱，例如 `"vscode-dark"`。
- *
- * @example
- * const theme: CodeTheme = "vscode-dark";
- */
-export type CodeTheme = (typeof themes)[number];
-
-/**
- * 單一語法 token 的屬性，用於 <CodeToken /> 元件。
- *
- * @template T HTML 或客製元素，例如 span、a、Link 等
- */
-export type CodeTokenProps<T extends React.ElementType> = AsComponentProps<
-  T,
-  {
-    /**
-     * 語法 token 的語意類型，用於指定樣式顏色。
-     */
-    type?: CodeTokenType;
-    /**
-     * 語法主題名稱。
-     * @default "vscode-dark"
-     */
-    theme?: CodeTheme;
-  }
->;
-
-export type CodeTokenBuilder = <T extends React.ElementType>(
-  children: CodeTokenProps<T>["children"],
-  props?: CodeTokenProps<T>
-) => CodeTokenProps<T>;
-
-/**
- * 用於單一程式碼行的屬性，用在 <CodeLine /> 或類似元件中。
- */
-export type CodeLineProps<T extends React.ElementType> = OverrideProps<
-  React.HTMLAttributes<HTMLElement>,
-  {
-    /**
-     * 該行所包含的語法 token。
-     *
-     * @example
-     * ```tsx
-     * <CodeLine tokens={[
-     *   { type: "keyword-blue", children: "const" },
-     *   { type: "variable", children: "myVar" },
-     *   { type: "operator", children: "=" },
-     *   { type: "string", children: "'Hello'" },
-     * ]} />
-     * ```
-     */
-    tokens: CodeTokenProps<T>[];
-    /**
-     * 語法主題名稱。
-     * @default "vscode-dark"
-     */
-    theme?: CodeTheme;
-  }
->;
-
-export type CodeBlockProps<T extends React.ElementType> = OverrideProps<
-  React.HTMLAttributes<HTMLPreElement>,
-  {
-    /**
-     * 所有程式碼行的 token 陣列。
-     *
-     * @example
-     * ```tsx
-     * <CodeBlock tokenLines={[
-     *   [
-     *     { type: "keyword-blue", children: "const" },
-     *     { type: "variable", children: "x" },
-     *     { type: "operator", children: "=" },
-     *     { type: "number", children: "42" },
-     *   ],
-     *   [
-     *     { type: "keyword-purple", children: "return" },
-     *     { type: "variable", children: "x" },
-     *   ],
-     * ]} />
-     * ```
-     */
-    tokenLines: CodeTokenProps<T>[][];
-
-    /**
-     * 是否顯示行號。
-     * @default true
-     */
-    showLineNumbers?: boolean;
-    /**
-     * 行號的樣式。
-     * @default { color: "#888", fontSize: "0.8em" }
-     * @example
-     * ```tsx
-     * <CodeBlock lineNumberStyle={{ color: "#888", fontSize: "0.8em" }} />
-     * ```
-     * */
-    lineNumberStyle?: React.CSSProperties;
-    /**
-     * 語法主題名稱。
-     * @default "vscode-dark"
-     */
-    theme?: CodeTheme;
-  }
->;