CKEdtior5-mathlive

by Yayure

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 classic example with mathlive plugin</title>
    <!-- CKEditor 5 -->
    <script src="https://unpkg.com/ckeditor5/build/ckeditor5-dll.js"></script>
    <script src="https://unpkg.com/@ckeditor/ckeditor5-editor-classic/build/editor-classic.js"></script>
    <script src="https://unpkg.com/@ckeditor/ckeditor5-essentials/build/essentials.js"></script>
    <script src="https://unpkg.com/@ckeditor/ckeditor5-autoformat/build/autoformat.js"></script>
    <script src="https://unpkg.com/@ckeditor/ckeditor5-heading/build/heading.js"></script>
    <script src="https://unpkg.com/@ckeditor/ckeditor5-alignment/build/alignment.js"></script>
    
    <!-- @yayure/ckeditor5-mathlive -->
    <link rel="stylesheet" href="https://unpkg.com/mathlive/dist/mathlive-static.css" />
    <script defer src="https://unpkg.com/mathlive"></script>
    <script src="https://unpkg.com/@yayure/ckeditor5-mathlive/build/mathlive.js"></script>
  </head>
  
  <body>
    <div id="editor">
      <p>lnline equation:
        <script type="math/tex">\frac{\pi}{2}</script>and<script type="math/tex">\lim_{n\rightarrow\infty}{\left(1+\frac{1}{n}\right)^n}</script>
      </p>
      <p>Centered equation (support by @ckeditor/ckeditor5-alignment):</p><p style="text-align:center;"><script type="math/tex">\frac{-b\pm\sqrt{b^2-4ac}}{2a}</script></p>
      <p>Chem equation:</p><p><script type="math/tex">\ce{2H_2O\ \longrightarrow{\ce{MnO2}_{}}\ O_2\uparrow\ +\ 2H_2O}</script></p>
      <p>&nbsp;</p><p>&nbsp;</p>
    </div>
  </body>
 
  <script>
    CKEditor5.editorClassic.ClassicEditor
      .create( document.querySelector( '#editor' ), {
      	licenseKey: 'GPL',
        plugins: [
					CKEditor5.mathlive.Mathlive,
          CKEditor5.alignment.Alignment,
          CKEditor5.essentials.Essentials,
          CKEditor5.autoformat.Autoformat,
         ...