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>