Add code highlighting for "use workflow" and "use step" directives in docs landing page

[Copilot]

Adds visual highlighting to the directive strings in the "Effortless Setup" code examples to make them stand out, using the same Shiki notation transformer approach as the rest of the docs for consistency.

Changes

• docs/app/(home)/components/code-block.tsx: Use transformerNotationHighlight from @shikijs/transformers for code highlighting
• docs/app/(home)/components/implementation.tsx: Added // [!code highlight] notation to the directive lines
• docs/package.json: Added @shikijs/transformers dependency

Usage

The code examples now use the standard Shiki notation for highlighting:

export async function userSignup(email) {
  "use workflow"; // [!code highlight]
  // ...
}

Screenshot

Original prompt

Update the landing page in the docs. Add a code higlight to the "use workflow" and "use step" directive usage in the code examples insude the "Effortless Steup" section

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 71cce8f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
example-nextjs-workflow-turbopack	Ready	Preview	Comment	Dec 9, 2025 7:37pm
example-nextjs-workflow-webpack	Ready	Preview	Comment	Dec 9, 2025 7:37pm
example-workflow	Ready	Preview	Comment	Dec 9, 2025 7:37pm
workbench-astro-workflow	Ready	Preview	Comment	Dec 9, 2025 7:37pm
workbench-express-workflow	Ready	Preview	Comment	Dec 9, 2025 7:37pm
workbench-fastify-workflow	Ready	Preview	Comment	Dec 9, 2025 7:37pm
workbench-hono-workflow	Ready	Preview	Comment	Dec 9, 2025 7:37pm
workbench-nitro-workflow	Ready	Preview	Comment	Dec 9, 2025 7:37pm
workbench-nuxt-workflow	Ready	Preview	Comment	Dec 9, 2025 7:37pm
workbench-sveltekit-workflow	Ready	Preview	Comment	Dec 9, 2025 7:37pm
workbench-vite-workflow	Error			Dec 9, 2025 7:37pm
workflow-docs	Ready	Preview	Comment	Dec 9, 2025 7:37pm

[pranaygp]

@copilot can we use the shiki transformer approach instead, just like we do in there set of the docs content pages. Let's be consistent with that - including visually consistency instead of creating new styling

[pranaygp]

@copilot I meant shiki, not shake (that was my autocorrect sorry)

[Copilot]

@copilot can we use the shiki transformer approach instead, just like we do in there set of the docs content pages. Let's be consistent with that - including visually consistency instead of creating n...

Updated to use the // [!code highlight] Shiki notation transformer approach with transformerNotationHighlight from @shikijs/transformers. This is now consistent with the docs content pages and uses the fumadocs shiki.css styles. See commit 71cce8f.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/​@​shikijs/​transformers@​3.15.0 ⏵ 3.19.0			+1	+4

View full report