React Code View

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.

Install

npm install react-code-view

Configure Webpack

// webpack.config.js
export default {
  module: {
    rules: [
      {
        test: /\.md$/,
        loader: 'react-code-view/webpack-md-loader'
      }
    ]
  }
};

Options

{
  "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

export default {
  module: {
    rules: [
      {
        test: /\.md$/,
        use:[
          loader: 'react-code-view/webpack-md-loader',
          options:{
            parseLanguages: ['typescript','rust']
          }
        ]
      }
    ]
  }
};

Usage

import CodeView from 'react-code-view';
import { Button } from 'rsuite';

import 'react-code-view/styles/react-code-view.css';

return (
  <CodeView
    dependencies={{
      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-->

Props

<CodeView>

| 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 |