feat: introduce Expressive Code for code block rendering (#476)

* feat: improve code block feature with Expressive Code

* docs: add example Markdown file for visual review

* feat: improve styles of Expressive Code

* fix: errors from the merging

* chore: formatting

* chore: update config

* chore: update dependencies

* fix: fix build error

* fix: minor fixes

* fix: style tweaks

* docs: update example post

* fix: isolate copy button timeouts to avoid cross-button interference

---------

Co-authored-by: Hasenpfote <Hasenpfote36@gmail.com>

src/plugins/expressive-code/language-badge.ts

@@ -0,0 +1,48 @@
+/**
+ * Based on the discussion at https://github.com/expressive-code/expressive-code/issues/153#issuecomment-2282218684
+ */
+import { definePlugin } from "@expressive-code/core";
+
+export function pluginLanguageBadge() {
+	return definePlugin({
+		name: "Language Badge",
+		baseStyles: ({ cssVar }) => `
+      [data-language]::before {
+        position: absolute;
+        z-index: 2;
+        right: 0.5rem;
+        top: 0.5rem;
+        padding: 0.1rem 0.5rem;
+        content: attr(data-language);
+        font-size: 0.75rem;
+        font-weight: bold;
+        text-transform: uppercase;
+        color: oklch(0.75 0.1 var(--hue));
+        background: oklch(0.33 0.035 var(--hue));
+        border-radius: 0.5rem;
+        pointer-events: none;
+        transition: opacity 0.3s;
+        opacity: 0;
+      }
+      .frame:not(.has-title):not(.is-terminal) {
+        @media (hover: none) {
+          & [data-language]::before {
+            opacity: 1;
+            margin-right: 3rem;
+          }
+          & [data-language]:active::before {
+            opacity: 0;
+          }
+        }
+        @media (hover: hover) {
+          & [data-language]::before {
+            opacity: 1;
+          }
+          &:hover [data-language]::before {
+            opacity: 0;
+          }
+        }
+      }
+    `,
+	});
+}