diff --git a/packages/article-converter/src/plugins/mathPlugin.tsx b/packages/article-converter/src/plugins/mathPlugin.tsx
index 53a6b244b8..cd1a16d8e3 100644
--- a/packages/article-converter/src/plugins/mathPlugin.tsx
+++ b/packages/article-converter/src/plugins/mathPlugin.tsx
@@ -7,9 +7,10 @@
*/
import { attributesToProps } from "html-react-parser";
+import { MathEmbed } from "@ndla/ui";
import { type PluginType } from "./types";
+
export const mathPlugin: PluginType = (node) => {
const { "data-math": mathContent, ...props } = attributesToProps(node.attribs);
- // @ts-expect-error - math is a valid tag
- return ;
+ return ;
};
diff --git a/packages/ndla-ui/src/Embed/MathEmbed.tsx b/packages/ndla-ui/src/Embed/MathEmbed.tsx
new file mode 100644
index 0000000000..6deee6e08c
--- /dev/null
+++ b/packages/ndla-ui/src/Embed/MathEmbed.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2025-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { useEffect, useRef, type ComponentProps } from "react";
+
+interface Props extends ComponentProps<"span"> {
+ mathContent: string;
+}
+
+export const MathEmbed = ({ mathContent, ...props }: Props) => {
+ const ref = useRef(null);
+
+ useEffect(() => {
+ //@ts-expect-error - MathJax might exist!
+ window.MathJax?.typesetPromise?.([ref.current]);
+ }, []);
+
+ return (
+
+ {/* @ts-expect-error - Math is not a valid HTML element according to react */}
+
+
+ );
+};
diff --git a/packages/ndla-ui/src/Embed/index.ts b/packages/ndla-ui/src/Embed/index.ts
index 04c704974f..4a91e755e8 100644
--- a/packages/ndla-ui/src/Embed/index.ts
+++ b/packages/ndla-ui/src/Embed/index.ts
@@ -26,3 +26,4 @@ export type { HeartButtonType, CanonicalUrlFuncs, RenderContext } from "./types"
export { EmbedWrapper } from "./EmbedWrapper";
export type { EmbedWrapperVariantProps, EmbedWrapperProps } from "./EmbedWrapper";
export { ConceptInlineTriggerButton } from "./ConceptInlineTriggerButton";
+export { MathEmbed } from "./MathEmbed";
diff --git a/packages/ndla-ui/src/index.ts b/packages/ndla-ui/src/index.ts
index 3f2acb0645..57902ff035 100644
--- a/packages/ndla-ui/src/index.ts
+++ b/packages/ndla-ui/src/index.ts
@@ -33,6 +33,7 @@ export {
InlineTriggerButton,
ConceptInlineTriggerButton,
EmbedWrapper,
+ MathEmbed,
} from "./Embed";
export type { EmbedWrapperProps, EmbedWrapperVariantProps } from "./Embed";