c063 1.4.2 → 1.4.4

package/README.md

@@ -1 +1,121 @@
-# c063
+<div align="center">
+  <h1>c063</h1>
+
+<div style="display: flex; justify-content: center">
+<a href="https://www.npmjs.com/package/c063"><img alt="npm version" src="https://img.shields.io/npm/v/c063"></a>
+<a href="./LICENSE"><img alt="license" src="https://img.shields.io/npm/l/c063.svg"></a></div>
+</div>
+
+---
+
+A highly customizable React component library for displaying syntax-highlighted code snippets. Supports multiple languages and themes, making it ideal for documentation, blogs, or educational platforms.
+
+## ✨ Project Overview
+
+**c063** is a syntax highlighting component built with React and TypeScript. It offers flexible theming and a modular architecture that makes it easy for developers to embed code blocks into their applications.
+
+## ⚡️ Features
+
+- ✏️ Display code snippets with syntax highlighting.
+- 🌟 Multiple theme support: GitHub, Visual Studio, Light/Dark, etc.
+- 🔄 Modular design for easy integration and customization.
+- 📖 Perfect for tutorials, blog posts, and educational content.
+
+## 🚀 Installation & Usage
+
+### Installation
+
+```bash
+npm install c063
+```
+
+### Usage Example
+
+```tsx
+import { CodeBlock } from "c063";
+
+const tokens = [
+  [
+    { type: "keyword1", children: "const" },
+    { type: "default", children: " " },
+    { type: "variable", children: "x" },
+    { type: "default", children: " = " },
+    { type: "number", children: "42" },
+  ],
+];
+
+<CodeBlock tokenLines={tokens} theme="github-light" />;
+```
+
+## 📂 Project Structure
+
+```txt
+src
+├── components/         # Component files
+│   ├── CodeBlock.tsx   # Code block container
+│   ├── CodeLine.tsx    # Single line component
+│   ├── CodeToken.tsx   # Individual token component
+├── libs/               # Theme and configuration
+│   └── themes/         # Color themes
+├── types/              # Type definitions
+├── utils/              # Utility functions and parsers
+└── index.ts            # Module export entry
+```
+
+## 🔍 API / Props Reference
+
+### `CodeBlock<T>`
+
+```ts
+interface CodeBlockProps<T extends React.ElementType> {
+  tokenLines: CodeTokenProps<T>[][];
+  showLineNumbers?: boolean; // Default true
+  lineNumberStyle?: React.CSSProperties;
+  theme?: CodeTheme; // e.g. "github-dark"
+}
+```
+
+### `CodeLine<T>`
+
+```ts
+interface CodeLineProps<T extends React.ElementType> {
+  tokens: CodeTokenProps<T>[];
+  theme?: CodeTheme;
+}
+```
+
+### `CodeToken<T>`
+
+```ts
+interface CodeTokenProps<T extends React.ElementType> {
+  type?: CodeTokenType;
+  theme?: CodeTheme;
+  children: React.ReactNode;
+  as?: T; // Custom rendering tag
+}
+```
+
+### Utilities
+
+- `c063.<type>()`: Quickly create tokens, e.g., `c063.keyword1("const")`.
+- `whiteSpace(count)`: Insert a specific number of whitespace tokens.
+
+## ✍️ Contributing
+
+All contributions are welcome, including but not limited to:
+
+- Bug fixes or performance improvements
+- New theme submissions
+- Support for more programming languages
+
+Before submitting a PR, please fork the repository and create a new branch for your changes.
+
+## 📄 License
+
+This project is licensed under the [MIT](./LICENSE) license.
+
+---
+
+Repository:
+
+[https://github.com/fanyuuu2006/c063](https://github.com/fanyuuu2006/c063)

package/dist/components/CodeLine.d.ts

@@ -9,6 +9,6 @@ import { CodeLineProps } from "../types/index";
  * @returns JSX 元素，呈現語法 token 的單行程式碼
  */
 export declare const CodeLine: {
-    <T extends React.ElementType>({ style, tokens, theme, ...rest }: CodeLineProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType = "span">({ style, tokens, theme, ...rest }: CodeLineProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-export * from './types';
-export * from './components';
-import c063, { whiteSpace } from './utils';
+export * from "./types";
+export * from "./components";
+import c063, { whiteSpace, extractTokenContent } from "./utils";
 export default c063;
-export { whiteSpace };
+export { whiteSpace, extractTokenContent };

package/dist/index.js

@@ -1,5 +1,5 @@
-export * from './types';
-export * from './components';
-import c063, { whiteSpace } from './utils';
+export * from "./types";
+export * from "./components";
+import c063, { whiteSpace, extractTokenContent } from "./utils";
 export default c063;
-export { whiteSpace };
+export { whiteSpace, extractTokenContent };

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { CodeTokenBuilder, CodeTokenProps, CodeTokenType } from "../types";
 /**
  * 語法 token 的建構器集合，每個 key 對應一種語法類型（如 `keyword-blue`, `string`, `comment` 等），
@@ -26,4 +27,5 @@ declare const c063: Record<CodeTokenType, CodeTokenBuilder>;
  * tokens.push(whiteSpace(2)); // -> { type: "default", children: "  " }
  */
 export declare const whiteSpace: (count?: number) => CodeTokenProps<"span">;
+export declare const extractTokenContent: <T extends React.ElementType>(token: CodeTokenProps<T>) => string;
 export default c063;

package/dist/utils/index.js

@@ -1,3 +1,4 @@
+import React from "react";
 /**
  * 語法 token 的建構器集合，每個 key 對應一種語法類型（如 `keyword-blue`, `string`, `comment` 等），
  * 透過 Proxy 生成對應的 `CodeTokenBuilder`。
@@ -36,4 +37,19 @@ const c063 = new Proxy({}, {
  * tokens.push(whiteSpace(2)); // -> { type: "default", children: "  " }
  */
 export const whiteSpace = (count = 1) => c063.default(" ".repeat(count));
+export const extractTokenContent = (token) => {
+    const _extract = (children) => {
+        if (typeof children === "string")
+            return children;
+        if (typeof children === "number")
+            return children.toString();
+        if (Array.isArray(children))
+            return children.map(_extract).join("");
+        if (React.isValidElement(children)) {
+            return _extract(children.props.children);
+        }
+        return ""; // 如果 children 是 null 或 undefined，則返回空字串
+    };
+    return _extract(token.children);
+};
 export default c063;

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "c063",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "description": "A React component for displaying code snippets with syntax highlighting.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,11 +9,11 @@
     "build": "tsc"
   },
   "keywords": [
+    "c063",
+    "code",
     "React",
     "Component",
-    "Code",
     "Language",
-    "Code.js",
     "Fanyu",
     "Syntax Highlighting",
     "Code Display",
@@ -31,7 +31,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/fanyuuu2006/fanyu-components.git"
+    "url": "git+https://github.com/fanyuuu2006/c063.git"
   },
   "author": "",
   "license": "MIT",

package/src/components/CodeLine.tsx

@@ -9,7 +9,7 @@ import { CodeToken } from "./CodeToken";
  * @param rest 其他 HTMLAttributes
  * @returns JSX 元素，呈現語法 token 的單行程式碼
  */
-export const CodeLine = <T extends React.ElementType>({
+export const CodeLine = <T extends React.ElementType = "span">({
   style,
   tokens,
   theme,

package/src/index.ts

@@ -1,8 +1,6 @@
-export * from './types';
-export * from './components';
+export * from "./types";
+export * from "./components";
 
-import c063, { whiteSpace }from './utils';
+import c063, { whiteSpace, extractTokenContent } from "./utils";
 export default c063;
-export {
-    whiteSpace
-}
+export { whiteSpace, extractTokenContent };

package/src/utils/index.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { CodeTokenBuilder, CodeTokenProps, CodeTokenType } from "../types";
 /**
  * 語法 token 的建構器集合，每個 key 對應一種語法類型（如 `keyword-blue`, `string`, `comment` 等），
@@ -46,4 +47,19 @@ const c063 = new Proxy(
 export const whiteSpace = (count: number = 1): CodeTokenProps<"span"> =>
   c063.default(" ".repeat(count));
 
+export const extractTokenContent = <T extends React.ElementType>(
+  token: CodeTokenProps<T>
+): string => {
+  const _extract = (children: React.ReactNode): string => {
+    if (typeof children === "string") return children;
+    if (typeof children === "number") return children.toString();
+    if (Array.isArray(children)) return children.map(_extract).join("");
+    if (React.isValidElement(children)) {
+      return _extract((children as React.JSX.Element).props.children);
+    }
+    return ""; // 如果 children 是 null 或 undefined，則返回空字串
+  };
+  return _extract(token.children);
+};
+
 export default c063;