Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

In React pages, imported Markdown does not highlight code blocks #7698

Closed
6 of 7 tasks
zzjin opened this issue Jun 28, 2022 · 4 comments · Fixed by #7705
Closed
6 of 7 tasks

In React pages, imported Markdown does not highlight code blocks #7698

zzjin opened this issue Jun 28, 2022 · 4 comments · Fixed by #7705
Labels
documentation The issue is related to the documentation of Docusaurus

Comments

@zzjin
Copy link

zzjin commented Jun 28, 2022

Have you 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

when write content in pages using feature Importing Markdown with 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

  • Public source code:
  • Public site URL:
  • Docusaurus version used:
  • Environment name and version (e.g. Chrome 89, Node.js 16.4):
  • Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

  • I'd be willing to fix this bug myself.
@zzjin zzjin added bug An error in the Docusaurus core causing instability or issues with its execution status: needs triage This issue has not been triaged by maintainers labels Jun 28, 2022
@zzjin zzjin mentioned this issue Jun 28, 2022
Closed
@Josh-Cena Josh-Cena changed the title Pages with import mdx not render Multi-language code blocks In React pages, imported Markdown does not highlight code blocks Jun 28, 2022
@Josh-Cena Josh-Cena added status: needs more information There is not enough information to take action on the issue. and removed status: needs triage This issue has not been triaged by maintainers labels Jun 28, 2022
@Josh-Cena
Copy link
Collaborator

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.

@Josh-Cena
Copy link
Collaborator

Josh-Cena commented Jun 28, 2022 •
edited
Loading

Ah, this is because the triple-backtick-to-prism-code-block conversion is done through an MDXProvider layer which is currently undocumented (apart from the recently-added "global scope", which doesn't really explain its implications about adding the provider wrapper). You would need to add the wrapper around imported Markdown yourself.

+ 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 theme-classic which adds the MDXContent wrapper to all Markdown files, but that looks like a really dirty hack...

@Josh-Cena Josh-Cena added closed: working as intended This issue is intended behavior, there's no need to take any action. documentation The issue is related to the documentation of Docusaurus and removed status: needs more information There is not enough information to take action on the issue. bug An error in the Docusaurus core causing instability or issues with its execution closed: working as intended This issue is intended behavior, there's no need to take any action. labels Jun 28, 2022
@slorber
Copy link
Collaborator

slorber commented Jun 29, 2022

@slorber Do you think we should do anything about this? It looks working as intended to me and just requires some documentation.

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

@Josh-Cena
Copy link
Collaborator

Same as what I thought. Would write some docs tonight.

@Josh-Cena Josh-Cena mentioned this issue Jun 30, 2022
Merged
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
documentation The issue is related to the documentation of Docusaurus
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

docs: mention MDXContent facebook/docusaurus
3 participants
@zzjin @slorber @Josh-Cena