I'm trying to create a component who display source's code passed as props to write documentation of a library i work on with Docusaurus. Like html <code> or exactly like this (the blue part) :
https://mui.com/components/radio-buttons/
This is a simplified code
import React from 'react'; export default function Preview({title, description, component, code, rawComponent}) { return ( <div> <div><h1>{title}</h1></div> <div>{description}</div> <div>{component}</div> <details> <summary>Source</summary> <pre> <code>{code}</code> </pre> </details> </div> ); } PROBLEM : i can't found how to pass code as props ....
<Preview title={'Quick start'} description={'Yes, this really is all you need to get started, as you can see in this live and interactive demo:'} component={<HomepageFeatures />} code={ ` import * as React from 'react'; import ReactDOM from 'react-dom'; import HomepageFeatures from 'newlib'; function App() { return <HomepageFeatures />; } `} /> this also doesn't work
<Preview title={'Quick start'} description={'Yes, this really is all you need to get started, as you can see in this live and interactive demo:'} component={<HomepageFeatures />} code={ ``` import * as React from 'react'; import ReactDOM from 'react-dom'; import HomepageFeatures from 'newlib'; function App() { return <HomepageFeatures />; } ``` } /> How to pass the code block ???
EDIT : a jsfildle https://jsfiddle.net/2pnc4htm/
it's work in pure reactJS, so it's Docusaurus who mess up ...
Thank you for reading
