Working with the Markdown component + Code snippets

[CodyBontecou]

How do you suggest we add code snippets within the Markdown component?

I attempted:

<Markdown>
    {`
    \`\`\`
        console.log('Hello World')
    \`\`\`
    `}
</Markdown>

But the styling was not great. Curious if there's a best practice defined somewhere.

[gabrielmfern]

We have a CodeBlock component https://react.email/docs/components/code-block

[CodyBontecou]

Hey @gabrielmfern. How should I nest the CodeBlock component within a Markdown component?

The following:

<Markdown>
    {`
        # Hello World 
        ${(<CodeBlock theme={dracula} language={'javascript'} code={`console.log('hello world')`} />)}
    `}
</Markdown>

Renders the CodeBlock as an [object Object]

[gabrielmfern]

Currently, I don't think you can. And I'm not sure we can add support for it so easily. The Markdown component is dependent on md-to-react-email which means it blocks us based on its implementation, even more, that its latest major release doesn't use React Email components anymore but plain HTML which isn't the best way to go here for us.

I'd recommend you move off of it or make a smaller custom version of your own here since I don't think it would be incredibly hard.