diff --git a/demo/app.js b/demo/app.js
index 82e10d89d..4f95370b2 100644
--- a/demo/app.js
+++ b/demo/app.js
@@ -3,18 +3,25 @@ import Essentials from "@ckeditor/ckeditor5-essentials/src/essentials";
 import Paragraph from "@ckeditor/ckeditor5-paragraph/src/paragraph";
 import Bold from "@ckeditor/ckeditor5-basic-styles/src/bold";
 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";
 
 ClassicEditor.create(document.querySelector("#editor"), {
 	plugins: [Essentials, Paragraph, Bold, Italic, Math],
 	toolbar: ["bold", "italic", "math"],
-	math: { engine: "katex" },
+	math: {
+		engine: "katex",
+		katexRenderOptions: {
+			macros: {
+				"\\test": "\\mathrel{\\char`≠}",
+			},
+		},
+	},
 })
 	.then((editor) => {
 		console.log("Editor was initialized", editor);
-		CKEditorInspector.attach(editor)
+		CKEditorInspector.attach(editor);
 	})
 	.catch((error) => {
 		console.error(error);
diff --git a/demo/index.html b/demo/index.html
index 4177b02f3..b8a3c75df 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -24,7 +24,7 @@
 			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);"
+			onload="renderMathInElement(document.body, {'macros': {'\\test': '\\mathrel{\\char`≠}'}});"
 		></script>
 
 		<style>
@@ -50,6 +50,10 @@
 		<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>