latex

package.json

@@ -23,6 +23,7 @@
     "dotenv": "^16.4.5",
     "form-data": "^4.0.1",
     "jsdom": "^25.0.0",
+    "marked-katex-extension": "^5.1.4",
     "next": "^15.0.2",
     "react": "^19",
     "react-dom": "^19",

src/models/local/tests/quizMarkdown/quizMarkdown.test.ts

@@ -3,6 +3,7 @@ import { LocalQuiz } from "../../quiz/localQuiz";
 import { quizMarkdownUtils } from "../../quiz/utils/quizMarkdownUtils";
 import { QuestionType } from "@/models/local/quiz/localQuizQuestion";
 import { quizQuestionMarkdownUtils } from "@/models/local/quiz/utils/quizQuestionMarkdownUtils";
+import { markdownToHtmlNoImages, markdownToHTMLSafe } from "@/services/htmlMarkdownUtils";
 
 // Test suite for QuizMarkdown
 describe("QuizMarkdownTests", () => {
@@ -253,4 +254,33 @@ short answer
     const firstQuestion = quiz.questions[0];
     expect(firstQuestion.points).toBe(4.56);
   });
+
+  it("can parse quiz with latex in a question", () => {
+    const name = "Test Quiz";
+    const rawMarkdownQuiz = `
+ShuffleAnswers: true
+OneQuestionAtATime: false
+DueAt: 08/21/2023 23:59:00
+LockAt: 08/21/2023 23:59:00
+AssignmentGroup: Assignments
+AllowedAttempts: -1
+Description: this is the
+multi line
+description
+---
+Points: 2
+
+This is latex: $x_2$
+
+*a) true
+b) false
+
+   endline`;
+
+    const quizHtml = markdownToHtmlNoImages(rawMarkdownQuiz);
+    expect(quizHtml).not.toContain("$");
+    expect(quizHtml).toContain("<mi>x</mi>");
+    expect(quizHtml).not.toContain("x_2");
+  });
+
 });

src/services/htmlMarkdownUtils.ts

@@ -2,6 +2,12 @@
 import { marked } from "marked";
 import  DOMPurify from "isomorphic-dompurify";
 import { LocalCourseSettings } from "@/models/local/localCourseSettings";
+import markedKatex from "marked-katex-extension";
+
+marked.use(markedKatex({
+  throwOnError: false,
+  output: "mathml"
+}));
 
 export function extractImageSources(htmlString: string) {
   const srcUrls = [];
@@ -40,16 +46,12 @@ export function markdownToHTMLSafe(
   markdownString: string,
   settings: LocalCourseSettings
 ) {
-  const clean = DOMPurify.sanitize(
-    marked.parse(markdownString, { async: false, pedantic: false, gfm: true })
-  );
-  // return convertImagesToCanvasImages(clean, settings);
-  return clean;
+  return markdownToHtmlNoImages(markdownString);
 }
 
 export function markdownToHtmlNoImages(markdownString: string) {
   const clean = DOMPurify.sanitize(
     marked.parse(markdownString, { async: false, pedantic: false, gfm: true })
-  );
+  ).replaceAll(/>[^<>]*<\/math>/g, "></math>");
   return clean;
 }