feat: add markdown callout support (#28)

* feat: add markdown callout support

* feat: add callout support

package.json

@@ -12,6 +12,7 @@
  "@formkit/auto-animate": "^0.8.1",
  "@lottiefiles/react-lottie-player": "^3.5.3",
  "@portabletext/react": "^3.0.11",
+ "@r4ai/remark-callout": "^0.4.0",
  "@sanity/image-url": "^1.0.2",
  "@sanity/vision": "^3.25.0",
  "@tailwindcss/typography": "^0.5.10",
@@ -50,6 +51,7 @@
  "eslint": "^8.56.0",
  "eslint-config-next": "^14.0.4",
  "postcss": "^8.4.33",
+ "postcss-nesting": "^12.1.5",
  "prettier": "^3.1.1",
  "prettier-plugin-tailwindcss": "^0.5.11",
  "tailwindcss": "^3.4.1",

postcss.config.cjs

@@ -1,5 +1,6 @@
 const config = {
  plugins: {
+ "tailwindcss/nesting": {},
  tailwindcss: {},
  autoprefixer: {},
  },

src/pages/_app.tsx

@@ -15,6 +15,7 @@ import "easymde/dist/easymde.min.css";
 // import "../styles/github-dark.css";
 // import "../styles/isbl-editor-dark.css";
 import "../styles/catppuccin-frape.css";
+import "../styles/callout-style.css";
 
 const outfit = Outfit({ subsets: ["latin"] });
 

src/pages/blog/[slug].tsx

@@ -15,6 +15,7 @@ import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
 import remarkMath from "remark-math";
 import rehypeMathjax from "rehype-mathjax";
+import remarkCallout from "@r4ai/remark-callout";
 
 const markdown =
  "``` js\nvar foo = function (bar) {\n return bar++;\n};\n\nconsole.log(foo(5));\n ```\n Just a link: www.nasa.gov.";
@@ -39,7 +40,7 @@ const BlogPost: NextPageWithLayout<
  < */}
  <div className="prose w-screen p-5">
  <Markdown
- remarkPlugins={[remarkGfm, remarkMath]}
+ remarkPlugins={[remarkGfm, remarkMath, remarkCallout]}
  rehypePlugins={[rehypeHighlight, rehypeMathjax]}
  >
  {post.body}