React Code View can render source code in markdown documents. And brings you the ability to render React components with editable source code and live preview.
npm install react-code-view // webpack.config.jsexportdefault{module: {rules: [{test: /\.md$/,loader: 'react-code-view/webpack-md-loader'}]}};{"parseLanguages": [// Supported languages for highlight.js// default: "javascript", "bash", "xml", "css", "markdown", "less", "typescript"// See https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md],"htmlOptions": {// HTML Loader options// See https://github.com/webpack-contrib/html-loader#options},"markedOptions": {// Pass options to marked// See https://marked.js.org/using_advanced#options}}webpack.config.js
exportdefault{module: {rules: [{test: /\.md$/,use:[loader: 'react-code-view/webpack-md-loader',options:{parseLanguages: ['typescript','rust']}]}]}};importCodeViewfrom'react-code-view';import{Button}from'rsuite';import'react-code-view/styles/react-code-view.css';return(<CodeViewdependencies={{ Button }}>{require('./example.md')}</CodeView>);The source code is written in markdown, refer to example.md
Note: The code to be rendered must be placed between
<!--start-code-->and<!--end-code-->
| Name | Type | Default value | Description |
|---|---|---|---|
| afterCompile | (code: string) => string | Executed after compiling the code | |
| beforeCompile | (code: string) => string | Executed before compiling the code | |
| children | any | The code to be rendered is executed. Usually imported via markdown-loader | |
| compileOptions | object | defaultTransformOptions | https://github.com/alangpierce/sucrase#transforms |
| dependencies | object | Dependent objects required by the executed code | |
| editable | boolean | false | Renders a code editor that can modify the source code |
| editor | object | Editor properties | |
| onChange | (code?: string) => void | Callback triggered after code change | |
| onCloseEditor | () => void | Callback triggered when the editor is closed | |
| onOpenEditor | () => void | Callback triggered when the editor is opened | |
| renderExtraFooter | () => ReactNode | Customize the rendering footer | |
| renderToolbar | (buttons: ReactNode) => ReactNode | Customize the rendering toolbar | |
| sourceCode | string | The code to be rendered is executed | |
| theme | 'light' , 'dark' | 'light' | Code editor theme, applied to CodeMirror |