feat: rehype code block

src/styles/codeblocks.css

@@ -0,0 +1,61 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  code[data-theme*=' '] span {
+    color: var(--shiki-light);
+  }
+
+  .dark code[data-theme*=' '] span {
+    color: var(--shiki-dark);
+  }
+
+  pre {
+    @apply overflow-x-auto rounded-xl p-4 text-sm leading-loose;
+  }
+
+  pre > code {
+    counter-reset: line;
+  }
+
+  code[data-line-numbers] {
+    counter-reset: line;
+  }
+
+  code[data-line-numbers] > [data-line]::before {
+    counter-increment: line;
+    content: counter(line);
+    @apply mr-4 inline-block w-4 text-right text-muted-foreground;
+  }
+
+  [data-highlighted-line] {
+    @apply !bg-secondary;
+  }
+
+  [data-highlighted-chars] > span {
+    @apply rounded-md border !bg-secondary p-1 font-semibold;
+  }
+
+  [data-rehype-pretty-code-title] {
+    @apply rounded-t-xl border-x border-t p-2 text-sm font-semibold !text-foreground;
+  }
+
+  [data-rehype-pretty-code-title] + pre {
+    @apply mt-0 rounded-t-none;
+  }
+
+  .diff.add {
+    background-color: #0505;
+  }
+  .diff.remove {
+    background-color: #8005;
+  }
+
+  .has-focused .line {
+    filter: blur(0.095rem);
+  }
+  .has-focused .focused {
+    filter: blur(0);
+  }
+}

src/styles/typography.css

@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
+@layer components {
   article {
     @apply prose prose-neutral dark:prose-invert;
     @apply prose-h1:scroll-m-20 prose-h1:text-4xl prose-h1:font-extrabold prose-h1:tracking-tight prose-h1:lg:text-5xl;