React-markdown: How to wrap code blocks with custom HTML?

[JikkuJose]

Am trying to get the code block to have some styling using the div with those classes, but it seems the block is being created empty! Any ideas?

const exampleOne = `
# Hello

I am trying to work with React & markdown!

\`Hello\`

<blockquote>
    This blockquote will change based on the HTML settings above.
</blockquote>

<div class="bg-black-10 br2 pa2">

\`\`\`js
var React = require('react');
var Markdown = require('react-markdown');

React.render(
    <Markdown source="# Your markdown here" />,
    document.getElementById('content')
);
\`\`\`

</div>

`

export default exampleOne

[rexxars]

Yes, unfortunately the HTML support is basically broken in this regard.
You could instead override the code renderer:

const React = require('react')
const ReactDOM = require('react-dom')
const Markdown  = require('react-markdown')

const exampleOne = `
# Hello

I am trying to work with React & markdown!

\`Hello\`

<blockquote>
    This blockquote will change based on the HTML settings above.
</blockquote>

\`\`\`js
var React = require('react');
var Markdown = require('react-markdown');

React.render(
    <Markdown source="# Your markdown here" />,
    document.getElementById('content')
);
\`\`\`
`

const DefaultCodeRenderer = Markdown.renderers.code

const CodeRenderer = props => {
  return <div className="bg-black-10 br2 pa2"><DefaultCodeRenderer {...props} /></div>
}

ReactDOM.render(
  <Markdown source={exampleOne} renderers={{code: CodeRenderer}} />,
  document.getElementById('root')
)

[JikkuJose]

Thanks, but where can I find a list of all renderers?

[rexxars]

It's in the readme; https://github.com/rexxars/react-markdown/#node-types

[JikkuJose]

Wow, I missed that! Sorry to bother!