;
exampleFileSource?: string;
}
diff --git a/apps/website/src/docs/shiki/add-properties.mdx b/apps/website/src/docs/shiki/add-properties.mdx
index 824c485..39aeb4b 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`
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/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}
```
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");
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",