better design with selfmade shader

components/StyledMarkdown.tsx

@@ -16,6 +16,7 @@ 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";
 
 SyntaxHighlighter.registerLanguage("tsx", tsx);
@@ -104,9 +105,11 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
       );
     },
     code({ node, inline, className, ...props }: any) {
+      
       const match = /language-(\w+)/.exec(className || "");
       const hasMeta = node?.data?.meta;
 
+
       const applyHighlights: object = (applyHighlights: number) => {
         if (hasMeta) {
           const RE = /{([\d,-]+)}/;
@@ -118,7 +121,7 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
 
           const highlightLines = rangeParser(strlineNumbers);
           const highlight = highlightLines;
-          const data = highlight.includes(applyHighlights) ? 200 : null;
+          const data = highlight.includes(applyHighlights) ? "highlight" : null;
           return { data };
         } else {
           return {};
@@ -141,11 +144,12 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
           const metadata = node.data.meta;
           const RE = /title=\"(.*)\"/;
           const title = RE?.test(metadata) && RE.exec(metadata);
-          return title ? title[1] : null;
+          return title ? title[1] : "Code";
         }
         return "Code";
       };
 
+
       return match ? (
         <div>
           <div className="w-full flex flex-row items-center gap-4">
@@ -155,7 +159,7 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
             >
               <BiCopy />
             </button>
-            {getTitle() && <div>{getTitle()}</div>}
+            {<div>{getTitle()}</div>}
           </div>
           <SyntaxHighlighter
             style={defaulttheme}
@@ -190,8 +194,8 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
     >
       <ReactMarkdown
         components={MarkdownComponents}
-        rehypePlugins={[rehypeRaw, rehypeSanitize]}
-        remarkPlugins={[remarkGfm, remarkTypograf, smartypants, oembed]}
+        rehypePlugins={[rehypeRaw]}
+        remarkPlugins={[remarkGfm, remarkTypograf, smartypants, oembed, emoji]}
         children={html}
       />
     </div>