Skip to content

A flexible playground for rendering Markdown and live editing React components.

License

Notifications You must be signed in to change notification settings

simonguo/react-code-view

Repository files navigation

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.

React Code View

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