examples/katex.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>MarkdownIME with KaTeX</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./simple.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.css" crossorigin="anonymous">
</head>

<body>
  <div contenteditable="true" id="editor">
    <p>This example implemented a <b>MathRenderer</b> so that you can use KaTeX to render Math Formula...</p>
    <p><b>Notice</b> this might not work with other rich editors, like TinyMCE.</p>
    <p>Try it out: $\LaTeX$</p>
  </div>

  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.js" crossorigin="anonymous"></script>
  <script src="../dist/MarkdownIME.js"></script>

  <script>
    function myAmazingMathRenderer(formula, isDisplayMode) {
      try {
        var element = MarkdownIME.elt('span', { "data-formula": formula, "title": formula })
        katex.render(formula, element, { throwOnError: true })
        element.firstChild.setAttribute('contenteditable', 'false')
        return element
      } catch (er) {
        console.error("KaTeX failed to render: " + formula)
        console.error(er)
      }

      return null
    }

    MarkdownIME.Bookmarklet() // lazy and dirty way to activate MarkdownIME
    MarkdownIME.setMathRenderer(myAmazingMathRenderer)
  </script>
</body>

</html>