remark plugins and width

components/StyledMarkdown.tsx

@@ -12,6 +12,11 @@ import { Components } from "react-markdown";
 import { generateSlug } from "../utils/general";
 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 rehypeSanitize from "rehype-sanitize";
 
 SyntaxHighlighter.registerLanguage("tsx", tsx);
 SyntaxHighlighter.registerLanguage("typescript", typescript);
@@ -74,7 +79,7 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
 
       const slug = generateSlug(heading);
       return (
-        <h3 id={slug}>
+        <h3 id={slug} className="text-red-500">
           <a href={`#${slug}`} {...props}></a>
         </h3>
       );
@@ -110,24 +115,47 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
             ? // @ts-ignore
               RE?.exec(metadata)[1]
             : "0";
+
           const highlightLines = rangeParser(strlineNumbers);
           const highlight = highlightLines;
-          const data = highlight.includes(applyHighlights) ? "highlight" : null;
+          const data = highlight.includes(applyHighlights) ? 200 : null;
           return { data };
         } else {
           return {};
         }
       };
 
+      const applyStartingNumber = () => {
+        if (hasMeta) {
+          const metadata = node.data.meta?.replace(/\s/g, "");
+          const RE = /line=(\d+)/;
+          const start = RE?.test(metadata) && RE.exec(metadata);
+          return start ? +start[1] : 1;
+        } else {
+          return 1;
+        }
+      };
+
+      const getTitle = () => {
+        if (hasMeta) {
+          const metadata = node.data.meta;
+          const RE = /title=\"(.*)\"/;
+          const title = RE?.test(metadata) && RE.exec(metadata);
+          return title ? title[1] : null;
+        }
+        return "Code";
+      };
+
       return match ? (
         <div>
-          <div className="w-full">
+          <div className="w-full flex flex-row items-center gap-4">
             <button
               className="w-fit ml-2 important"
               onClick={() => navigator.clipboard.writeText(props.children)}
             >
               <BiCopy />
             </button>
+            {getTitle() && <div>{getTitle()}</div>}
           </div>
           <SyntaxHighlighter
             style={defaulttheme}
@@ -138,6 +166,7 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
             wrapLines={hasMeta ? true : false}
             useInlineStyles={true}
             lineProps={applyHighlights}
+            startingLineNumber={applyStartingNumber()}
             {...props}
           />
         </div>
@@ -146,21 +175,23 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
       );
     },
   };
+
   return (
     <div
       className="
-        prose 
+        prose
         prose-code:font-mono prose-code:text-gray-100 prose-code:bg-gray-700 prose-code:p-1 prose-code:m-1 prose-code:rounded-md 
-        prose-headings:text-gray-800 dark:prose-headings:text-primary-text prose-p:text-gray-600 dark:prose-p:text-gray-100 
-        prose-img:w-full prose-img:h-auto xl:prose-img:max-h-96 prose-img:object-cover 
-        prose-li text-gray-600 dark:prose-li:text-gray-300 prose-td:text-gray-600 dark:prose-td:text-gray-400 
-      prose-a:text-primary dark:prose-a:text-action prose-strong:text-gray-900 dark:prose-strong:text-gray-50
+        prose-headings:text-gray-800 dark:prose-headings:text-gray-100 prose-p:text-gray-600 dark:prose-p:text-gray-300 
+        prose-img:w-full prose-img:h-auto prose-img:object-cover 
+        prose-li:text-gray-600 dark:prose-li:text-gray-300 prose-td:text-gray-600 dark:prose-td:text-gray-400 
+      prose-a:text-primary prose-strong:text-gray-900 dark:prose-strong:text-gray-50
         dark:prose-hr:bg-gray-200 prose-hr:bg-gray-400
       "
     >
       <ReactMarkdown
         components={MarkdownComponents}
-        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeRaw, rehypeSanitize]}
+        remarkPlugins={[remarkGfm, remarkTypograf, smartypants, oembed]}
         children={html}
       />
     </div>