In React pages, imported Markdown does not highlight code blocks #7698
Comments
zzjin
added
bug
Josh-Cena
changed the title
Josh-Cena
added
status: needs more information
|
I can reproduce and can confirm it's not a Prism config thing. The minimum repro is: <!-- @site/src/components/_test.md -->
```yaml
apiVersion: operator.tigera.io/v1
kind: Installation
# Configures Calico.
metadata:
name: default
```// src/pages/index.tsx
+ import Test from "@site/src/components/_test.mdx";
export default function Home(): JSX.Element {
const {siteConfig} = useDocusaurusContext();
return (
<Layout
title={`Hello from ${siteConfig.title}`}
description="Description will go into a meta tag in <head />">
<HomepageHeader />
<main>
+ <Test />
<HomepageFeatures />
</main>
</Layout>
);
}This renders a plain text block. The exact same import works in a Markdown page. |
|
Ah, this is because the triple-backtick-to-prism-code-block conversion is done through an + import MDXContent from "@theme/MDXContent";
+ import Test from "@site/src/components/_test.mdx";
export default function Home(): JSX.Element {
const {siteConfig} = useDocusaurusContext();
return (
<Layout
title={`Hello from ${siteConfig.title}`}
description="Description will go into a meta tag in <head />">
<HomepageHeader />
<main>
+ <MDXContent>
+ <Test />
+ </MDXContent>
<HomepageFeatures />
</main>
</Layout>
);
}@slorber Do you think we should do anything about this? It looks working as intended to me and just requires some documentation. Technically we can "fix" this by chaining a loader in |
Josh-Cena
added
closed: working as intended
Not sure what to do. We could technically create a global MDX provider at the top of the tree. At the same time, we probably want to keep and encourage usage of MDXContent as close as possible to the actual MDX content (as it was requested by someone in #6842 + #5468 (comment)). Not having a default provider helped surface this issue instead of being fail-safe. So I would probably just add some doc for this specific edge case |
|
Same as what I thought. Would write some docs tonight. |
Have you read the Contributing Guidelines on issues?
Prerequisites
npm run clearoryarn clearcommand.rm -rf node_modules yarn.lock package-lock.jsonand re-installing packages.Description
when write content in pages using feature
Importing Markdownwith tabs code inside, code is not right highlighted.Reproducible demo
https://codesandbox.io/s/priceless-moon-5e2ptf?file=/src/pages/index.js
Steps to reproduce
import markdown mdx file with
<Tabs>Expected behavior
code blocks render colored rightly.
Actual behavior
code rendered all white/black without any highlights.
Your environment
Self-service
The text was updated successfully, but these errors were encountered: