c063 1.6.2 → 1.6.4

package/dist/components/CodeToken.d.ts

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

package/dist/components/CodeToken.js

@@ -4,18 +4,18 @@ import { themeMap } from "../libs/index";
  * 渲染單一語法 token（例如關鍵字、字串、註解等），可指定標籤與樣式。
  *
  * @template T 元件渲染類型，預設為 <span>
- * @param props.as 指定要渲染的 HTML 標籤或客製元件
- * @param props.type 語法類型，用於對應不同顏色
- * @param props.style 額外樣式，會與語法顏色合併
- * @param props.children 顯示的程式碼字串
- * @param props.theme 主題設定
+ * @param as 指定要渲染的 HTML 標籤或客製元件
+ * @param type 語法類型，用於對應不同顏色
+ * @param style 額外樣式，會與語法顏色合併
+ * @param children 顯示的程式碼字串
+ * @param theme 主題設定
  * @param rest 其他 HTML 屬性
  * @returns JSX 元素，顯示帶有語法顏色的 token
  */
-export const CodeToken = ({ as, style, children, type, theme, ...rest }) => {
+export const CodeToken = ({ as, style, children, className, type = "default", theme = "default-dark-modern", ...rest }) => {
     const Tag = as || "span";
-    return (_jsx(Tag, { ...rest, style: {
-            color: themeMap[theme || "default-dark-modern"][type || "default"],
+    return (_jsx(Tag, { ...rest, className: `c063-${type} ${className || ""}`, style: {
+            color: themeMap[theme][type],
             ...style,
         }, children: children }));
 };

package/dist/types/index.d.ts

@@ -43,7 +43,7 @@ export type CodeTokenProps<T extends React.ElementType = "span"> = AsComponentPr
     type?: CodeTokenType;
     /**
      * 語法主題名稱。
-     * @default "vscode-dark"
+     * @default "vscode-dark-modern"
      */
     theme?: CodeTheme;
 }>;
@@ -105,7 +105,7 @@ export type CodeBlockProps<T extends React.ElementType = "span"> = OverrideProps
     showLineNumbers?: boolean;
     /**
      * 行號的樣式。
-     * @default { color: "#888", fontSize: "0.8em" }
+     * @default{ color: "#888", fontSize: "0.8em" }
      * @example
      * ```tsx
      * <CodeBlock lineNumberStyle={{ color: "#888", fontSize: "0.8em" }} />

package/dist/utils/index.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { CodeTokenBuilder, CodeTokenProps, CodeTokenType } from "../types";
+export declare const isCodeTokenType: (value: any) => value is CodeTokenType;
 /**
  * `c063` 是一組語法高亮 token 建構器集合。
  * 每個 key 對應一種語法分類（如 `keyword1`, `string`, `comment` 等），

package/dist/utils/index.js

@@ -1,4 +1,23 @@
 import React from "react";
+export const isCodeTokenType = (value) => {
+    const codeTokenTypes = [
+        "keyword1",
+        "keyword2",
+        "function",
+        "string",
+        "number",
+        "comment",
+        "type",
+        "variable",
+        "constant",
+        "brackets1",
+        "brackets2",
+        "brackets3",
+        "operator",
+        "default",
+    ];
+    return codeTokenTypes.includes(value);
+};
 /**
  * `c063` 是一組語法高亮 token 建構器集合。
  * 每個 key 對應一種語法分類（如 `keyword1`, `string`, `comment` 等），
@@ -13,7 +32,7 @@ import React from "react";
  * @returns 以 `CodeTokenType` 為 key 的建構器函式集合。
  */
 const c063 = new Proxy({}, {
-    get: (_, prop) => {
+    get: (target, prop, receiver) => {
         /**
          * 建立指定語法類型的 CodeToken。
          *
@@ -22,6 +41,9 @@ const c063 = new Proxy({}, {
          * @returns 一個 CodeToken 物件
          */
         const builder = (children, props) => {
+            if (!isCodeTokenType(prop)) {
+                return Reflect.get(target, prop, receiver);
+            }
             return {
                 children,
                 type: prop,

package/package.json

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

package/src/components/CodeToken.tsx

@@ -5,11 +5,11 @@ import { CodeTokenProps } from "../types/index";
  * 渲染單一語法 token（例如關鍵字、字串、註解等），可指定標籤與樣式。
  *
  * @template T 元件渲染類型，預設為 <span>
- * @param props.as 指定要渲染的 HTML 標籤或客製元件
- * @param props.type 語法類型，用於對應不同顏色
- * @param props.style 額外樣式，會與語法顏色合併
- * @param props.children 顯示的程式碼字串
- * @param props.theme 主題設定
+ * @param as 指定要渲染的 HTML 標籤或客製元件
+ * @param type 語法類型，用於對應不同顏色
+ * @param style 額外樣式，會與語法顏色合併
+ * @param children 顯示的程式碼字串
+ * @param theme 主題設定
  * @param rest 其他 HTML 屬性
  * @returns JSX 元素，顯示帶有語法顏色的 token
  */
@@ -17,8 +17,9 @@ export const CodeToken = <T extends React.ElementType = "span">({
   as,
   style,
   children,
-  type,
-  theme,
+  className,
+  type = "default",
+  theme = "default-dark-modern",
   ...rest
 }: CodeTokenProps<T>) => {
   const Tag = as || "span";
@@ -26,8 +27,9 @@ export const CodeToken = <T extends React.ElementType = "span">({
   return (
     <Tag
       {...rest}
+      className={`c063-${type} ${className || ""}`}
       style={{
-        color: themeMap[theme || "default-dark-modern"][type || "default"],
+        color: themeMap[theme][type],
         ...style,
       }}
     >

package/src/types/index.tsx

@@ -59,7 +59,7 @@ export type CodeTokenProps<T extends React.ElementType = "span"> =
       type?: CodeTokenType;
       /**
        * 語法主題名稱。
-       * @default "vscode-dark"
+       * @default "vscode-dark-modern"
        */
       theme?: CodeTheme;
     }
@@ -136,7 +136,7 @@ export type CodeBlockProps<T extends React.ElementType = "span"> =
       showLineNumbers?: boolean;
       /**
        * 行號的樣式。
-       * @default { color: "#888", fontSize: "0.8em" }
+       * @default{ color: "#888", fontSize: "0.8em" }
        * @example
        * ```tsx
        * <CodeBlock lineNumberStyle={{ color: "#888", fontSize: "0.8em" }} />

package/src/utils/index.tsx

@@ -6,6 +6,27 @@ import {
   ParsableLanguage,
 } from "../types";
 
+export const isCodeTokenType = (value: any): value is CodeTokenType => {
+  const codeTokenTypes: CodeTokenType[] = [
+    "keyword1",
+    "keyword2",
+    "function",
+    "string",
+    "number",
+    "comment",
+    "type",
+    "variable",
+    "constant",
+    "brackets1",
+    "brackets2",
+    "brackets3",
+    "operator",
+    "default",
+  ];
+  return codeTokenTypes.includes(value);
+};
+  
+
 /**
  * `c063` 是一組語法高亮 token 建構器集合。
  * 每個 key 對應一種語法分類（如 `keyword1`, `string`, `comment` 等），
@@ -22,7 +43,7 @@ import {
 const c063 = new Proxy(
   {},
   {
-    get: (_, prop: CodeTokenType) => {
+    get: (target, prop: CodeTokenType, receiver) => {
       /**
        * 建立指定語法類型的 CodeToken。
        *
@@ -34,6 +55,9 @@ const c063 = new Proxy(
         children: React.ReactNode,
         props?: CodeTokenProps<T>
       ) => {
+        if (!isCodeTokenType(prop)) {
+          return Reflect.get(target, prop, receiver);
+        }
         return {
           children,
           type: prop,