From bd1b15817215e5ce5eaeaa78924afc1741e9ebf6 Mon Sep 17 00:00:00 2001
From: PrinOrange <prinorange@outlook.com>
Date: Sun, 25 Aug 2024 22:45:34 +0800
Subject: [PATCH] [fix] prevent translations to math formulas and code-blocks

---
 components/mdx/PreWrapper.tsx | 9 +++++++--
 components/mdx/Span.tsx       | 5 +++++
 components/mdx/index.ts       | 2 ++
 3 files changed, 14 insertions(+), 2 deletions(-)
 create mode 100644 components/mdx/Span.tsx

diff --git a/components/mdx/PreWrapper.tsx b/components/mdx/PreWrapper.tsx
index eeeac38..e6d5a62 100644
--- a/components/mdx/PreWrapper.tsx
+++ b/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>
diff --git a/components/mdx/Span.tsx b/components/mdx/Span.tsx
new file mode 100644
index 0000000..eee4d1b
--- /dev/null
+++ b/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;
diff --git a/components/mdx/index.ts b/components/mdx/index.ts
index 789855b..20891d9 100644
--- a/components/mdx/index.ts
+++ b/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,
 };