fix: strip <em> tags before rendering math blocks

markdown/test.md

@@ -1,5 +1,22 @@
 # For testing purposes
 
-Following should not render properly:
+Following *should not* render properly:
 
-$\text{H}_h + X_\text{x}$
+Some text before, the math: $\text{H}_h + X_\text{x}$, and some *italics after*.
+
+An `inline block` and $\text{H}_h + X_\text{x}$.
+
+$$
+\begin{aligned}
+&\frac{C}{C^*} \leq \rho(n) \rightarrow \text{ for minimisation, } \rho(n) \geq 1 \\
+&\frac{C}{C^*} \geq \rho(n) \rightarrow \text{ for maximisation, } \rho(n) \leq 1
+\end{aligned}
+$$
+
+```js
+// test code block
+test();
+```
+
+- A list
+- Another problematic $\text{H}_h + X_\text{x}$

src/index.js

@@ -1,6 +1,40 @@
 import renderMathInElement from "katex/dist/contrib/auto-render";
 import { Messages } from "./utils/constants";
 
+function stripEmTags() {
+  const readme = document.getElementById("readme");
+
+  if (!readme) {
+    return;
+  }
+
+  let pos = 0;
+  while (pos >= 0) {
+    // find first pos of "}<em>"
+    pos = readme.innerHTML.indexOf("}<em>", pos);
+    // replace "}<em>" and "</em>" after pos
+    readme.innerHTML =
+      readme.innerHTML.slice(0, pos) +
+      readme.innerHTML
+        .slice(pos)
+        .replace("}<em>", "}_")
+        .replace("</em>", "_");
+  }
+
+  pos = 0;
+  while (pos >= 0) {
+    // find first pos of "^<em>"
+    pos = readme.innerHTML.indexOf("^<em>", pos);
+    // replace "^<em>" and "</em>" after pos
+    readme.innerHTML =
+      readme.innerHTML.slice(0, pos) +
+      readme.innerHTML
+        .slice(pos)
+        .replace("^<em>", "^*")
+        .replace("</em>", "*");
+  }
+}
+
 function renderMath() {
   const readme = document.getElementById("readme");
 
@@ -47,7 +81,9 @@ const readmeObserver = new MutationObserver((mutations) => {
     for (const addedNode of mutation.addedNodes) {
       if (addedNode.id === "readme") {
         console.log("readme dom change detected");
-        return renderMath();
+        stripEmTags();
+        renderMath();
+        return; // break from all loops
       }
     }
   }
@@ -58,10 +94,12 @@ readmeObserver.observe(document.body, { childList: true, subtree: true });
 chrome.runtime.onMessage.addListener((request) => {
   if (request.type === Messages.ROUTE_CHANGED) {
     console.log("route change detected");
+    stripEmTags();
     renderMath();
   }
 });
 
 // on initial page load
 console.log("initial page load detected");
+stripEmTags();
 renderMath();