From d61f3d9b0cca598280bee34c1407e897ff8f0311 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Fri, 4 Apr 2025 13:00:36 +0800
Subject: [PATCH] refactor(styles): rename style folder to styles

---
 src/components/content/mdx-renderer.tsx |  2 +-
 src/components/mdx-preview.tsx          |  2 +-
 src/styles/mdx.css                      | 49 +++++++++++++++++++++++++
 3 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 src/styles/mdx.css

diff --git a/src/components/content/mdx-renderer.tsx b/src/components/content/mdx-renderer.tsx
index 2b8d73e..89b16e7 100644
--- a/src/components/content/mdx-renderer.tsx
+++ b/src/components/content/mdx-renderer.tsx
@@ -1,4 +1,4 @@
-import "@/style/mdx.css";
+import "@/styles/mdx.css";
 import { cn } from "@/lib/utils";
 import { Suspense } from "react";
 import "katex/dist/katex.min.css";
diff --git a/src/components/mdx-preview.tsx b/src/components/mdx-preview.tsx
index d9c2c2d..a98ed0d 100644
--- a/src/components/mdx-preview.tsx
+++ b/src/components/mdx-preview.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import "@/style/mdx.css";
+import "@/styles/mdx.css";
 import { cn } from "@/lib/utils";
 import "katex/dist/katex.min.css";
 import remarkGfm from "remark-gfm";
diff --git a/src/styles/mdx.css b/src/styles/mdx.css
new file mode 100644
index 0000000..a3e340c
--- /dev/null
+++ b/src/styles/mdx.css
@@ -0,0 +1,49 @@
+[data-rehype-pretty-code-figure] pre {
+  @apply px-0;
+}
+
+[data-rehype-pretty-code-figure] code {
+  @apply text-sm !leading-loose md:text-base border-0 p-0;
+}
+
+[data-rehype-pretty-code-figure] code[data-line-numbers] {
+  counter-reset: line;
+}
+
+[data-rehype-pretty-code-figure] code[data-line-numbers]>[data-line]::before {
+  counter-increment: line;
+  content: counter(line);
+  @apply mr-4 inline-block w-4 text-right text-gray-500;
+}
+
+[data-rehype-pretty-code-figure] [data-line] {
+  @apply border-l-2 border-l-transparent px-3;
+}
+
+[data-rehype-pretty-code-figure] [data-highlighted-line] {
+  background: rgba(219, 234, 254, 0.5);
+  @apply border-l-blue-400;
+}
+
+.dark [data-rehype-pretty-code-figure] [data-highlighted-line] {
+  background: rgba(200, 200, 255, 0.1);
+  @apply border-l-blue-400;
+}
+
+[data-rehype-pretty-code-figure] [data-highlighted-chars] {
+  @apply rounded bg-zinc-400/50;
+  box-shadow: 0 0 0 4px rgb(161 161 170 / 0.5);
+}
+
+.dark [data-rehype-pretty-code-figure] [data-highlighted-chars] {
+  @apply rounded bg-zinc-500/50;
+  box-shadow: 0 0 0 4px rgb(113 113 122 / 0.5);
+}
+
+[data-rehype-pretty-code-figure] [data-chars-id] {
+  @apply border-b-2 p-1 shadow-none;
+}
+
+.subheading-anchor {
+  @apply no-underline hover:underline;
+}