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:

• <> signs formatting  #318 (comment)
• Code Highlight not working with rehype-sanitize plugin #335 (comment)
• Keyboard Enter doesn't take to new line in preview mode #375 (comment)
• The anchor link #371 (comment)
• Im not being able to avoid convert html tags from the markdown editor to html tags in preview mode #366 (comment)

<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