Render markdown within a component

[asaf]

Hey,

Is it possible to render markdown from a JSX component, then include this component within an MD file?

I tried using remark-parse directly but some deps are missing, wondering if there's a better approach.

Thanks,
Asaf.

[lex111]

We don't have built-in way to do this, so choose rendering Markdown library that you like for this purpose and use it in your JSX component.

[sivaraam]

We don't have built-in way to do this, so choose rendering Markdown library that you like for this purpose and use it in your JSX component.

@lex111 Could you confirm if this is still the case in Docusaurus? Or is there some built-in way now to render Markdown within a JSX component.

For some context, we have a use case where we need to construct a Markdown document using a JSON input. We're trying to achieve this using a custom JSX component but are facing difficulties in identifying the right way to render the Markdown content similar to how docusaurus renders it (with anchors for headings etc.). Any help here would be nice 🙂

[jcubic]

It works with react-markdown. At first, it didn't render correctly, maybe something was cached but after restarting the server (I also stashed the change in git and looked into the changes later) everything seems to work fine.

I have a list of examples in a TypeScript file and try to render them with description using Markdown, the output is Markdown code.

import Markdown from 'react-markdown';
import CodeBlock from '@theme/CodeBlock';
import examples from './examples';

<ul className="list">
  {examples.map((example, index) => {
    return (
      <li key={index} className={index === activeSnippet ? 'active' : undefined}>
        <div className="example">
          <CodeBlock language="scheme" className="lips">
            {example.code}
          </CodeBlock>
        </div>
        <div className="description"><Markdown>{example.description}</Markdown></div>
      </li>
    );
  })}
</ul>

[slorber]

@jcubic when you say something doesn't work, please prove it with a https://docusaurus.new repro

I have used react-markdown in Docusaurus sites before and as far as I remember it worked perfectly fine, so you probably did something wrong. We can only find what you did wrong if a repro is provided.

[jcubic]

@slorber sorry about that (yet again) I tried to recreate the issue on CodeSandbox nd it works. And locally started the server and it also work, not sure why it was not working in the first place. I will edit my comment that show how to use the markdown in Docusaurs you can also delete you comment, so it's useful for people who search for the same thing.

[asaf]

@lex111 ye figured that out, 10x!

I tried to fetch MD in runtime from remote resources and render those in MD files,
Not the best idea for SEO and how Docusaurus works in general, I ended up writing a plugin for remote-content fetching, if anyone's interested.

cheers.

[lex111]

@asaf feel free to add your plugin to our list of plugins https://docusaurus.io/community/resources#community-plugins

[mshibanami]

For those who are interested in rendering & translating Markdown:
I made a Docusaurus plugin that extends the write-translations command for translating your component that has the same props as Translate. You can find the details here:
https://github.com/mshibanami/docusaurus-i18n-markup

It also has a tiny implementation of wrapping react-markdown.

You might find it useful. :)