🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
Sign In

c063

Package Overview
Dependencies
Maintainers
1
Versions
33
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

c063 - npm Package Compare versions

Comparing version
1.6.1
 to
1.6.2
+3
-3
dist/types/index.d.ts

@@ -39,3 +39,3 @@ import { parsableLanguages, themes } from "../libs";

*/
export type CodeTokenProps<T extends React.ElementType> = AsComponentProps<T, {
export type CodeTokenProps<T extends React.ElementType = "span"> = AsComponentProps<T, {
/**

@@ -55,3 +55,3 @@ * 語法 token 的語意類型，用於指定樣式顏色。

*/
export type CodeLineProps<T extends React.ElementType> = OverrideProps<React.HTMLAttributes<HTMLElement>, {
export type CodeLineProps<T extends React.ElementType = "span"> = OverrideProps<React.HTMLAttributes<HTMLElement>, {
/**

@@ -82,3 +82,3 @@ * 該行所包含的語法 token。

}>;
export type CodeBlockProps<T extends React.ElementType> = OverrideProps<React.HTMLAttributes<HTMLPreElement>, {
export type CodeBlockProps<T extends React.ElementType = "span"> = OverrideProps<React.HTMLAttributes<HTMLPreElement>, {
/**

@@ -85,0 +85,0 @@ * 所有程式碼行的 token 陣列。

+1
-1
package.json
{
"$schema": "https://json.schemastore.org/package.json",
"name": "c063",
"version": "1.6.1",
"version": "1.6.2",
"description": "A React component for displaying code snippets with syntax highlighting.",

@@ -6,0 +6,0 @@ "main": "dist/index.js",

+2
-0
README.md

@@ -78,2 +78,3 @@ <div align="center">

theme?: CodeTheme; // e.g. "github-dark"
autoWrap:? boolean;
}

@@ -88,2 +89,3 @@ ```

theme?: CodeTheme;
autoWrap:? boolean;
}

@@ -90,0 +92,0 @@ ```

+66
-64
src/types/index.tsx

@@ -52,16 +52,17 @@ import { parsableLanguages, themes } from "../libs";

*/
export type CodeTokenProps<T extends React.ElementType> = AsComponentProps<
T,
{
/**
* 語法 token 的語意類型，用於指定樣式顏色。
*/
type?: CodeTokenType;
/**
* 語法主題名稱。
* @default "vscode-dark"
*/
theme?: CodeTheme;
}
>;
export type CodeTokenProps<T extends React.ElementType = "span"> =
AsComponentProps<
T,
{
/**
* 語法 token 的語意類型，用於指定樣式顏色。
*/
type?: CodeTokenType;
/**
* 語法主題名稱。
* @default "vscode-dark"
*/
theme?: CodeTheme;
}
>;

@@ -76,3 +77,3 @@ export type CodeTokenBuilder = <T extends React.ElementType = "span">(

*/
export type CodeLineProps<T extends React.ElementType> = OverrideProps<
export type CodeLineProps<T extends React.ElementType = "span"> = OverrideProps<
React.HTMLAttributes<HTMLElement>,

@@ -108,54 +109,55 @@ {

export type CodeBlockProps<T extends React.ElementType> = OverrideProps<
React.HTMLAttributes<HTMLPreElement>,
{
/**
* 所有程式碼行的 token 陣列。
*
* @example
* ```tsx
* <CodeBlock tokenLines={[
* [
* { type: "keyword1", children: "const" },
* { type: "variable", children: "x" },
* { type: "operator", children: "=" },
* { type: "number", children: "42" },
* ],
* [
* { type: "keyword2", children: "return" },
* { type: "variable", children: "x" },
* ],
* ]} />
* ```
*/
tokenLines: CodeTokenProps<T>[][];
export type CodeBlockProps<T extends React.ElementType = "span"> =
OverrideProps<
React.HTMLAttributes<HTMLPreElement>,
{
/**
* 所有程式碼行的 token 陣列。
*
* @example
* ```tsx
* <CodeBlock tokenLines={[
* [
* { type: "keyword1", children: "const" },
* { type: "variable", children: "x" },
* { type: "operator", children: "=" },
* { type: "number", children: "42" },
* ],
* [
* { type: "keyword2", 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 "default-dark-modern"
*/
theme?: CodeTheme;
/**
* 是否顯示行號。
* @default true
*/
showLineNumbers?: boolean;
/**
* 行號的樣式。
* @default { color: "#888", fontSize: "0.8em" }
* @example
* ```tsx
* <CodeBlock lineNumberStyle={{ color: "#888", fontSize: "0.8em" }} />
* ```
* */
lineNumberStyle?: React.CSSProperties;
/**
* 語法主題名稱。
* @default "default-dark-modern"
*/
theme?: CodeTheme;
/**
* 是否自動換行
* @default true
*/
autoWrap?: boolean;
}
>;
/**
* 是否自動換行
* @default true
*/
autoWrap?: boolean;
}
>;
export type ParsableLanguage = (typeof parsableLanguages)[number];