From 141fc6430286235e3348f10549af550890eb8c26 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 9 Dec 2025 18:00:46 +0000 Subject: [PATCH 1/3] Initial plan From e7759a2ab9e64be84594723a116910aedc36b21c Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 9 Dec 2025 18:11:40 +0000 Subject: [PATCH 2/3] Add code highlighting for "use workflow" and "use step" directives in Effortless Setup section Co-authored-by: pranaygp <1797812+pranaygp@users.noreply.github.com> --- docs/app/(home)/components/code-block.tsx | 37 ++++++++++++++++++- docs/app/(home)/components/implementation.tsx | 1 + docs/app/global.css | 5 +++ 3 files changed, 41 insertions(+), 2 deletions(-) diff --git a/docs/app/(home)/components/code-block.tsx b/docs/app/(home)/components/code-block.tsx index 17c0123c9..6e46b3151 100644 --- a/docs/app/(home)/components/code-block.tsx +++ b/docs/app/(home)/components/code-block.tsx @@ -1,4 +1,4 @@ -import { codeToHtml } from 'shiki'; +import { codeToHtml, type ShikiTransformer } from 'shiki'; import { cn } from '@/lib/utils'; type CodeBlockProps = { @@ -7,9 +7,41 @@ type CodeBlockProps = { codeblock?: { className?: string; }; + /** + * List of strings to highlight in the code block. + * These will be given a special highlight style. + */ + highlight?: string[]; }; -export const CodeBlock = async ({ code, lang, codeblock }: CodeBlockProps) => { +/** + * Creates a Shiki transformer that highlights specific strings in code. + */ +function createHighlightTransformer(patterns: string[]): ShikiTransformer { + return { + name: 'highlight-strings', + span(node, _line, _col, _lineElement, token) { + // Check if the token content matches any of the patterns + const tokenContent = token.content; + if (patterns.some((pattern) => tokenContent.includes(pattern))) { + this.addClassToHast(node, 'highlighted-code'); + } + }, + }; +} + +export const CodeBlock = async ({ + code, + lang, + codeblock, + highlight, +}: CodeBlockProps) => { + const transformers: ShikiTransformer[] = []; + + if (highlight && highlight.length > 0) { + transformers.push(createHighlightTransformer(highlight)); + } + const html = await codeToHtml(code, { lang, themes: { @@ -17,6 +49,7 @@ export const CodeBlock = async ({ code, lang, codeblock }: CodeBlockProps) => { dark: 'github-dark-default', }, defaultColor: false, + transformers, }); return ( diff --git a/docs/app/(home)/components/implementation.tsx b/docs/app/(home)/components/implementation.tsx index 04047b254..5e4f29f29 100644 --- a/docs/app/(home)/components/implementation.tsx +++ b/docs/app/(home)/components/implementation.tsx @@ -77,6 +77,7 @@ export const Implementation = () => ( className: 'shadow-none !bg-background dark:bg-sidebar h-full rounded-md with-line-numbers', }} + highlight={['use workflow', 'use step']} /> ))} diff --git a/docs/app/global.css b/docs/app/global.css index 3671c7cca..0d7a8a757 100644 --- a/docs/app/global.css +++ b/docs/app/global.css @@ -157,3 +157,8 @@ .with-checks.with-line-numbers code .line::before { @apply left-5!; } + +/* Highlighted code style for directive strings like "use workflow" and "use step" */ +.highlighted-code { + @apply bg-primary/15 rounded px-1 py-0.5; +} From 71cce8f409149320f5361e67b772df21ab4f2826 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 9 Dec 2025 19:35:33 +0000 Subject: [PATCH 3/3] Use Shiki notation transformer for code highlighting consistency Co-authored-by: pranaygp <1797812+pranaygp@users.noreply.github.com> --- docs/app/(home)/components/code-block.tsx | 39 ++----------------- docs/app/(home)/components/implementation.tsx | 5 +-- docs/app/global.css | 5 --- docs/package.json | 1 + pnpm-lock.yaml | 35 +++++++++++++---- 5 files changed, 35 insertions(+), 50 deletions(-) diff --git a/docs/app/(home)/components/code-block.tsx b/docs/app/(home)/components/code-block.tsx index 6e46b3151..08c9aa35b 100644 --- a/docs/app/(home)/components/code-block.tsx +++ b/docs/app/(home)/components/code-block.tsx @@ -1,4 +1,5 @@ -import { codeToHtml, type ShikiTransformer } from 'shiki'; +import { transformerNotationHighlight } from '@shikijs/transformers'; +import { codeToHtml } from 'shiki'; import { cn } from '@/lib/utils'; type CodeBlockProps = { @@ -7,41 +8,9 @@ type CodeBlockProps = { codeblock?: { className?: string; }; - /** - * List of strings to highlight in the code block. - * These will be given a special highlight style. - */ - highlight?: string[]; }; -/** - * Creates a Shiki transformer that highlights specific strings in code. - */ -function createHighlightTransformer(patterns: string[]): ShikiTransformer { - return { - name: 'highlight-strings', - span(node, _line, _col, _lineElement, token) { - // Check if the token content matches any of the patterns - const tokenContent = token.content; - if (patterns.some((pattern) => tokenContent.includes(pattern))) { - this.addClassToHast(node, 'highlighted-code'); - } - }, - }; -} - -export const CodeBlock = async ({ - code, - lang, - codeblock, - highlight, -}: CodeBlockProps) => { - const transformers: ShikiTransformer[] = []; - - if (highlight && highlight.length > 0) { - transformers.push(createHighlightTransformer(highlight)); - } - +export const CodeBlock = async ({ code, lang, codeblock }: CodeBlockProps) => { const html = await codeToHtml(code, { lang, themes: { @@ -49,7 +18,7 @@ export const CodeBlock = async ({ dark: 'github-dark-default', }, defaultColor: false, - transformers, + transformers: [transformerNotationHighlight()], }); return ( diff --git a/docs/app/(home)/components/implementation.tsx b/docs/app/(home)/components/implementation.tsx index 5e4f29f29..9317a367d 100644 --- a/docs/app/(home)/components/implementation.tsx +++ b/docs/app/(home)/components/implementation.tsx @@ -10,7 +10,7 @@ import { } from "./steps" export async function userSignup(email) { - "use workflow"; + "use workflow"; // [!code highlight] // Create the user and send the welcome email const user = await createUser(email); @@ -30,7 +30,7 @@ export async function userSignup(email) { import { FatalError } from 'workflow'; export async function sendWelcomeEmail(email) { - "use step" + "use step"; // [!code highlight] const resend = new Resend('YOUR_API_KEY'); @@ -77,7 +77,6 @@ export const Implementation = () => ( className: 'shadow-none !bg-background dark:bg-sidebar h-full rounded-md with-line-numbers', }} - highlight={['use workflow', 'use step']} /> ))} diff --git a/docs/app/global.css b/docs/app/global.css index 0d7a8a757..3671c7cca 100644 --- a/docs/app/global.css +++ b/docs/app/global.css @@ -157,8 +157,3 @@ .with-checks.with-line-numbers code .line::before { @apply left-5!; } - -/* Highlighted code style for directive strings like "use workflow" and "use step" */ -.highlighted-code { - @apply bg-primary/15 rounded px-1 py-0.5; -} diff --git a/docs/package.json b/docs/package.json index 8fd00027a..556cc0d17 100644 --- a/docs/package.json +++ b/docs/package.json @@ -21,6 +21,7 @@ "@mdx-js/mdx": "^3.1.1", "@radix-ui/react-presence": "^1.1.5", "@radix-ui/react-tabs": "^1.1.13", + "@shikijs/transformers": "3.19.0", "@tailwindcss/postcss": "^4.1.13", "@types/mdx": "^2.0.13", "@types/node": "catalog:", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 10b0c75e5..be901a1d6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -108,6 +108,9 @@ importers: '@radix-ui/react-tabs': specifier: ^1.1.13 version: 1.1.13(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) + '@shikijs/transformers': + specifier: 3.19.0 + version: 3.19.0 '@tailwindcss/postcss': specifier: ^4.1.13 version: 4.1.13 @@ -5785,6 +5788,9 @@ packages: '@shikijs/core@3.15.0': resolution: {integrity: sha512-8TOG6yG557q+fMsSVa8nkEDOZNTSxjbbR8l6lF2gyr6Np+jrPlslqDxQkN6rMXCECQ3isNPZAGszAfYoJOPGlg==} + '@shikijs/core@3.19.0': + resolution: {integrity: sha512-L7SrRibU7ZoYi1/TrZsJOFAnnHyLTE1SwHG1yNWjZIVCqjOEmCSuK2ZO9thnRbJG6TOkPp+Z963JmpCNw5nzvA==} + '@shikijs/engine-javascript@3.13.0': resolution: {integrity: sha512-Ty7xv32XCp8u0eQt8rItpMs6rU9Ki6LJ1dQOW3V/56PKDcpvfHPnYFbsx5FFUP2Yim34m/UkazidamMNVR4vKg==} @@ -5812,8 +5818,8 @@ packages: '@shikijs/themes@3.15.0': resolution: {integrity: sha512-8ow2zWb1IDvCKjYb0KiLNrK4offFdkfNVPXb1OZykpLCzRU6j+efkY+Y7VQjNlNFXonSw+4AOdGYtmqykDbRiQ==} - '@shikijs/transformers@3.15.0': - resolution: {integrity: sha512-Hmwip5ovvSkg+Kc41JTvSHHVfCYF+C8Cp1omb5AJj4Xvd+y9IXz2rKJwmFRGsuN0vpHxywcXJ1+Y4B9S7EG1/A==} + '@shikijs/transformers@3.19.0': + resolution: {integrity: sha512-e6vwrsyw+wx4OkcrDbL+FVCxwx8jgKiCoXzakVur++mIWVcgpzIi8vxf4/b4dVTYrV/nUx5RjinMf4tq8YV8Fw==} '@shikijs/types@3.13.0': resolution: {integrity: sha512-oM9P+NCFri/mmQ8LoFGVfVyemm5Hi27330zuOBp0annwJdKH1kOLndw3zCtAVDehPLg9fKqoEx3Ht/wNZxolfw==} @@ -5821,6 +5827,9 @@ packages: '@shikijs/types@3.15.0': resolution: {integrity: sha512-BnP+y/EQnhihgHy4oIAN+6FFtmfTekwOLsQbRw9hOKwqgNy8Bdsjq8B05oAt/ZgvIWWFrshV71ytOrlPfYjIJw==} + '@shikijs/types@3.19.0': + resolution: {integrity: sha512-Z2hdeEQlzuntf/BZpFG8a+Fsw9UVXdML7w0o3TgSXV3yNESGon+bs9ITkQb3Ki7zxoXOOu5oJWqZ2uto06V9iQ==} + '@shikijs/vscode-textmate@10.0.2': resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==} @@ -18106,6 +18115,13 @@ snapshots: '@types/hast': 3.0.4 hast-util-to-html: 9.0.5 + '@shikijs/core@3.19.0': + dependencies: + '@shikijs/types': 3.19.0 + '@shikijs/vscode-textmate': 10.0.2 + '@types/hast': 3.0.4 + hast-util-to-html: 9.0.5 + '@shikijs/engine-javascript@3.13.0': dependencies: '@shikijs/types': 3.13.0 @@ -18153,10 +18169,10 @@ snapshots: dependencies: '@shikijs/types': 3.15.0 - '@shikijs/transformers@3.15.0': + '@shikijs/transformers@3.19.0': dependencies: - '@shikijs/core': 3.15.0 - '@shikijs/types': 3.15.0 + '@shikijs/core': 3.19.0 + '@shikijs/types': 3.19.0 '@shikijs/types@3.13.0': dependencies: @@ -18168,6 +18184,11 @@ snapshots: '@shikijs/vscode-textmate': 10.0.2 '@types/hast': 3.0.4 + '@shikijs/types@3.19.0': + dependencies: + '@shikijs/vscode-textmate': 10.0.2 + '@types/hast': 3.0.4 + '@shikijs/vscode-textmate@10.0.2': {} '@sindresorhus/is@7.1.0': {} @@ -21752,7 +21773,7 @@ snapshots: '@formatjs/intl-localematcher': 0.6.2 '@orama/orama': 3.1.16 '@shikijs/rehype': 3.15.0 - '@shikijs/transformers': 3.15.0 + '@shikijs/transformers': 3.19.0 estree-util-value-to-estree: 3.5.0 github-slugger: 2.0.0 hast-util-to-estree: 3.1.3 @@ -21782,7 +21803,7 @@ snapshots: '@formatjs/intl-localematcher': 0.6.2 '@orama/orama': 3.1.16 '@shikijs/rehype': 3.15.0 - '@shikijs/transformers': 3.15.0 + '@shikijs/transformers': 3.19.0 estree-util-value-to-estree: 3.5.0 github-slugger: 2.0.0 hast-util-to-estree: 3.1.3