Changed formatting and added latex

Author: DarthVishnu8

astro.config.ts

@@ -1,4 +1,6 @@
 import { defineConfig } from "astro/config";
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
 import tailwind from "@astrojs/tailwind";
 import react from "@astrojs/react";
 import remarkToc from "remark-toc";
@@ -21,13 +23,15 @@ export default defineConfig({
   markdown: {
     remarkPlugins: [
       remarkToc,
+      remarkMath,
       [
         remarkCollapse,
         {
           test: "Table of contents",
         },
       ],
     ],
+    rehypePlugins: [rehypeKatex],
     shikiConfig: {
       // For more themes, visit https://shiki.style/themes
       themes: { light: "min-light", dark: "night-owl" },

package-lock.json

@@ -19,7 +19,9 @@
     "astro": "^4.16.18",
     "fuse.js": "^7.0.0",
     "lodash.kebabcase": "^4.1.1",
+    "rehype-katex": "^7.0.1",
     "remark-collapse": "^0.1.2",
+    "remark-math": "^6.0.0",
     "remark-toc": "^9.0.0",
     "satori": "^0.11.0",
     "tailwindcss": "^3.4.11",

package.json

@@ -55,7 +55,7 @@ breadcrumbList[0] === "tags" &&
 
 <style>
   .breadcrumb {
-    @apply mx-auto mb-1 mt-8 w-full max-w-3xl px-4;
+    @apply mx-auto mb-1 mt-8 w-full max-w-5xl px-4;
   }
   .breadcrumb ul li {
     @apply inline;

src/components/Breadcrumbs.astro

@@ -161,7 +161,7 @@ const { activeNav } = Astro.props;
     @apply absolute -top-full left-16 z-50 bg-skin-accent px-3 py-2 text-skin-inverted transition-all focus:top-4;
   }
   .nav-container {
-    @apply mx-auto flex max-w-3xl flex-col items-center justify-between sm:flex-row;
+    @apply mx-auto flex max-w-5xl flex-col items-center justify-between sm:flex-row;
   }
   .top-nav-wrap {
     @apply relative flex w-full items-start justify-between p-4 sm:items-center sm:py-8;

src/components/Header.astro

@@ -7,6 +7,6 @@ export interface Props {
 const { noPadding = false, ariaHidden = true } = Astro.props;
 ---
 
-<div class={`max-w-3xl mx-auto ${noPadding ? "px-0" : "px-4"}`}>
+<div class={`max-w-5xl mx-auto ${noPadding ? "px-0" : "px-4"}`}>
   <hr class="border-skin-line" aria-hidden={ariaHidden} />
 </div>