style changes

components/StyledMarkdown.tsx

@@ -17,8 +17,8 @@ import smartypants from "remark-smartypants";
 import rehypeRaw from "rehype-raw";
 import emoji from "remark-emoji";
 import oembed from "@agentofuser/remark-oembed";
-import remarkDirective from 'remark-directive'
-import remarkDirectiveRehype from 'remark-directive-rehype'
+import remarkDirective from "remark-directive";
+import remarkDirectiveRehype from "remark-directive-rehype";
 import { YouTubeVideo } from "./Youtube";
 import { ImageSlide } from "./ImageSlide";
 //import rehypeSanitize from "rehype-sanitize";
@@ -30,7 +30,6 @@ SyntaxHighlighter.registerLanguage("bash", bash);
 SyntaxHighlighter.registerLanguage("markdown", markdown);
 SyntaxHighlighter.registerLanguage("json", json);
 
-
 export const StyledMarkdown = ({ html }: { html: string }) => {
   const MarkdownComponents: Components = {
     h1: (props: any) => {
@@ -110,11 +109,9 @@ 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,-]+)}/;
@@ -154,7 +151,6 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
         return "Code";
       };
 
-
       return match ? (
         <div>
           <div className="w-full flex flex-row items-center gap-4">
@@ -185,18 +181,18 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
     },
     //custom directives
     //@ts-ignore
-    'yt': YouTubeVideo, 
-    'img-slide': ImageSlide,
+    yt: YouTubeVideo,
+    "img-slide": ImageSlide,
   };
 
   return (
     <div
       className="
         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-code:font-mono prose-code:text-gray-100 prose-code:bg-black/20 prose-code:p-1 prose-code:m-1 prose-code:rounded-md 
         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-li:text-gray-600 dark:prose-li:text-gray-200 prose-td:text-gray-600 dark:prose-td:text-gray-300 
       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
       "
@@ -204,7 +200,15 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
       <ReactMarkdown
         components={MarkdownComponents}
         rehypePlugins={[rehypeRaw]}
-        remarkPlugins={[remarkDirective, remarkDirectiveRehype, oembed, remarkGfm, smartypants, emoji, remarkTypograf]}
+        remarkPlugins={[
+          remarkDirective,
+          remarkDirectiveRehype,
+          oembed,
+          remarkGfm,
+          smartypants,
+          emoji,
+          remarkTypograf,
+        ]}
         children={html}
       />
     </div>

styles/globals.css

@@ -19,15 +19,15 @@ main {
 }
 
 pre {
-  @apply dark:bg-slate-800 bg-slate-200 text-slate-800 dark:text-slate-200 !important;
+  @apply dark:bg-black/30 bg-slate-200 text-slate-800 dark:text-slate-200 !important;
 }
 
 pre > code {
   @apply bg-transparent text-gray-700 dark:text-slate-300 !important;
 }
 
-.codeStyle > code {
-  background: transparent;
+.codeStyle {
+  @apply bg-transparent !important
 }
 
 pre > div > div > button > svg:hover {
@@ -42,9 +42,22 @@ h1 > a:hover::before,
 h2 > a:hover::before,
 h3 > a:hover::before,
 h4 > a:hover::before {
-  @apply content-['#'] absolute -left-8 text-gray-300 dark:text-gray-600;
+  @apply content-['#'] absolute -left-8 text-gray-300 dark:text-gray-400;
 }
 
+h2 > a:hover::before {
+  @apply -left-6;
+}
+
+h3 > a:hover::before {
+  @apply -left-5;
+}
+
+h4 > a:hover::before {
+  @apply -left-4;
+}
+
+
 div > code, pre > code {
   @apply p-0 m-0 !important
 }