Added themes and css styling for mdx

Author: Sarthk1012

package.json

@@ -34,6 +34,7 @@
     "rehype-pretty-code": "^0.12.5",
     "remark-gfm": "^4.0.0",
     "remark-smartypants": "^2.1.0",
+    "shiki-themes": "^0.2.7",
     "shikiji": "^0.10.0-beta.9",
     "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7",

src/app/articles/[slug]/markdown.css

@@ -0,0 +1,111 @@
+.markdown {
+    line-height: 28px;
+    --path: none;
+    --radius-top: 12px;
+    --radius-bottom: 12px;
+    --padding-top: 1rem;
+    --padding-bottom: 1rem;
+}
+
+.markdown p {
+    @apply pb-8;
+}
+
+.markdown a {
+    @apply border-b-[1px] border-[--link] text-[--link];
+}
+
+.markdown hr {
+    @apply pt-8 opacity-60 dark:opacity-10;
+}
+
+.markdown h2 {
+    @apply mt-2 pb-8 text-3xl font-bold;
+}
+
+.markdown h3 {
+    @apply mt-2 pb-8 text-2xl font-bold;
+}
+
+.markdown h4 {
+    @apply mt-2 pb-8 text-xl font-bold;
+}
+
+.markdown :not(pre)>code {
+    border-radius: 10px;
+    background: var(--inlineCode-bg);
+    color: var(--inlineCode-text);
+    padding: 0.15em 0.2em 0.05em;
+    white-space: normal;
+}
+
+.markdown pre {
+    @apply -mx-4 mb-8 overflow-y-auto p-4 text-sm;
+    clip-path: var(--path);
+    border-top-right-radius: var(--radius-top);
+    border-top-left-radius: var(--radius-top);
+    border-bottom-right-radius: var(--radius-bottom);
+    border-bottom-left-radius: var(--radius-bottom);
+    padding-top: var(--padding-top);
+    padding-bottom: var(--padding-bottom);
+}
+
+.markdown pre code {
+    width: auto;
+    border: 1px solid #d1d5db;
+    /* light gray border, you can use any color */
+    border-radius: 5px;
+    /* optional: if you want rounded corners */
+    padding: 1em;
+    /* optional: adds some space inside the borders */
+    overflow: auto;
+    /* optional: adds a scrollbar if the content is too wide */
+    background-color: #f8f8f8;
+}
+
+.markdown blockquote {
+    @apply relative -left-2 -ml-4 mb-8 pl-4;
+    font-style: italic;
+    border-left: 3px solid hsla(0, 0%, 0%, 0.9);
+    border-left-color: inherit;
+    opacity: 0.8;
+}
+
+.markdown blockquote p {
+    margin: 0;
+    padding: 0;
+}
+
+.markdown p img {
+    margin-bottom: 0;
+}
+
+.markdown ul {
+    margin-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    margin-bottom: 1.75rem;
+    list-style-position: outside;
+    list-style-image: none;
+    list-style: disc;
+}
+
+.markdown li {
+    margin-bottom: calc(1.75rem / 2);
+}
+
+.markdown img {
+    @apply mb-8;
+    max-width: 100%;
+}
+
+.markdown pre [data-highlighted-line] {
+    margin-left: -16px;
+    padding-left: 12px;
+    border-left: 4px solid #ffa7c4;
+    background-color: #022a4b;
+    display: block;
+    padding-right: 1em;
+}

src/app/articles/[slug]/page.tsx

@@ -1,9 +1,11 @@
 import { MDXRemote } from "next-mdx-remote/rsc";
 import remarkSmartpants from "remark-smartypants";
 import rehypePrettyCode from "rehype-pretty-code";
-import { readdir, readFile } from "fs/promises";
+import { readFile } from "fs/promises";
 import overnight from "overnight/themes/Overnight-Slumber.json";
 import matter from "gray-matter";
+import "./markdown.css";
+import githubLight from "shiki-themes/data/github-light.json";
 
 export default async function Article({
   params: { slug },
@@ -52,7 +54,7 @@ export default async function Article({
                 [
                   rehypePrettyCode as any,
                   {
-                    theme: overnight,
+                    theme: githubLight,
                   },
                 ],
               ],