feat: code highlight

fix: active tab border
fix: code block background colors
fix: code block highlighted lines background color

prism-custom-themes/dark.js

@@ -1,7 +1,7 @@
 module.exports = {
   plain: {
     color: "#ffffff",
-    backgroundColor: "#161929",
+    backgroundColor: "#070A1B",
   },
   styles: [
     {
@@ -56,7 +56,7 @@ module.exports = {
     {
       types: ["attr-name"],
       style: {
-        color: "rgb(241, 250, 140)",
+        color: "rgb(80, 250, 123)",
       },
     },
   ],

prism-custom-themes/light.js

@@ -1,7 +1,7 @@
 module.exports = {
   plain: {
     color: "#434155",
-    backgroundColor: "##FFFFFF",
+    backgroundColor: "#F9FAFF",
   },
   styles: [
     {
@@ -56,7 +56,7 @@ module.exports = {
     {
       types: ["attr-name"],
       style: {
-        color: "rgb(241, 250, 140)",
+        color: "rgb(245, 149, 81)",
       },
     },
   ],

src/css/code-block.scss

@@ -0,0 +1,11 @@
+.theme-code-block {
+  box-shadow: var(--ifm-global-shadow-lw) !important;
+
+  & pre {
+    background-color: transparent !important;
+  }
+  & code {
+    border: 1px solid transparent;
+    border-radius: var(--ifm-code-border-radius);
+  }
+}

src/css/ifm-variables.scss

@@ -11,14 +11,14 @@
   --ifm-color-primary-lightest: #00d5f2;
   --ifm-code-font-size: 95%;
 
-  --docusaurus-highlighted-code-line-bg: rgba(0 0 0 0.1);
+  --docusaurus-highlighted-code-line-bg: rgba(83, 131, 255, 0.15);
 
   --ifm-font-color-base: #606376;
   --ifm-global-shadow-lw: 0px 2px 4px -2px rgba(7, 10, 27, 0.05),
     0px 4px 6px -1px rgba(7, 10, 27, 0.05), inset 0px 0px 0px 1px #d1d7ff;
-  --ifm-code-border-radius: 4px;
   --ifm-code-padding-vertical: 2px;
   --ifm-code-padding-horizontal: 4px;
+  --ifm-code-border-radius: 8px;
   --ifm-navbar-shadow: none;
   --ifm-navbar-link-color: #8c90a4;
 
@@ -57,8 +57,8 @@
   --ifm-color-primary-light: #08e1ff;
   --ifm-color-primary-lighter: #14e2ff;
   --ifm-color-primary-lightest: #38e7ff;
+  --ifm-color-emphasis-300: var(--bt-tabs-border-color) !important;
 
-  --docusaurus-highlighted-code-line-bg: rgba(0 0 0 0.3);
   --ifm-global-shadow-lw: 0px 2px 4px -2px rgba(7, 10, 27, 0.05),
     0px 4px 6px -1px rgba(7, 10, 27, 0.05), inset 0px 0px 0px 1px #323649;
   --ifm-menu-color-background-active: var(--bt-menu-color-background-active);

src/css/overrides.scss

@@ -5,4 +5,5 @@
 @use "tabs";
 @use "footer";
 @use "navbar";
+@use "code-block";
 @use "fonts";

src/css/tabs.scss

@@ -11,39 +11,50 @@ div:has(> .bt-tabs) {
   border-top: 1px solid var(--bt-tabs-border-color);
   border-left: 1px solid var(--bt-tabs-border-color);
   border-right: 1px solid var(--bt-tabs-border-color);
+  overflow-x: inherit;
 
   & + div {
     margin-top: 0 !important;
   }
   & li:first-child {
-    margin-left: 24px;
+    margin-left: 6px;
   }
 
-  & + div * .theme-code-block {
-    --prism-background-color: transparent !important;
-    background: var(--bt-code-editor-background-color);
-    padding-left: 24px;
-    box-shadow: var(--ifm-global-shadow-lw);
+  & + div .theme-code-block {
     border-radius: 0 0 8px 8px !important;
   }
 
   & > .tabs__item[aria-selected="true"] {
     color: var(--ifm-heading-color);
+    position: relative;
   }
 
   & > .tabs__item {
-    padding-top: 14px;
-    padding-bottom: 14px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    margin: 0 !important;
     color: var(--ifm-navbar-link-color);
+    font-size: 14px;
   }
 
   & > .tabs__item:hover {
-    background: none;
+    background-color: transparent;
     color: var(--ifm-heading-color);
   }
 
   & > .tabs__item--active {
-    padding-bottom: 12px;
-    border-bottom: 2px solid var(--ifm-tabs-color-active-border);
+    border: none;
+  }
+
+  & > .tabs__item--active::after {
+    content: "";
+    padding: 12px;
+    position: absolute;
+    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='2' rx='1' fill='%2300D2EF' /%3E%3C/svg%3E");
+    background-position: bottom center;
+    background-repeat: no-repeat;
+    bottom: -1px;
+    left: 50%;
+    margin-left: -12px;
   }
 }