Notes/demo/index.html
2022-08-03 18:27:27 -05:00

62 lines
1.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>CKEditor5 w/ 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
defer
src="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/katex.min.js"
integrity="sha384-z64WtjpyrKFsxox9eI4SI8eM9toXdoYeWb5Qh+8PO+eG54Bv9BZqf9xNhlcLf/sA"
crossorigin="anonymous"
></script>
<script
defer
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>
html {
text-align: center;
}
body {
max-width: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<h2>
CKEditor 5 with
<a
href="https://github.com/isaul32/ckeditor5-math"
rel="noopener noreferrer"
target="_blank"
>ckeditor5-math</a
>
</h2>
<div id="editor">
<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>
</div>
</body>
</html>