Skip to content

[Website] Add inline code syntax highlighting - #10428

Merged
tobias-tengler merged 2 commits into
mainfrom
tte/inline-code-highlighting
Sep 24, 2026
Merged

tobias-tengler merged 2 commits into
mainfrom
tte/inline-code-highlighting

Conversation

@tobias-tengler

Copy link
Copy Markdown
Member

No description provided.

- Highlight inline code that starts with a `#!lang` prefix (e.g. `#!sdl directive @OneOf on INPUT_OBJECT`) using the same shiki theme as code blocks.
- Apply the prefix to code snippets across the docs; single identifiers stay plain.
- Use `shell` instead of `bash` for command-line snippets so they render without a language label.
- Document both conventions in the website README.
Copilot AI lite review requested due to automatic review settings September 24, 2026 12:12
@github-actions github-actions Bot added 📚 documentation This issue is about working on our documentation. 🌶️ website labels Sep 24, 2026

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot review overview

🟡 Changes recommended

Add stories covering valid and invalid inline-language highlighting paths.

Get a fresh assessment by requesting another Copilot review.

Review effort: Lite
Findings: 1 Medium severity

Open (1)
What changed in this PR

Adds opt-in inline syntax highlighting with Shiki and updates website documentation examples.

Changes:

  • Adds remark parsing and async inline highlighting.
  • Shares syntax-highlighting theme configuration.
  • Annotates documentation and blog code examples.
