mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-07-29 02:52:27 +08:00
91 lines
3.2 KiB
HTML
91 lines
3.2 KiB
HTML
<!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 – Development Sample</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: 800px; margin: 20px auto; }</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>CKEditor 5 with ckeditor5-math – Development Sample</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>
|
||
|
||
<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>
|
||
|
||
<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>
|