how to use preview plugins?

[linojon]

hi, i'm looking for an example how to use remark/plugins. Specifically, want to add variables to the markdown and view the rendered values in the preview (https://github.com/mrzmmr/remark-variables) (and/or write my own simple preprocessor that does a .replaceAll on the markdown text before it is passed to the previewer.) Thanks!.

[jaywcjlove]

@linojon example:

• https://github.com/uiwjs/react-md-editor/issues/318#issuecomment-1002351325
• https://github.com/uiwjs/react-md-editor/issues/335#issuecomment-1084523247
• https://github.com/uiwjs/react-md-editor/issues/375#issuecomment-1099253093
• https://github.com/uiwjs/react-md-editor/issues/371#issuecomment-1093643912
• https://github.com/uiwjs/react-md-editor/issues/366#issuecomment-1092041069

<MDEditor 
  previewOptions={{
    remarkPlugins: [],
    rehypePlugins: []
  }}
/>

• remarkPlugins (Array.<Plugin>, default: [])
  List of remark plugins to use. See the next section for examples on how to pass options
• rehypePlugins (Array.<Plugin>, default: [])
  List of rehype plugins to use. See the next section for examples on how to pass options

[linojon]

Thank you for your quick reply. I've solved my question using examples you provided. Heres a codesandbox in case someone else wants a simple example https://codesandbox.io/s/nextjs-example-react-md-editor-forked-b06oxc?file=/pages/index.js