From a606ebc2d041ba27de4d56a15beef21fb711a439 Mon Sep 17 00:00:00 2001 From: Karl Horky Date: Mon, 9 Dec 2024 12:29:04 +0100 Subject: [PATCH 1/3] Pass code and lang in as props, parameter --- docs/packages/next.md | 44 ++++++++++++++++++++++++++++--------------- 1 file changed, 29 insertions(+), 15 deletions(-) diff --git a/docs/packages/next.md b/docs/packages/next.md index 22de328f..cae89d0f 100644 --- a/docs/packages/next.md +++ b/docs/packages/next.md @@ -13,19 +13,26 @@ Serverless Runtime is recommended. Since Server Components are server-only, you can use the bundled highlighter without worrying the bundle size. ```tsx -import { codeToHtml } from 'shiki' +import { type BundledLanguage, codeToHtml } from 'shiki' export default function Page() { return (
- + + {'console.log("Hello World")'} +
) } -async function CodeBlock() { - const out = await codeToHtml('console.log("Hello World")', { - lang: 'ts', +type Props = { + children: string; + lang: BundledLanguage; +} + +async function CodeBlock(props: Props) { + const out = await codeToHtml(props.children, { + lang: props.lang, theme: 'github-dark' }) @@ -41,19 +48,26 @@ You can also call `codeToHast` to get the HTML abstract syntax tree, and render import { toJsxRuntime } from 'hast-util-to-jsx-runtime' import { Fragment } from 'react' import { jsx, jsxs } from 'react/jsx-runtime' -import { codeToHast } from 'shiki' +import { type BundledLanguage, codeToHast } from 'shiki' export default function Page() { return (
- + + {'console.log("Hello World")'} +
) } -async function CodeBlock() { - const out = await codeToHast('console.log("Hello World")', { - lang: 'ts', +type Props = { + children: string; + lang: BundledLanguage; +} + +async function CodeBlock(props: Props) { + const out = await codeToHtml(props.children, { + lang: props.lang, theme: 'github-dark' }) @@ -80,11 +94,11 @@ Create a `shared.ts` for highlighter: import { toJsxRuntime } from 'hast-util-to-jsx-runtime' import { Fragment } from 'react' import { jsx, jsxs } from 'react/jsx-runtime' -import { codeToHast } from 'shiki/bundle/web' +import { type BundledLanguage, codeToHast } from 'shiki/bundle/web' -export async function highlight(code: string) { +export async function highlight(code: string, lang: BundledLanguage) { const out = await codeToHast(code, { - lang: 'ts', + lang: lang, theme: 'github-dark' }) @@ -107,7 +121,7 @@ export function CodeBlock({ initial }: { initial?: JSX.Element }) { const [nodes, setNodes] = useState(initial) useLayoutEffect(() => { - void highlight('console.log("Rendered on client")').then(setNodes) + void highlight('console.log("Rendered on client")', 'ts').then(setNodes) }, []) return nodes ??

Loading...

@@ -126,7 +140,7 @@ export default async function Page() { // `initial` is optional. return (
- +
) } From da2d7da4846dcf3706a7f67ccc42453ec1e71d6d Mon Sep 17 00:00:00 2001 From: Karl Horky Date: Mon, 9 Dec 2024 16:38:10 +0100 Subject: [PATCH 2/3] Attempt to fix lint problems --- docs/packages/next.md | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/docs/packages/next.md b/docs/packages/next.md index cae89d0f..57be8014 100644 --- a/docs/packages/next.md +++ b/docs/packages/next.md @@ -19,15 +19,18 @@ export default function Page() { return (
- {'console.log("Hello World")'} + {` + console.log("Hello") + console.log("World") + `}
) } -type Props = { - children: string; - lang: BundledLanguage; +interface Props { + children: string + lang: BundledLanguage } async function CodeBlock(props: Props) { @@ -54,15 +57,18 @@ export default function Page() { return (
- {'console.log("Hello World")'} + {` + console.log("Hello") + console.log("World") + `}
) } -type Props = { - children: string; - lang: BundledLanguage; +interface Props { + children: string + lang: BundledLanguage } async function CodeBlock(props: Props) { @@ -98,7 +104,7 @@ import { type BundledLanguage, codeToHast } from 'shiki/bundle/web' export async function highlight(code: string, lang: BundledLanguage) { const out = await codeToHast(code, { - lang: lang, + lang, theme: 'github-dark' }) From 0cd190ad3db1ca87aabb610edca7eac35cea6895 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Tue, 10 Dec 2024 11:20:24 +0800 Subject: [PATCH 3/3] chore: update --- docs/packages/next.md | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/docs/packages/next.md b/docs/packages/next.md index 57be8014..7ccd7450 100644 --- a/docs/packages/next.md +++ b/docs/packages/next.md @@ -13,16 +13,17 @@ Serverless Runtime is recommended. Since Server Components are server-only, you can use the bundled highlighter without worrying the bundle size. ```tsx -import { type BundledLanguage, codeToHtml } from 'shiki' +import type { BundledLanguage } from 'shiki' +import { codeToHtml } from 'shiki' export default function Page() { return (
- {` - console.log("Hello") - console.log("World") - `} + {[ + 'console.log("Hello")', + 'console.log("World")', + ].join('\n')}
) @@ -48,19 +49,20 @@ async function CodeBlock(props: Props) { You can also call `codeToHast` to get the HTML abstract syntax tree, and render it using [`hast-util-to-jsx-runtime`](https://github.com/syntax-tree/hast-util-to-jsx-runtime). With this method, you can render your own `pre` and `code` components. ```tsx +import type { BundledLanguage } from 'shiki' import { toJsxRuntime } from 'hast-util-to-jsx-runtime' import { Fragment } from 'react' import { jsx, jsxs } from 'react/jsx-runtime' -import { type BundledLanguage, codeToHast } from 'shiki' +import { codeToHast } from 'shiki' export default function Page() { return (
- {` - console.log("Hello") - console.log("World") - `} + {[ + 'console.log("Hello")', + 'console.log("World")', + ].join('\n')}
) @@ -97,10 +99,11 @@ We can start by creating a client `CodeBlock` component. Create a `shared.ts` for highlighter: ```ts +import type { BundledLanguage } from 'shiki/bundle/web' import { toJsxRuntime } from 'hast-util-to-jsx-runtime' import { Fragment } from 'react' import { jsx, jsxs } from 'react/jsx-runtime' -import { type BundledLanguage, codeToHast } from 'shiki/bundle/web' +import { codeToHast } from 'shiki/bundle/web' export async function highlight(code: string, lang: BundledLanguage) { const out = await codeToHast(code, {