some changes

components/StyledMarkdown.tsx

@@ -14,10 +14,11 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import remarkTypograf from "@mavrin/remark-typograf";
 import smartypants from "remark-smartypants";
-import oembed from "@agentofuser/remark-oembed";
 import rehypeRaw from "rehype-raw";
 import emoji from "remark-emoji";
-import rehypeSanitize from "rehype-sanitize";
+import oembed from "@agentofuser/remark-oembed";
+import YouTube from "react-youtube";
+//import rehypeSanitize from "rehype-sanitize";
 
 SyntaxHighlighter.registerLanguage("tsx", tsx);
 SyntaxHighlighter.registerLanguage("typescript", typescript);
@@ -26,8 +27,26 @@ SyntaxHighlighter.registerLanguage("bash", bash);
 SyntaxHighlighter.registerLanguage("markdown", markdown);
 SyntaxHighlighter.registerLanguage("json", json);
 
+
 export const StyledMarkdown = ({ html }: { html: string }) => {
   const MarkdownComponents: Components = {
+    
+    a: (props : any) => {
+      try {
+        const url = new URL(props.href);
+        if (
+          url.origin.includes("youtube.com") &&
+          props.node.position.start.column === 1
+        ){
+          return <YouTube videoId={url.searchParams.get("v") || "dQw4w9WgXcQ"} />;
+        }
+      } catch (e) {
+        //console.log(e);
+      }
+
+      return <a {...props} />;
+    },
+
     h1: (props: any) => {
       const arr = props.children;
       let heading = "";
@@ -195,7 +214,7 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
       <ReactMarkdown
         components={MarkdownComponents}
         rehypePlugins={[rehypeRaw]}
-        remarkPlugins={[remarkGfm, remarkTypograf, smartypants, oembed, emoji]}
+        remarkPlugins={[oembed, remarkGfm, remarkTypograf, smartypants, emoji]}
         children={html}
       />
     </div>