Skip to content

bug(docs): Syntax highlighting missing in dev mode for ExampleBlock code using markdown and code include #316

@JulianVallee

Description

@JulianVallee

Current behavior

When running the docs in dev mode (npm run dev), code blocks inside markdown files included via ExampleBlock (e.g. the custom languages example on https://vitepress-openapi.vercel.app/customizations/code-samples.html#custom-languages) render without or mostly broken syntax highlighting.

This seems to work correctly in production builds (npm run build && npm run preview).

Screenshot dev mode, no highlighting Image
Screenshot prod build, proper highlighting Image

Desired behavior

Syntax highlighting should work the same way in both dev and production modes.

Having it broken during dev mode is not a huge issue, but it can be misleading. Modifications to the useShiki composable should only affect the OpenAPI rendering part, but the missing highlighting definitely made me double-check I hadn't accidentally broken something while working on it.

Reproduction

No response

Steps to reproduce

  1. Clone the repo, run npm install
  2. Delete .vitepress/cache directory
  3. Run npm run dev
  4. Navigate to http://localhost:5173/customizations/code-samples.html
  5. Scroll to the "Custom Languages" example block
  6. Observe: no syntax highlighting on the code block
  7. Stop dev server, run npm run build && npm run preview
  8. Navigate to the same page, syntax highlighting works correctly

Logs and Error Messages

No response

Other Information

Tested on v0.1.13 with a clean state, fresh dependencies and VitePress cache. The issue appears to be specific to dev mode, production builds highlight correctly.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions