support math

entrypoints/content/Note.tsx

@@ -20,6 +20,8 @@ import { Resizable, ResizeCallback } from "re-resizable";
 import ReactMarkdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import remarkGfm from "remark-gfm";
+import rehypeKatex from "rehype-katex";
+import remarkMath from "remark-math";
 import { useOutsideClickRef } from "rooks";
 
 // result's code block theme
@@ -497,7 +499,8 @@ const Note = (props: Props) => {
                 <div onClick={handleClickInside} className="result-container">
                   <ReactMarkdown
                     // rehypePlugins={[rehypeRaw]}
-                    remarkPlugins={[remarkGfm]}
+                    remarkPlugins={[remarkGfm, remarkMath]}
+                    rehypePlugins={[rehypeKatex]}
                     className="result"
                     skipHtml={false}
                     urlTransform={(url) => url}

entrypoints/content/index.tsx

@@ -12,6 +12,9 @@ import type { Note as NoteType } from "./storage.js";
 import Note from "./Note.js";
 import "./content.css";
 
+// import "katex/dist/katex.min.css"; // `rehype-katex` does not import the CSS for you
+import "url:https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css";
+
 // import root from 'react-shadow/material-ui'
 // Shadow DOM / iframe can solve style encapsulation, but is not easy to use with material-ui, markdown editor and draggable.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "markdown-stick-notes",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Markdown Sticky Notes web extension",
   "private": true,
   "type": "module",
@@ -35,7 +35,9 @@
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.21.2",
     "react-syntax-highlighter": "npm:@fengkx/[email protected]",
+    "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
     "rooks": "^7.14.1"
   },
   "devDependencies": {
@@ -44,7 +46,7 @@
     "@types/react-syntax-highlighter": "^15.5.11",
     "@vitejs/plugin-react": "^4.2.1",
     "typescript": "^5.3.3",
-    "vite": "^5.1.7",
-    "wxt": "^0.15.0"
+    "vite": "^5.4.9",
+    "wxt": "^0.19.13"
   }
-}
+}