Docusaurus integration not working

[vecerek]

Hi there 👋 I'm trying to build a documentation site with this amazing tool. However upon following the getting started bootstrap from docusaurus and the shiki-twoslash setup for docusaurus, and having the following markdown page:

---
title: Markdown page example
---

# Markdown page example

You don't need React to write simple standalone pages.

```ts twoslash
const a = 123
// ---cut---
const b = 321
``` <!-- I cannot render this example properly without adding this HTML comment -->

My content gets rendered like this:

Have I missed something?

[vecerek]

Oh, wait a second... This does not work on a regular page but it does work in a page nested under /docs. Is this the expected behavior?

[felipecrs]

The same thing is observed here. Works for /docs, /blog but not for regular markdown pages or docs under different routes.

[felipecrs]

I created an example to illustrate the problem:

https://github.com/felipecrs/shiki-docusaurus-test

[lachieh]

I resolved this by specifying the plugin within all three preset-config sections, as well as in the top-level preset section.

import remarkShikiTwoSlash, { Options as RemarkShikiTwoslashOptions } from 'remark-shiki-twoslash'
const remarkShikiOptions: RemarkShikiTwoSlashOptions = {
  themes: ['github-light', 'github-dark'],
  // more shiki options
};

export default {
  presets: [
    [
      'classic',
      {
        docs: {
          // ...
          beforeDefaultRemarkPlugins: [[remarkShikiTwoSlash, remarkShikiOptions]],
        },
        pages: {
          // ...
          beforeDefaultRemarkPlugins: [[remarkShikiTwoSlash, remarkShikiOptions]],
        },
        blog: {
          // ...
          beforeDefaultRemarkPlugins: [[remarkShikiTwoSlash, remarkShikiOptions]],
        },
      }
    ],
    ['docusaurus-preset-shiki-twoslash', remarkShikiOptions]
    // ... rest of config