add more components

scroll-tech · Jun 27, 2024 · 3761f2b · 3761f2b
1 parent f5e7cb2
commit 3761f2b
Show file tree

Hide file tree

Showing 13 changed files with 23,005 additions and 46 deletions.
diff --git a/astro.config.ts b/astro.config.ts
@@ -13,11 +13,11 @@ import rehypeMermaid from "rehype-mermaidjs"
 import remarkGfm from "remark-gfm"
 import remarkMath from "remark-math"
 import AutoImport from "astro-auto-import"
-
 import sitemap from "@astrojs/sitemap"
-
 import tailwind from "@astrojs/tailwind"
 
+import expressiveCode from "astro-expressive-code"
+
 // https://astro.build/config
 export default defineConfig({
   site: "https://docs.scroll.io",
@@ -32,18 +32,39 @@ export default defineConfig({
     preact({
       compat: true,
     }),
-
     sitemap({
       changefreq: "daily",
     }),
     astroCallouts(),
     solidityRemixCode(),
+    expressiveCode({
+      themes: ["dracula", "solarized-light"],
+      frames: {
+        // extractFileNameFromCode: false,
+      },
+      defaultProps: {
+        frame: "code",
+      },
+      styleOverrides: {
+        borderRadius: "27px",
+        borderColor: "transparent",
+        // focusBorder: 'transparent',
+        // scrollbarThumbColor: 'transparent',
+        // codeBackground: "red",
+        // You can optionally override the plugin's default styles here
+        frames: {
+          shadowColor: "transparent",
+          editorTabBorderRadius: "0.5rem",
+          editorBackground: "#2b2b2b",
+        },
+        // extractFileNameFromCode: false,
+      },
+    }),
     mdx(),
     tailwind({
       applyBaseStyles: false,
       nesting: true,
     }),
-
     astroI18next(),
   ],
   vite: {
@@ -54,7 +75,12 @@ export default defineConfig({
     remarkPlugins: [remarkMath, remarkGfm],
     rehypePlugins: [
       rehypeSlug,
-      [rehypeMermaid, { strategy: "img-png" }],
+      [
+        rehypeMermaid,
+        {
+          strategy: "img-png",
+        },
+      ],
       [
         rehypeAutolinkHeadings,
         {
@@ -63,7 +89,9 @@ export default defineConfig({
           content: {
             type: "element",
             tagName: "span",
-            properties: { className: ["icon", "icon-link"] },
+            properties: {
+              className: ["icon", "icon-link"],
+            },
             children: [],
           },
         },