Removing repetitive $...$ katex spans

app/cip/[slug]/page.js

@@ -3,6 +3,21 @@ import { notFound } from 'next/navigation'
 import Link from 'next/link'
 import Badge from '@/components/Badge'
 import Markdown from '@/components/Markdown'
+import { JSDOM } from 'jsdom';
+
+
+// Removing repetitive $...$ katex spans
+function removeAriaHiddenSpans(html) {
+  const dom = new JSDOM(html);
+  const document = dom.window.document;
+
+  const spans = document.querySelectorAll('span[aria-hidden="true"]');
+  spans.forEach(span => {
+    span.classList.add('hidden');
+  });
+
+  return document.body.innerHTML;
+}
 
 async function getCipFromParams(slug) {
   slug = `CIP-${slug.split('-')[1].padStart(4, '0')}`
@@ -48,6 +63,7 @@ function parseAuthors(authors) {
 
 export default async function Cip({ params }) {
   const cip = await getCipFromParams(params.slug)
+  const cleanedHtml = removeAriaHiddenSpans(cip.body.html);
 
   return (
     <div className="pt-24 md:pt-40 flex justify-center pb-12">
@@ -88,7 +104,7 @@ export default async function Cip({ params }) {
           </div>
 
           <div className="prose prose-invert lg:prose-xl mx-auto prose-code:px-2 prose-code:py-1 prose-code:rounded-md">
-            <Markdown content={cip.body.html } />
+            <Markdown content={cleanedHtml} />
           </div>
         </article>
       </div>

app/cps/[slug]/page.js

@@ -2,6 +2,21 @@ import { allCPs } from 'contentlayer/generated'
 import { notFound } from 'next/navigation'
 import Link from "next/link"
 import Badge from "@/components/Badge"
+import Markdown from '@/components/Markdown'
+import { JSDOM } from 'jsdom';
+
+// Removing repetitive $...$ katex spans
+function removeAriaHiddenSpans(html) {
+  const dom = new JSDOM(html);
+  const document = dom.window.document;
+
+  const spans = document.querySelectorAll('span[aria-hidden="true"]');
+  spans.forEach(span => {
+    span.classList.add('hidden');
+  });
+
+  return document.body.innerHTML;
+}
 
 async function getCpsFromParams(slug) {
   const cps = allCPs.find((cps) => cps.slug === slug)
@@ -45,6 +60,7 @@ function parseAuthors(authors) {
 
 export default async function Cps({ params }) {
   const cps = await getCpsFromParams(params.slug)
+  const cleanedHtml = removeAriaHiddenSpans(cps.body.html);
 
   return (
     <div className="pt-24 md:pt-40 flex justify-center pb-12">
@@ -85,7 +101,7 @@ export default async function Cps({ params }) {
           </div>
 
           <div className="prose prose-invert lg:prose-xl mx-auto">
-            <div dangerouslySetInnerHTML={{ __html: cps.body.html }} />
+            <Markdown content={cleanedHtml} />
           </div>
         </article>
       </div>

contentlayer.config.js

@@ -236,7 +236,7 @@ export default makeSource({
   contentDirPath: 'content',
   documentTypes: [Cip, Cps, CipAnnex, CpsAnnex],
   markdown: {
-    remarkPlugins: [remarkGfm, remarkComment, remarkMath],
+    remarkPlugins: [remarkMath, remarkGfm, remarkComment],
     rehypePlugins: [
       rehypeSlug,
       [
@@ -271,4 +271,4 @@ export default makeSource({
       rehypeKatex
     ],
   },
-})
+})