2023-02-06 19:35:50 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< link rel = "icon" type = "image/png" href = "https://ckeditor.com/docs/ckeditor5/latest/assets/img/favicons/32x32.png" sizes = "32x32" >
< meta charset = "utf-8" >
< title > CKEditor 5 with ckeditor5-math – < / title >
< link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/katex.min.css"
integrity="sha384-L+Gq2Cso/Y2x8fX4wausgiZT8z0QPZz7OqPuz4YqAycQJyrJT9NRLpjFBD6zlOia"
crossorigin="anonymous"
/>
< script
src="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/katex.min.js"
integrity="sha384-z64WtjpyrKFsxox9eI4SI8eM9toXdoYeWb5Qh+8PO+eG54Bv9BZqf9xNhlcLf/sA"
crossorigin="anonymous"
>< / script >
< script
src="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/contrib/auto-render.min.js"
integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl"
crossorigin="anonymous"
onload="renderMathInElement(document.body, {'macros': {'\\test': '\\mathrel{\\char`≠}'}});"
>< / script >
< style > body { max-width : 800 px ; margin : 20 px auto ; } < / style >
< / head >
< body >
< h1 > CKEditor 5 with ckeditor5-math – < / h1 >
< div id = "editor" >
< h2 > Development environment< / h2 >
< p >
This is a demo of the < a href = "https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor" > classic editor build< / a > that loads the < code > Math< / code > and < code > AutoformatMath< / code > plugin.
< / p >
< p >
< code > Math< / code > inserts mathematical formulas into the editor. You can click the CKEditor 5 Math icon in the toolbar and see the results.
< / p >
2023-02-21 07:54:39 +01:00
< p >
< script type = "math/tex" > e = mc ^ 2 < / script >
< / p >
< p >
< script type = "math/tex; mode=display" > e = mc ^ 2 < / script >
< / p >
< p >
This should show "\test" as ≠ via katexRenderOptions.macros:
< script type = "math/tex" > \ test < / script >
< / p >
<!-- Quill Style Tag -->
< p >
< span class = "ql-formula" data-value = "e=mc^2" > < / span >
< / p >
2023-02-06 19:35:50 +01:00
< h3 > The directory structure< / h3 >
< p >
The code snippet below presents the directory structure.
< / p >
< pre > < code class = "language-plaintext" > .
├─ sample
│ ├─ dll.html # The editor initialized using the DLL builds. Check README for details.
│ ├─ index.html # The currently displayed file.
│ └─ ckeditor.js # The editor initialization script.
├─ src
│ ├─ autoformatmath.js # The AutoformatMath plugin.
│ ├─ math.js # The Math plugin.
│ ├─ index.js # The modules exported by the package when using the DLL builds.
│ └─ **/*.js # JavaScript source files.
├─ tests
│ └─ **/*.js # Test files
├─ theme
│ ├─ icons
│ │ ├─ math.svg # The Math icon displayed in the toolbar.
│ └─ mathform.css # Math editor styles.
├─ .editorconfig
├─ ...
└─ README.md< / code > < / pre >
< h3 > Reporting issues< / h3 >
< p > If you found a problem with CKEditor 5 or the package generator, please, report an issue:< / p >
< p > < a href = "https://github.com/isaul32/ckeditor5-math/issues" > CKEditor 5 Math< / a > < / p >
< / div >
< script src = "./ckeditor.dist.js" > < / script >
< / body >
< / html >