File Reviewed change
website/​src/​remark/​inlineCodeLanguage.mjs Parses inline language prefixes.
website/​src/​mdx-plugins.ts Registers inline-code processing.
website/​src/​design-system/​languages.ts Defines the shared Shiki theme.
website/​src/​design-system/​InlineCode.tsx Adds inline Shiki highlighting.
website/​src/​design-system/​CodeBlock.tsx Uses the shared theme.
website/​src/​components/​PackageInstallation.tsx Uses shell highlighting.
website/​README.md Documents inline highlighting syntax.
website/​content/​docs/​strawberryshake/​tooling.md Annotates code examples.
website/​content/​docs/​strawberryshake/​scalars.md Annotates code examples.
website/​content/​docs/​strawberryshake/​get-started/​index.md Updates code examples.
website/​content/​docs/​strawberryshake/​get-started/​console.md Updates code examples.
website/​content/​docs/​skills/​troubleshooting.md Updates code examples.
website/​content/​docs/​skills/​reference.md Updates code examples.
website/​content/​docs/​skills/​installing-skills.md Updates code examples.
website/​content/​docs/​skills/​index.md Updates code examples.
website/​content/​docs/​skills/​getting-started.md Updates code examples.
website/​content/​docs/​skills/​authoring-skills.md Updates code examples.
website/​content/​docs/​nitro/​open-telemetry/​operation-monitoring.md Updates code examples.
website/​content/​docs/​nitro/​open-telemetry/​logging.md Updates code examples.
website/​content/​docs/​nitro/​nitro-services.md Updates code examples.
website/​content/​docs/​nitro/​integrations/​express.md Updates code examples.
website/​content/​docs/​nitro/​cli/​stage.md Annotates code examples.
website/​content/​docs/​nitro/​cli/​fusion.md Annotates code examples.
website/​content/​docs/​nitro/​apis/​operation-reporting.md Updates code examples.
website/​content/​docs/​nitro/​apis/​fusion.md Updates code examples.
website/​content/​docs/​nitro/​apis/​client-registry.md Updates code examples.
website/​content/​docs/​mocha/​transports/​rabbitmq.md Updates code examples.
website/​content/​docs/​mocha/​transports/​postgres.md Annotates code examples.
website/​content/​docs/​mocha/​transports/​in-memory.md Updates code examples.
website/​content/​docs/​mocha/​transports/​azure-service-bus.md Updates code examples.
website/​content/​docs/​mocha/​scheduling.md Updates code examples.
website/​content/​docs/​mocha/​sagas.md Updates code examples.
website/​content/​docs/​mocha/​routing-and-endpoints.md Annotates code examples.
website/​content/​docs/​mocha/​reliability.md Updates code examples.
website/​content/​docs/​mocha/​quick-start.md Updates code examples.
website/​content/​docs/​mocha/​middleware-and-pipelines.md Annotates code examples.
website/​content/​docs/​mocha/​mediator/​pipeline-and-middleware.md Annotates code examples.
website/​content/​docs/​mocha/​mediator/​index.md Annotates code examples.
website/​content/​docs/​mocha/​hosting.md Updates code examples.
website/​content/​docs/​mocha/​handlers-and-consumers.md Annotates code examples.
website/​content/​docs/​mocha/​handler-registration.md Annotates code examples.
website/​content/​docs/​mocha/​exception-policies.md Annotates code examples.
website/​content/​docs/​mocha/​diagnostics.md Annotates code examples.
website/​content/​docs/​hotchocolate/​server/​options.md Annotates code examples.
website/​content/​docs/​hotchocolate/​server/​instrumentation.md Updates code examples.
website/​content/​docs/​hotchocolate/​server/​http-transport.md Annotates code examples.
website/​content/​docs/​hotchocolate/​server/​files.md Updates code examples.
website/​content/​docs/​hotchocolate/​server/​endpoints.md Annotates code examples.
website/​content/​docs/​hotchocolate/​server/​cache-control.md Updates code examples.
website/​content/​docs/​hotchocolate/​security/​request-limits.md Annotates code examples.
website/​content/​docs/​hotchocolate/​security/​cost-analysis.md Annotates code examples.
website/​content/​docs/​hotchocolate/​performance/​automatic-persisted-operations.md Updates code examples.
website/​content/​docs/​hotchocolate/​migrating/​migrate-from-16-6-to-16-7.md Annotates code examples.
website/​content/​docs/​hotchocolate/​migrating/​migrate-from-15-to-16.md Annotates code examples.
website/​content/​docs/​hotchocolate/​migrating/​migrate-from-13-to-14.md Annotates code examples.
website/​content/​docs/​hotchocolate/​migrating/​migrate-from-12-to-13.md Annotates code examples.
website/​content/​docs/​hotchocolate/​get-started-with-graphql-in-net-core.md Updates code examples.
website/​content/​docs/​hotchocolate/​fetching-data/​projections.md Annotates code examples.
website/​content/​docs/​hotchocolate/​fetching-data/​pagination.md Annotates code examples.
website/​content/​docs/​hotchocolate/​fetching-data/​batching/​index.md Annotates code examples.
website/​content/​docs/​hotchocolate/​fetching-data/​batching/​dataloader.md Annotates code examples.
website/​content/​docs/​hotchocolate/​defining-a-schema/​scalars.md Annotates code examples.
website/​content/​docs/​hotchocolate/​defining-a-schema/​relay.md Annotates code examples.
website/​content/​docs/​hotchocolate/​defining-a-schema/​mutations.md Annotates code examples.
website/​content/​docs/​hotchocolate/​defining-a-schema/​input-object-types.md Annotates code examples.
website/​content/​docs/​hotchocolate/​defining-a-schema/​directives.md Annotates code examples.
website/​content/​docs/​hotchocolate/​defining-a-schema/​arguments.md Annotates code examples.
website/​content/​docs/​hotchocolate/​adapters/​openapi.md Updates and annotates code examples.
website/​content/​docs/​hotchocolate/​adapters/​mcp.md Updates code examples.
website/​content/​docs/​fusion/​subscriptions.md Annotates code examples.
website/​content/​docs/​fusion/​source-schema-extensions.md Annotates code examples.
website/​content/​docs/​fusion/​schema-exposure-and-evolution.md Annotates code examples.
website/​content/​docs/​fusion/​migration/​migrating-from-schema-stitching.md Annotates code examples.
website/​content/​docs/​fusion/​migration/​migrate-from-16-5-to-16-6.md Annotates code examples.
website/​content/​docs/​fusion/​migration/​migrate-from-15-to-16.md Annotates code examples.
website/​content/​docs/​fusion/​migration/​coming-from-apollo-federation.md Annotates code examples.
website/​content/​docs/​fusion/​local-development.md Updates code examples.
website/​content/​docs/​fusion/​interface-objects.md Annotates code examples.
website/​content/​docs/​fusion/​guides/​first-party-api.md Updates code examples.
website/​content/​docs/​fusion/​getting-started.md Updates code examples.
website/​content/​docs/​fusion/​entities-and-lookups.md Annotates code examples.
website/​content/​docs/​fusion/​directives-reference.md Annotates code examples.
website/​content/​docs/​fusion/​deployment-and-ci-cd.md Updates code examples.
website/​content/​docs/​fusion/​data-requirements-and-mapping.md Annotates code examples.
website/​content/​docs/​fusion/​cost-analysis.md Annotates code examples.
website/​content/​docs/​fusion/​connectors/​apollofederation.md Annotates code examples.
website/​content/​docs/​fusion/​composition.md Annotates code examples.
website/​content/​docs/​fusion/​cli.md Annotates code examples.
website/​content/​docs/​fusion/​batching.md Annotates code examples.
website/​content/​docs/​fusion/​adding-a-subgraph.md Updates code examples.
website/​content/​docs/​fusion/​adapters/​mcp.md Updates code examples.
website/​content/​blog/​2026-07-12-fusion-16-5.md Updates code examples.
website/​content/​blog/​2026-06-24-graphqlconf-2026.md Updates code examples.
website/​content/​blog/​2026-06-11-open-your-graphql-api-for-the-rest.md Updates code examples.
website/​content/​blog/​2026-06-06-newsletter-may-2026.md Updates code examples.
website/​content/​blog/​2026-06-05-introducing-skillz.md Updates code examples.
website/​content/​blog/​2026-05-28-mcp-hotchocolate-fusion.md Updates code examples.
website/​content/​blog/​2026-05-15-fusion-16.md Updates code examples.
website/​content/​blog/​2023-02-08-new-in-hot-chocolate-13.md Updates code examples.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread website/src/design-system/InlineCode.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

📚 documentation This issue is about working on our documentation. 🌶️ website

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants