Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-11-16 16:01:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

demo: Add example of katexRenderOptions

Browse Source
This commit is contained in:
Tony Narlock 2022-08-03 18:18:34 -05:00
parent f15758b229
commit 46345f2c56
2 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
demo/app.js
View File

@ -3,18 +3,25 @@ import Essentials from "@ckeditor/ckeditor5-essentials/src/essentials";
import Paragraph from "@ckeditor/ckeditor5-paragraph/src/paragraph"; import Paragraph from "@ckeditor/ckeditor5-paragraph/src/paragraph";
import Bold from "@ckeditor/ckeditor5-basic-styles/src/bold"; import Bold from "@ckeditor/ckeditor5-basic-styles/src/bold";
import Italic from "@ckeditor/ckeditor5-basic-styles/src/italic"; import Italic from "@ckeditor/ckeditor5-basic-styles/src/italic";
import CKEditorInspector from '@ckeditor/ckeditor5-inspector'; import CKEditorInspector from "@ckeditor/ckeditor5-inspector";
import Math from "../src/math"; import Math from "../src/math";
ClassicEditor.create(document.querySelector("#editor"), { ClassicEditor.create(document.querySelector("#editor"), {
plugins: [Essentials, Paragraph, Bold, Italic, Math], plugins: [Essentials, Paragraph, Bold, Italic, Math],
toolbar: ["bold", "italic", "math"], toolbar: ["bold", "italic", "math"],
math: { engine: "katex" }, math: {
engine: "katex",
katexRenderOptions: {
macros: {
"\\test": "\\mathrel{\\char`≠}",
},
},
},
}) })
.then((editor) => { .then((editor) => {
console.log("Editor was initialized", editor); console.log("Editor was initialized", editor);
CKEditorInspector.attach(editor) CKEditorInspector.attach(editor);
}) })
.catch((error) => { .catch((error) => {
console.error(error); console.error(error);

6
demo/index.html
View File

@ -24,7 +24,7 @@
src="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/contrib/auto-render.min.js" src="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/contrib/auto-render.min.js"
integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl"
crossorigin="anonymous" crossorigin="anonymous"
onload="renderMathInElement(document.body);" onload="renderMathInElement(document.body, {'macros': {'\\test': '\\mathrel{\\char`≠}'}});"
></script> ></script>
<style> <style>
@ -50,6 +50,10 @@
<div id="editor"> <div id="editor">
<p><script type="math/tex">e=mc^2</script></p> <p><script type="math/tex">e=mc^2</script></p>
<p><script type="math/tex; mode=display">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 --> <!-- Quill Style Tag -->
<p><span class="ql-formula" data-value="e=mc^2"></span></p> <p><span class="ql-formula" data-value="e=mc^2"></span></p>
</div> </div>