Document preview is ineffective

[zipang]

If i have a text document, with resource heavy markdown extensions like videos, or maths formulas like in HackMD, every time i change a single letter in my text, the whole preview zone is repainted with innerHTML being overwritten. So, all the embedded iframes are destroyed and recreated again. It is not usable at all. Demo here : https://zipang.github.io/markdown-bundle/demo/simplemde.html

[zipang]

I have a PR for this issue here : https://github.com/sparksuite/simplemde-markdown-editor/pull/634

[fresheneesz]

@zipang How do you use markdown extensions with simplemde? I don't see that in the documentation.

[zipang]

@fresheneesz : you can specify your own markdown renderer when invoking simplemde :

var simplemde = new SimpleMDE({
    element: document.getElementById("editor"),
    // (...)
    previewRender: myMarkdownRenderer
});

In my markdown-bundle demo i use markdown-it with a bunch of plugins like latex..

[luongs3]

@zipang i did the same, but it's not working. I use this package https://github.com/iktakahiro/markdown-it-katex#readme for rendering latex.

const mk = require('@iktakahiro/markdown-it-katex')
const md = require('markdown-it')()
  .use(mk)
.......................

<SimpleMDE
  previewRender: function (plainText) {
              return md.render(plainText) // Returns HTML from a custom parser
            },
................

But It didnt render latex. Could you help me, please

[csbarnes]

@luongs3 make sure you include the css file in the readme <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css">

edit: it also looks like you are using https://github.com/RIP21/react-simplemde-editor, you will want previewRender to be passed inside the options prop.

<SimpleMDE
      options={{
        previewRender(text) {
          return md.render(text);
        },
      }}
/>

[cory-haser]

FUTURE USERS: simplemde.togglePreview();