From 76b47857b475e1b6f41e042504bce41e026c37bd Mon Sep 17 00:00:00 2001 From: pheralb Date: Fri, 20 Feb 2026 11:23:42 +0000 Subject: [PATCH 1/5] feat: improve line-anchors transformer + styles + docs + create basic example --- .../src/components/mdx/mdx-components.tsx | 2 + .../previews/line-anchors-example.tsx | 23 +++++++ apps/website/src/docs/shiki/line-anchors.mdx | 67 ++++++++++++++----- apps/website/src/mdx/plugins/rehypeShiki.ts | 2 + apps/website/src/styles/shiki.css | 12 +--- .../utils/shiki/transformers/line-anchors.ts | 22 +++--- 6 files changed, 88 insertions(+), 40 deletions(-) create mode 100644 apps/website/src/components/previews/line-anchors-example.tsx diff --git a/apps/website/src/components/mdx/mdx-components.tsx b/apps/website/src/components/mdx/mdx-components.tsx index 8df29aa..9168424 100644 --- a/apps/website/src/components/mdx/mdx-components.tsx +++ b/apps/website/src/components/mdx/mdx-components.tsx @@ -11,6 +11,7 @@ import DocNeutralColors from "@/components/docs/doc-neutral-colors"; import CodeBlockSugarHighExample from "@/components/previews/code-block-sugar-high-example"; import { CodeBlockSelectPkg } from "@/components/code-block/blocks/copy-with-select-package-manager"; import { CodeBlockTabsPkg } from "@/components/code-block/blocks/copy-with-tabs-package-manager"; +import LineAnchorsExample from "@/components/previews/line-anchors-example"; import { CreateReactApp, @@ -55,6 +56,7 @@ const MDXCustomComponents: MDXComponents = { CreateReactApp, HighlightsAvailable, DocNeutralColors, + LineAnchorsExample, }; export { MDXCustomComponents }; diff --git a/apps/website/src/components/previews/line-anchors-example.tsx b/apps/website/src/components/previews/line-anchors-example.tsx new file mode 100644 index 0000000..f18ec52 --- /dev/null +++ b/apps/website/src/components/previews/line-anchors-example.tsx @@ -0,0 +1,23 @@ +import { ArrowUpRightIcon } from "lucide-react"; +import { buttonVariants } from "@/components/ui/button"; +import { ExternalLink } from "@/components/ui/external-link"; + +const LineAnchorsExample = () => { + return ( + + Highlight line 5 of the code block + + + ); +}; + +export default LineAnchorsExample; diff --git a/apps/website/src/docs/shiki/line-anchors.mdx b/apps/website/src/docs/shiki/line-anchors.mdx index cde768a..01e4fed 100644 --- a/apps/website/src/docs/shiki/line-anchors.mdx +++ b/apps/website/src/docs/shiki/line-anchors.mdx @@ -1,26 +1,39 @@ --- title: Line Anchors -description: Add clickable anchor links to line numbers for easy reference and sharing. +description: Add unique IDs to each line in code blocks, enabling URL-based navigation to specific lines with visual highlighting. category: [Shiki, Markdown, MDX] --- - - -```ts lineNumbers -import { highlight } from "@/utils/shiki/highlight"; -import { lineAnchors } from "@/utils/shiki/transformers/line-anchors"; + +```ts title="Code block with 'example' prefix" prefix="example" lineNumbers const code = `console.log('Hello World')`; const highlighter = await highlight(); const html = highlighter.codeToHtml(code, { lang: "javascript", - transformers: [lineAnchors()], + transformers: [lineAnchors({ addPrefix: "example" })], }); ``` - +```html {3,6,9} title="Output HTML" +
+  
+    
+      
+    
+    
+      
+    
+    
+      
+    
+  
+
+``` -The `lineAnchors` transformer adds clickable anchor links to line numbers. Each line gets an ID like `L1`, `L2`, etc. + + + ## Installation @@ -34,13 +47,17 @@ The `lineAnchors` transformer adds clickable anchor links to line numbers. Each -`shiki-line-anchors` styles are defined in the `shiki.css` file: +2. `shiki-line-anchors` styles are defined in the `shiki.css` file: -2. Import the transformer in your `rehypeShiki` plugin: +## Usage + +### `shikijs/rehype` + +1. Import the transformer in your `rehypeShiki` plugin: -```ts title="Rehype Shiki Options" +```ts {1,5} title="Rehype Shiki Options" import { lineAnchors } from "@/utils/shiki/transformers/line-anchors"; const rehypeShikiOptions: RehypeShikiCoreOptions = { @@ -51,12 +68,26 @@ const rehypeShikiOptions: RehypeShikiCoreOptions = { export { rehypeShikiOptions }; ``` -## Usage +2. In your Markdown or MDX files add the `prefix` option to your code blocks: + +````mdx +```javascript prefix="example" +console.log("Hello World"); +``` +```` -Once enabled, users can: +### `highlight` -- Click line numbers to navigate to that line -- Share URLs with line anchors: `yoursite.com/docs#L3` -- Link to specific lines: `[See line 5](#L5)` +Import the transformer in your [`highlight()`](/docs/shiki/highlighter) function with `addPrefix` property: + +```ts {2,8} title="Using lineAnchors with highlighter" +import { highlight } from "@/utils/shiki"; +import { lineAnchors } from "@/utils/shiki/transformers/line-anchors"; -The clicked line will be highlighted with a blue background and the URL will update to include the line anchor. +const code = `console.log('hello')`; +const highlighter = await highlight(); +const html = highlighter.codeToHtml(code, { + //... + transformers: [lineAnchors({ addPrefix: "example" })], +}); +``` diff --git a/apps/website/src/mdx/plugins/rehypeShiki.ts b/apps/website/src/mdx/plugins/rehypeShiki.ts index 5404c4f..f4894f4 100644 --- a/apps/website/src/mdx/plugins/rehypeShiki.ts +++ b/apps/website/src/mdx/plugins/rehypeShiki.ts @@ -7,6 +7,7 @@ import { } from "@/utils/shiki/transformers/add-to-pre-element"; import { showLineNumbers } from "@/utils/shiki/transformers/show-line-numbers"; import { wordWrapContent } from "@/utils/shiki/transformers/word-wrap"; +import { lineAnchors } from "@/utils/shiki/transformers/line-anchors"; // Shiki Core Transformers import { @@ -25,6 +26,7 @@ const rehypeShikiOptions: RehypeShikiCoreOptions = { addLanguageProperty(), wordWrapContent(), showLineNumbers(), + lineAnchors(), transformerNotationDiff(), transformerNotationFocus({ classActivePre: "shiki-has-focused", diff --git a/apps/website/src/styles/shiki.css b/apps/website/src/styles/shiki.css index 8f80338..b5b2e85 100644 --- a/apps/website/src/styles/shiki.css +++ b/apps/website/src/styles/shiki.css @@ -94,20 +94,12 @@ pre.shiki-has-focused:hover .line:not(.focused) { } /* Shiki Line Anchors */ -pre.shiki-line-anchors { - scroll-margin-top: 2rem; -} - pre.shiki-line-anchors .line:target { - @apply relative inline-block w-full bg-blue-300/15 dark:bg-blue-500/15; - &::before { - content: ""; - @apply absolute left-0 top-0 h-full w-1 bg-blue-500 dark:bg-blue-400; - } + @apply scroll-mt-14 bg-blue-400/15! dark:bg-blue-600/15!; } pre.shiki-line-numbers.shiki-line-anchors code .line::before { - @apply cursor-pointer select-none transition-colors; + @apply cursor-pointer transition-colors select-none; } pre.shiki-line-numbers.shiki-line-anchors code .line::before:hover { diff --git a/apps/website/src/utils/shiki/transformers/line-anchors.ts b/apps/website/src/utils/shiki/transformers/line-anchors.ts index f9bc440..898bc24 100644 --- a/apps/website/src/utils/shiki/transformers/line-anchors.ts +++ b/apps/website/src/utils/shiki/transformers/line-anchors.ts @@ -1,23 +1,21 @@ import type { ShikiTransformer } from "shiki"; -/** - * Transformer to add anchor links to line numbers - * Allows users to link to specific lines in code blocks - * Usage: Automatically works with lineNumbers transformer - * Result: Each line gets an id like "L1", "L2", etc. - */ -const lineAnchors = (): ShikiTransformer => { +interface LineAnchorsOptions { + addPrefix?: string; +} + +const lineAnchors = ({ addPrefix }: LineAnchorsOptions = {}): ShikiTransformer => { return { name: "LineAnchors", line(node, line) { - // Add id attribute to each line for anchor linking - node.properties.id = `L${line}`; - - // Add data attribute for styling targeted lines + const rawMeta = this.options.meta?.__raw; + if (!rawMeta) return; + const prefix = rawMeta.match(/prefix=(["'])(.*?)\1/)?.[2] ?? addPrefix; + if (!prefix) return; + node.properties.id = `${prefix}-l${line}`; node.properties["data-line"] = line; }, pre(node) { - // Add class to enable anchor styling const existingClass = node.properties.class; if (Array.isArray(existingClass)) { existingClass.push("shiki-line-anchors"); From 6238c0db680d2c03ae983e2c25f81ac323067d0e Mon Sep 17 00:00:00 2001 From: pheralb Date: Fri, 20 Feb 2026 11:24:12 +0000 Subject: [PATCH 2/5] feat: add public registry data and update ``RegistryGroup`` type --- .../src/components/registry/build-registry.ts | 24 ++++++++++++++++++- apps/website/src/components/registry/types.ts | 4 +++- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/apps/website/src/components/registry/build-registry.ts b/apps/website/src/components/registry/build-registry.ts index b713e97..dc358dc 100644 --- a/apps/website/src/components/registry/build-registry.ts +++ b/apps/website/src/components/registry/build-registry.ts @@ -64,9 +64,29 @@ const buildRegistry = () => { }; }; +const generatePublicRegistryData = () => { + log(chalk.bgGray("|- 📦 Generating registry for @code-blocks/cli...")); + + const publicData = RegistryData.map((component) => ({ + title: component.title, + fileType: component.fileType, + fileSource: component.fileSource, + group: component.group, + shadcnRegistry: component.shadcnRegistry, + })); + + writeFileSync( + "./public/registry-cli.json", + JSON.stringify(publicData, null, 2), + "utf-8", + ); + + log(chalk.green("|- ✅ registry-cli.json generated successfully")); +}; + const main = () => { try { - log(chalk.bgGray("|- 📦 Generating registry...")); + log(chalk.bgGray("|- 📦 Generating shadcn/ui registry...")); const result = buildRegistry(); writeFileSync("./registry.json", JSON.stringify(result, null, 2), "utf-8"); @@ -75,6 +95,8 @@ const main = () => { log(chalk.bgGray("|- 📦 Running shadcn CLI...")); execSync("shadcn build", { stdio: "inherit" }); log(chalk.green("|- ✅ shadcn build completed successfully")); + + generatePublicRegistryData(); } catch (error) { console.log( chalk.red.bold( diff --git a/apps/website/src/components/registry/types.ts b/apps/website/src/components/registry/types.ts index dd4061d..cfb6e99 100644 --- a/apps/website/src/components/registry/types.ts +++ b/apps/website/src/components/registry/types.ts @@ -10,6 +10,8 @@ export type RegistryType = | "registry:file" | "registry:component"; +export type RegistryGroup = "shiki" | "sugar-high" | "blocks"; + export interface ShadcnRegistry { name: string; title?: string; @@ -30,7 +32,7 @@ export interface RegistryComponent { fileType: Languages; shadcnRegistry: ShadcnRegistry; fileSource: string; - group?: string; + group?: RegistryGroup; reactComponent?: LazyExoticComponent; exampleFileSource?: string; } From cc4d31460ab1caecdfad631055a4f9982bb555cf Mon Sep 17 00:00:00 2001 From: pheralb Date: Fri, 20 Feb 2026 11:46:48 +0000 Subject: [PATCH 3/5] feat: add CLI registry build script and separate registry-cli data generation --- apps/website/package.json | 1 + apps/website/public/registry-cli.json | 360 ++++++++++++++++++ .../components/registry/build-registry-cli.ts | 36 ++ .../src/components/registry/build-registry.ts | 31 +- package.json | 1 + 5 files changed, 407 insertions(+), 22 deletions(-) create mode 100644 apps/website/public/registry-cli.json create mode 100644 apps/website/src/components/registry/build-registry-cli.ts diff --git a/apps/website/package.json b/apps/website/package.json index 951de86..d0098b9 100644 --- a/apps/website/package.json +++ b/apps/website/package.json @@ -7,6 +7,7 @@ "build": "next build", "build:prod": "pnpm build:registry && pnpm build", "build:registry": "tsx ./src/components/registry/check-registry.ts && tsx ./src/components/registry/build-registry.ts", + "build:registry:cli": "tsx ./src/components/registry/check-registry.ts && tsx ./src/components/registry/build-registry-cli.ts", "build:cc": "content-collections build", "start": "next start", "check:lint": "eslint ./src", diff --git a/apps/website/public/registry-cli.json b/apps/website/public/registry-cli.json new file mode 100644 index 0000000..29d5b09 --- /dev/null +++ b/apps/website/public/registry-cli.json @@ -0,0 +1,360 @@ +[ + { + "title": "Shiki Highlighter", + "fileType": "ts", + "fileSource": "src/utils/shiki/highlight.ts", + "group": "shiki", + "shadcnRegistry": { + "name": "shiki-highlighter", + "type": "registry:lib", + "dependencies": [ + "shiki", + "@shikijs/themes", + "@shikijs/langs" + ], + "registryDependencies": [ + "shiki-css" + ], + "target": "src/utils/shiki/highlight.ts" + } + }, + { + "title": "Sugar High Highlighter", + "fileType": "ts", + "fileSource": "src/utils/sugar-high/highlight.ts", + "group": "sugar-high", + "shadcnRegistry": { + "name": "sugar-high-highlighter", + "type": "registry:lib", + "dependencies": [ + "sugar-high" + ], + "registryDependencies": [ + "sugar-high-css" + ], + "target": "src/utils/sugar-high/highlight.ts" + } + }, + { + "title": "Copy to Clipboard", + "fileType": "ts", + "fileSource": "src/utils/copy.ts", + "shadcnRegistry": { + "name": "copy-to-clipboard", + "type": "registry:lib", + "target": "src/utils/copy.ts" + } + }, + { + "title": "React to Text Converter", + "fileType": "ts", + "fileSource": "src/utils/react-to-text.ts", + "shadcnRegistry": { + "name": "react-to-text", + "type": "registry:lib", + "target": "src/utils/react-to-text.ts" + } + }, + { + "title": "Package Manager Store", + "fileType": "ts", + "fileSource": "src/stores/packageManager.ts", + "shadcnRegistry": { + "name": "package-manager-store", + "type": "registry:file", + "target": "src/stores/packageManager.ts", + "dependencies": [ + "zustand" + ] + } + }, + { + "title": "Shiki CSS", + "fileType": "css", + "fileSource": "src/styles/shiki.css", + "group": "shiki", + "shadcnRegistry": { + "name": "shiki-css", + "type": "registry:file", + "target": "src/styles/shiki.css" + } + }, + { + "title": "Sugar High CSS", + "fileType": "css", + "fileSource": "src/styles/sugar-high.css", + "group": "sugar-high", + "shadcnRegistry": { + "name": "sugar-high-css", + "type": "registry:file", + "target": "src/styles/sugar-high.css" + } + }, + { + "title": "Shiki Transformer - Show Line Numbers", + "fileType": "ts", + "fileSource": "src/utils/shiki/transformers/show-line-numbers.ts", + "group": "shiki", + "shadcnRegistry": { + "name": "shiki-show-line-numbers", + "type": "registry:lib", + "dependencies": [ + "shiki" + ], + "target": "src/utils/shiki/transformers/show-line-numbers.ts" + } + }, + { + "title": "Shiki Transformer - Word Wrap", + "fileType": "ts", + "fileSource": "src/utils/shiki/transformers/word-wrap.ts", + "group": "shiki", + "shadcnRegistry": { + "name": "shiki-word-wrap", + "type": "registry:lib", + "dependencies": [ + "shiki" + ], + "target": "src/utils/shiki/transformers/word-wrap.ts" + } + }, + { + "title": "Shiki Transformer - Add to Pre Element", + "fileType": "ts", + "fileSource": "src/utils/shiki/transformers/add-to-pre-element.ts", + "group": "shiki", + "shadcnRegistry": { + "name": "shiki-add-to-pre-element", + "type": "registry:lib", + "dependencies": [ + "shiki" + ], + "target": "src/utils/shiki/transformers/add-to-pre-element.ts" + } + }, + { + "title": "Shiki Transformer - Line Anchors", + "fileType": "ts", + "fileSource": "src/utils/shiki/transformers/line-anchors.ts", + "group": "shiki", + "shadcnRegistry": { + "name": "shiki-line-anchors", + "type": "registry:lib", + "dependencies": [ + "shiki" + ], + "registryDependencies": [ + "shiki-css", + "shiki-show-line-numbers" + ], + "target": "src/utils/shiki/transformers/line-anchors.ts" + } + }, + { + "title": "Code Block - Structure", + "fileType": "tsx", + "fileSource": "src/components/code-block/code-block.tsx", + "shadcnRegistry": { + "name": "code-block", + "type": "registry:component", + "dependencies": [ + "lucide-react", + "@react-symbols/icons" + ], + "target": "src/components/code-block/code-block.tsx" + } + }, + { + "title": "Code Block - MDX Shiki", + "fileType": "tsx", + "fileSource": "src/components/code-block/mdx/pre-shiki.tsx", + "group": "shiki", + "shadcnRegistry": { + "name": "mdx-shiki", + "type": "registry:component", + "devDependencies": [ + "@types/mdx" + ], + "registryDependencies": [ + "react-to-text", + "copy-to-clipboard", + "code-block" + ], + "target": "src/components/code-block/mdx/pre-shiki.tsx" + } + }, + { + "title": "Code Block - MDX Sugar High", + "fileType": "tsx", + "fileSource": "src/components/code-block/mdx/pre-sugar-high.tsx", + "group": "sugar-high", + "shadcnRegistry": { + "name": "mdx-sugar-high", + "type": "registry:component", + "devDependencies": [ + "@types/mdx" + ], + "registryDependencies": [ + "react-to-text", + "sugar-high-highlighter", + "copy-to-clipboard", + "code-block" + ], + "target": "src/components/code-block/mdx/pre-sugar-high.tsx" + } + }, + { + "title": "Code Block - Client Shiki", + "fileType": "tsx", + "fileSource": "src/components/code-block/client/shiki.tsx", + "group": "shiki", + "shadcnRegistry": { + "name": "client-shiki", + "type": "registry:component", + "dependencies": [ + "shiki" + ], + "registryDependencies": [ + "shiki-highlighter" + ], + "target": "src/components/code-block/client/shiki.tsx" + } + }, + { + "title": "Code Block - Client Sugar High", + "fileType": "tsx", + "fileSource": "src/components/code-block/client/sugar-high.tsx", + "group": "sugar-high", + "shadcnRegistry": { + "name": "client-sugar-high", + "type": "registry:component", + "registryDependencies": [ + "sugar-high-highlighter" + ], + "target": "src/components/code-block/client/sugar-high.tsx" + } + }, + { + "title": "Code Block - Client Sugar High + Line Numbers", + "fileType": "tsx", + "fileSource": "src/components/code-block/client/sugar-high.tsx", + "group": "sugar-high", + "shadcnRegistry": { + "name": "client-sugar-high-line-numbers", + "type": "registry:component", + "registryDependencies": [ + "sugar-high-highlighter" + ], + "target": "src/components/code-block/client/sugar-high.tsx" + } + }, + { + "title": "Copy Button", + "fileType": "tsx", + "fileSource": "src/components/code-block/copy-button.tsx", + "shadcnRegistry": { + "name": "copy-button", + "type": "registry:component", + "dependencies": [ + "lucide-react" + ], + "registryDependencies": [ + "copy-to-clipboard" + ], + "target": "src/components/code-block/copy-button.tsx" + } + }, + { + "title": "Blocks - Inline Code", + "fileType": "tsx", + "fileSource": "src/components/code-block/blocks/inline-code.tsx", + "group": "blocks", + "shadcnRegistry": { + "name": "block-inline-code", + "type": "registry:block", + "registryDependencies": [ + "shiki-highlighter", + "copy-button", + "code-block", + "client-shiki" + ], + "target": "src/components/code-block/blocks/inline-code.tsx" + } + }, + { + "title": "Blocks - Copy + Text Morph", + "fileType": "tsx", + "fileSource": "src/components/code-block/blocks/copy-text-morph.tsx", + "group": "blocks", + "shadcnRegistry": { + "name": "block-copy-text-morph", + "type": "registry:block", + "dependencies": [ + "motion" + ], + "target": "src/components/code-block/blocks/copy-text-morph.tsx" + } + }, + { + "title": "Blocks - Select Package Manager", + "fileType": "tsx", + "fileSource": "src/components/code-block/blocks/copy-with-select-package-manager.tsx", + "group": "blocks", + "shadcnRegistry": { + "name": "block-select-package-manager", + "type": "registry:block", + "dependencies": [ + "@react-symbols/icons" + ], + "registryDependencies": [ + "shiki-highlighter", + "copy-button", + "code-block", + "client-shiki", + "package-manager-store" + ], + "target": "src/components/code-block/blocks/copy-with-select-package-manager.tsx" + } + }, + { + "title": "Blocks - Tabs Package Manager", + "fileType": "tsx", + "fileSource": "src/components/code-block/blocks/copy-with-tabs-package-manager.tsx", + "group": "blocks", + "shadcnRegistry": { + "name": "block-tabs-package-manager", + "type": "registry:block", + "dependencies": [ + "@react-symbols/icons" + ], + "registryDependencies": [ + "shiki-highlighter", + "copy-button", + "code-block", + "client-shiki", + "package-manager-store" + ], + "target": "src/components/code-block/blocks/copy-with-tabs-package-manager.tsx" + } + }, + { + "title": "Blocks - Multi Tabs", + "fileType": "tsx", + "fileSource": "src/components/code-block/blocks/multi-tabs.tsx", + "group": "blocks", + "shadcnRegistry": { + "name": "block-multi-tabs", + "type": "registry:block", + "dependencies": [ + "@react-symbols/icons" + ], + "registryDependencies": [ + "shiki-highlighter", + "copy-button", + "code-block", + "client-shiki" + ], + "target": "src/components/code-block/blocks/multi-tabs.tsx" + } + } +] \ No newline at end of file diff --git a/apps/website/src/components/registry/build-registry-cli.ts b/apps/website/src/components/registry/build-registry-cli.ts new file mode 100644 index 0000000..d8e2f97 --- /dev/null +++ b/apps/website/src/components/registry/build-registry-cli.ts @@ -0,0 +1,36 @@ +import chalk from "chalk"; + +import { RegistryData } from "./data"; +import { writeFileSync } from "node:fs"; + +const log = console.log; + +const generatePublicRegistryData = () => { + log(chalk.bgGray("|- 📦 Generating registry for @code-blocks/cli...")); + + const publicData = RegistryData.map((component) => ({ + title: component.title, + fileType: component.fileType, + fileSource: component.fileSource, + group: component.group, + shadcnRegistry: component.shadcnRegistry, + })); + + const currentDate = new Date().toLocaleString("en-GB", { + day: "2-digit", + month: "2-digit", + year: "numeric", + hour: "2-digit", + minute: "2-digit", + }); + + writeFileSync( + "./public/registry-cli.json", + JSON.stringify(publicData, null, 2), + "utf-8", + ); + + log(chalk.green(`|- ✅ registry-cli.json generated successfully (${currentDate})`)); +}; + +generatePublicRegistryData(); diff --git a/apps/website/src/components/registry/build-registry.ts b/apps/website/src/components/registry/build-registry.ts index dc358dc..fba6be9 100644 --- a/apps/website/src/components/registry/build-registry.ts +++ b/apps/website/src/components/registry/build-registry.ts @@ -64,26 +64,6 @@ const buildRegistry = () => { }; }; -const generatePublicRegistryData = () => { - log(chalk.bgGray("|- 📦 Generating registry for @code-blocks/cli...")); - - const publicData = RegistryData.map((component) => ({ - title: component.title, - fileType: component.fileType, - fileSource: component.fileSource, - group: component.group, - shadcnRegistry: component.shadcnRegistry, - })); - - writeFileSync( - "./public/registry-cli.json", - JSON.stringify(publicData, null, 2), - "utf-8", - ); - - log(chalk.green("|- ✅ registry-cli.json generated successfully")); -}; - const main = () => { try { log(chalk.bgGray("|- 📦 Generating shadcn/ui registry...")); @@ -94,9 +74,16 @@ const main = () => { log(chalk.bgGray("|- 📦 Running shadcn CLI...")); execSync("shadcn build", { stdio: "inherit" }); - log(chalk.green("|- ✅ shadcn build completed successfully")); - generatePublicRegistryData(); + const currentDate = new Date().toLocaleString("en-GB", { + day: "2-digit", + month: "2-digit", + year: "numeric", + hour: "2-digit", + minute: "2-digit", + }); + + log(chalk.green(`|- ✅ shadcn build completed successfully (${currentDate})`)); } catch (error) { console.log( chalk.red.bold( diff --git a/package.json b/package.json index d8d6e44..523f6b9 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "website:lint": "pnpm --filter @code-blocks/website run check:lint", "website:build": "pnpm --filter @code-blocks/website run build", "website:build-cc": "pnpm --filter @code-blocks/website run build:cc", + "website:build-cli-registry": "pnpm --filter @code-blocks/website run build:registry:cli", "website:registry": "pnpm --filter @code-blocks/website run check:registry", "website:build-registry": "pnpm --filter @code-blocks/website run build:registry", "typecheck": "turbo run typecheck", From 74d9826949848babb53fa81f3d7fb879b46fed30 Mon Sep 17 00:00:00 2001 From: pheralb Date: Fri, 20 Feb 2026 12:59:04 +0000 Subject: [PATCH 4/5] docs: update usage section and improve formatting in add-properties documentation --- apps/website/src/docs/shiki/add-properties.mdx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/apps/website/src/docs/shiki/add-properties.mdx b/apps/website/src/docs/shiki/add-properties.mdx index 824c485..bb2c5c4 100644 --- a/apps/website/src/docs/shiki/add-properties.mdx +++ b/apps/website/src/docs/shiki/add-properties.mdx @@ -40,11 +40,15 @@ const html = highlighter.codeToHtml(code, { ### Manual -1. Create a `src/utils/shiki/transformers/add-to-pre-element.ts` file and add the following code: +Create a `src/utils/shiki/transformers/add-to-pre-element.ts` file and add the following code: -2. Update your `rehypeShiki` plugin to use the new transformers: +## Usage + +### ``shikijs/rehype`` + +Update your `rehypeShiki` plugin to use the new transformers: ```ts {8} import { @@ -60,7 +64,7 @@ const rehypeShikiOptions: RehypeShikiCoreOptions = { export { rehypeShikiOptions }; ``` -## Usage +### Properties ### `addTitleProperty` From 43c05cb7186adf2a061c46329a28b3e91eb82ead Mon Sep 17 00:00:00 2001 From: pheralb Date: Fri, 20 Feb 2026 13:55:04 +0000 Subject: [PATCH 5/5] docs: update documentation for Shiki transformers with usage examples and style customization --- .../website/src/docs/shiki/add-properties.mdx | 2 +- apps/website/src/docs/shiki/line-numbers.mdx | 46 +++++++++++++++---- .../website/src/docs/shiki/meta-highlight.mdx | 20 ++++---- apps/website/src/docs/shiki/notation-diff.mdx | 18 ++++---- .../website/src/docs/shiki/notation-focus.mdx | 18 ++++---- 5 files changed, 69 insertions(+), 35 deletions(-) diff --git a/apps/website/src/docs/shiki/add-properties.mdx b/apps/website/src/docs/shiki/add-properties.mdx index bb2c5c4..39aeb4b 100644 --- a/apps/website/src/docs/shiki/add-properties.mdx +++ b/apps/website/src/docs/shiki/add-properties.mdx @@ -64,7 +64,7 @@ const rehypeShikiOptions: RehypeShikiCoreOptions = { export { rehypeShikiOptions }; ``` -### Properties +## Properties ### `addTitleProperty` diff --git a/apps/website/src/docs/shiki/line-numbers.mdx b/apps/website/src/docs/shiki/line-numbers.mdx index db7e487..e74f572 100644 --- a/apps/website/src/docs/shiki/line-numbers.mdx +++ b/apps/website/src/docs/shiki/line-numbers.mdx @@ -31,9 +31,17 @@ const html = highlighter.codeToHtml(code, { -2. Import the transformer in your `rehypeShiki` plugin: +2. Customize the styles in your CSS file if needed: -```ts title="Rehype Shiki Options" + + +## Usage + +### `shikijs/rehype` + +1. Import the transformer in your `rehypeShiki` plugin: + +```ts {1,5} title="Rehype Shiki Options" import { showLineNumbers } from "@/utils/shiki/transformers/show-line-numbers"; const rehypeShikiOptions: RehypeShikiCoreOptions = { @@ -44,16 +52,36 @@ const rehypeShikiOptions: RehypeShikiCoreOptions = { export { rehypeShikiOptions }; ``` -3. Customize the styles in your CSS file if needed: - - - -## Usage - -To enable line numbers in your code blocks, add the `lineNumbers` property to the code block in your MDX files: +2. To enable line numbers in your code blocks, add the `lineNumbers` property to the code block in your MDX files: ````mdx title="MDX Code Block with Line Numbers" ```ts lineNumbers // Your TypeScript code here ``` ```` + +### `highlight` + +1. Import the transformer in your [`highlight()`](/docs/shiki/highlighter): + +```ts {2,8} title="Using lineNumbers with highlighter" +import { highlight } from "@/utils/shiki"; +import { showLineNumbers } from "@/utils/shiki/transformers/show-line-numbers"; + +const code = `console.log('hello')`; +const highlighter = await highlight(); +const html = highlighter.codeToHtml(code, { + //... + transformers: [showLineNumbers()], +}); +``` + +2. Add ``shiki-line-numbers`` class to the `
` element:
+
+```html
+
+  
+    
+  
+

+```
diff --git a/apps/website/src/docs/shiki/meta-highlight.mdx b/apps/website/src/docs/shiki/meta-highlight.mdx
index 7a7eae3..33b6bca 100644
--- a/apps/website/src/docs/shiki/meta-highlight.mdx
+++ b/apps/website/src/docs/shiki/meta-highlight.mdx
@@ -27,7 +27,15 @@ const html = highlighter.codeToHtml(code, {
   command="@shikijs/transformers -D"
 />
 
-2. Set up `transformerMetaHighlight`:
+2. Customize the styles in your CSS file if needed:
+
+
+
+## Usage
+
+### `shikijs/rehype`
+
+1. Set up `transformerMetaHighlight`:
 
 ```ts title="Shiki Notation Highlight Transformer"
 import { transformerMetaHighlight } from "@shikijs/transformers";
@@ -44,16 +52,10 @@ const rehypeShikiOptions: RehypeShikiCoreOptions = {
 export { rehypeShikiOptions };
 ```
 
-3. Customize the styles in your CSS file if needed:
-
-
-
-## Usage
-
-To highlight specific lines in your code blocks, use the `meta` prop with the line numbers you want to highlight. For example, to highlight lines 2 and 3, use the following syntax:
+2. To highlight specific lines in your code blocks, use the `meta` prop with the line numbers you want to highlight. For example, to highlight lines 2 and 3, use the following syntax:
 
 ````mdx {1}
-``` {4,5}
+```{4,5}
 const code = `console.log('hello')`;
 const highlighter = await highlight();
 const html = highlighter.codeToHtml(code, {
diff --git a/apps/website/src/docs/shiki/notation-diff.mdx b/apps/website/src/docs/shiki/notation-diff.mdx
index f87636f..08bb6ec 100644
--- a/apps/website/src/docs/shiki/notation-diff.mdx
+++ b/apps/website/src/docs/shiki/notation-diff.mdx
@@ -28,7 +28,15 @@ const html = highlighter.codeToHtml(code, {
   command="@shikijs/transformers -D"
 />
 
-2. Set up `transformerNotationDiff`:
+2. Customize the styles in your CSS file if needed:
+
+
+
+## Usage
+
+### `shikijs/rehype`
+
+1. Set up `transformerNotationDiff`:
 
 ```ts title="Shiki Notation Highlight Transformer"
 import { transformerNotationDiff } from "@shikijs/transformers";
@@ -41,13 +49,7 @@ const rehypeShikiOptions: RehypeShikiCoreOptions = {
 export { rehypeShikiOptions };
 ```
 
-3. Customize the styles in your CSS file if needed:
-
-
-
-## Usage
-
-To add diff notation to your code blocks, use the `[!code ++]` and `[!code --]` markers to indicate added and removed lines, respectively:
+2. To add diff notation to your code blocks, use the `[!code ++]` and `[!code --]` markers to indicate added and removed lines, respectively:
 
 ````mdx {5,6}
 ```
diff --git a/apps/website/src/docs/shiki/notation-focus.mdx b/apps/website/src/docs/shiki/notation-focus.mdx
index 8c143b0..17c5e89 100644
--- a/apps/website/src/docs/shiki/notation-focus.mdx
+++ b/apps/website/src/docs/shiki/notation-focus.mdx
@@ -27,7 +27,15 @@ const html = highlighter.codeToHtml(code, {
   command="@shikijs/transformers -D"
 />
 
-2. Set up `transformerNotationFocus`:
+2. Customize the styles in your CSS file if needed:
+
+
+
+## Usage
+
+### `shikijs/rehype`
+
+1. Set up `transformerNotationFocus`:
 
 ```ts title="Shiki Notation Highlight Transformer"
 import { transformerNotationFocus } from "@shikijs/transformers";
@@ -44,13 +52,7 @@ const rehypeShikiOptions: RehypeShikiCoreOptions = {
 export { rehypeShikiOptions };
 ```
 
-3. Customize the styles in your CSS file if needed:
-
-
-
-## Usage
-
-To add diff notation to your code blocks, use the `[!code ++]` and `[!code --]` markers to indicate added and removed lines, respectively:
+2. Use the `[!code ++]` and `[!code --]` markers to indicate added and removed lines, respectively:
 
 ````mdx {3}
 ```