Custom magic comments for CodeBlock with raw-loader not working

[felipecrs]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

I think the title says everything. Custom magic comments are working on plain markdown code blocks but not on MDX CodeBlock with raw-loader.

myfile.yaml contents:

# hide-next-line
docsTitle: My File
# hide-start
docsDescription: |
    My File description
# hide-end
this: should-show

Reproducible demo

https://github.com/felipecrs/shiki-docusaurus-test/commit/49e3e8af2021f86df74a122b35c13908b16459c0

Steps to reproduce

Described above.

Expected behavior

To work as it works for plain md code blocks.

Actual behavior

Your environment

No response

Self-service

• I'd be willing to fix this bug myself.

[felipecrs]

PS: I'm opening this as a bug because documentation doesn't mention anything about custom magic comments being unsupported in CodeBlocks with raw-loader. In fact the default magic comment works (highlight-next-line for example).

[Josh-Cena]

If the default magic comments work but not custom ones, it should probably be a bug. Otherwise I was not so sure ^^

[slorber]

You are using a shiki preset that is overriding our default code block

This shiki preset does not implement magic comments:
https://github.com/shikijs/twoslash/blob/main/packages/docusaurus-preset-shiki-twoslash/docusaurus-theme-shiki-twoslash/theme/CodeBlock/index.js

Please open a new repro without using any third-party plugin/preset, otherwise it can't be considered as a bug in docusaurus core

[felipecrs]

@slorber I'm not using the shiki preset for reproducing this issue. The branch I referred to in the example doesn't contain shiki stuff although the repo name.

[felipecrs]

• https://github.com/felipecrs/shiki-docusaurus-test/tree/test-hide-block

[felipecrs]

I also noticed this issue first in my production website (internal), which doesn't use Shiki, and only after that I created the reproduction repo.

[slorber]

I can reproduce, minimal repro: https://stackblitz.com/edit/github-ebe6eo-zlw6c8?file=src%2Fpages%2Findex.md

It seems related to the showLineNumbers props:

This prop overrides the display: none; CSS you set:

I think it's working as intended: the CSS className is added properly to the line, it's just "ignored" due to styling conflicts. So it's not a magic comments bug but rather a conflict between our theme CSS and your custom CSS, which is hard to avoid, unfortunately.

I'd like your custom CSS to automatically override our theme by default: but that belongs to a more general issue about CSS insertion order: #3678

---

The workaround is simply to use !important:

.code-block-hide-line {
  display: none !important;
}

[felipecrs]

Thanks a lot for the investigation, @slorber. And the workaround works great!