[fix] prevent translations to math formulas and code-blocks

components/mdx/PreWrapper.tsx

@@ -32,14 +32,19 @@ const PreWrapper = ({ children }: { children: JSX.Element }) => {
       {hovered && (
         <Button
           aria-label="Copy code"
-          className={`absolute top-2 right-2 h-8 w-8 rounded p-1 ${copied ? "text-green-500 hover:text-green-500" : ""}`}
+          className={`absolute top-2 right-2 h-8 w-8 rounded p-1 ${
+            copied ? "text-green-500 hover:text-green-500" : ""
+          }`}
           onClick={onCopy}
           variant={"outline"}
         >
           {copied ? <FaCheck /> : <IoCopyOutline />}
         </Button>
       )}
-      <pre className="flat-scrollbar-normal not-prose rounded-md bg-[#F6F8FA] p-2 text-sm selection:bg-gray-300 selection:text-inherit dark:bg-[#0d1117] dark:selection:bg-gray-700">
+      <pre
+        translate="no"
+        className="flat-scrollbar-normal not-prose rounded-md bg-[#F6F8FA] p-2 text-sm selection:bg-gray-300 selection:text-inherit dark:bg-[#0d1117] dark:selection:bg-gray-700"
+      >
         {children}
       </pre>
     </div>

components/mdx/Span.tsx

@@ -0,0 +1,5 @@
+const Span = (props: JSX.IntrinsicElements["h2"]) => {
+  return <span translate={props.className?.includes("katex") ? "no" : undefined} {...props} />;
+};
+
+export default Span;

components/mdx/index.ts

@@ -2,6 +2,7 @@ import Blockquote from "./Blockquote";
 import H2 from "./H2";
 import ImageWrapper from "./ImageWrapper";
 import PreWrapper from "./PreWrapper";
+import Span from "./Span";
 import TableWrapper from "./TableWrapper";
 
 export const MDXComponentsSet = {
@@ -10,4 +11,5 @@ export const MDXComponentsSet = {
   img: ImageWrapper,
   h2: H2,
   blockquote: Blockquote,
+  span: Span,
 };