allow html in announcements

package.json

@@ -22,6 +22,7 @@
     "react-native-text-ticker": "^1.14.0",
     "react-scroll": "^1.9.0",
     "react-text-transition": "^3.1.0",
+    "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0"
   },
   "devDependencies": {

src/components/Notices.jsx

@@ -3,6 +3,7 @@ import { motion, useAnimationControls } from "framer-motion";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Markdown from "react-markdown";
 import { animateScroll, Element } from "react-scroll";
+import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 import useInfo from "../hooks/useInfo";
 
@@ -113,6 +114,7 @@ export default function Notices({}) {
                     <Markdown
                         className="prose prose-2xl prose-neutral prose-invert prose-headings:font-bold"
                         remarkPlugins={[remarkGfm]}
+                        rehypePlugins={[rehypeRaw]}
                     >
                         {currentSlide}
                     </Markdown>

src/components/config/AnnouncementEditor.jsx

@@ -3,6 +3,7 @@ import { AlertDialog, Button, Flex, RadioCards, ScrollArea, Switch, Text, TextAr
 import dayjs from "dayjs";
 import { useCallback, useState } from "react";
 import Markdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 import useInfo from "../../hooks/useInfo";
 
@@ -129,6 +130,7 @@ export default function AnnouncementEditor({}) {
                         <Markdown
                             className="prose prose-lg prose-neutral prose-invert h-auto w-full flex-grow overflow-auto px-2 prose-headings:font-bold"
                             remarkPlugins={[remarkGfm]}
+                            rehypePlugins={[rehypeRaw]}
                         >
                             {selectedSlide?.content}
                         </Markdown>