Balloon block editor with KaTex

by isaul32

HTML

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CKEditor 5 balloon classic example with math plugin</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css">
  </head>

  <body>
    <h1>CKEditor 5 – balloon classic editor build</h1>
    <h2>Math plugin – KaTeX demo</h2>

    <h2>Example TeX equations</h2>
    <b>Math</b>
    <pre>\x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}</pre>
    <b>Chem</b>
    <pre>\ce{CH4 + 2 O2 -> CO2 + 2 H2O}</pre>
    
    <h2>Paste from text</h2>
    <b>Display</b>
    <pre>\[ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \]</pre>
    <b>Inline</b>
    <pre>\( x+\sqrt{1-x^2} \)</pre>

    <h2>Editor</h2>
    <div id="editor">
      <p>Lorem... <span class="math-tex"> \(x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \) </span> ...ipsum</p>
      <p>Lorem... <span class="math-tex"> \[ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \] </span> ...ipsum</p>
      <p>Lorem... <script type="math/tex">x+\sqrt{1-x^2}</script> ...ipsum</p>
      <p>Lorem... <script type="math/tex; mode=display">x+\sqrt{1-x^2}</script> ...ipsum</p>
    </div>

    <h2>Preview</h2>
    <div id="editor-preview"></div>

    <h2>Data</h2>
    <pre id="editor-preview-html" style="word-wrap: break-word; white-space: pre-wrap;"></pre>

    <script src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/mhchem.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/isaul32/ckeditor5@c3463fe834049bf5d805d1d22402108a9c0576bd/packages/ckeditor5-build-balloon-block/build/ckeditor.js"></script>
    
    <script>
      function getEditorData() {
        const data = window.editor.getData();

        // HTML
        const preview = document.getElementById('editor-preview');
      ...

CSS

body {
  max-width: 800px;
  margin: 20px auto;
}