feat: add code highlight

assets/scss/index.scss

@@ -1,8 +1,14 @@
+@use "sass:meta";
+
 html,
 body {
   --color-primary: var(--el-color-primary);
   --el-border-radius-base: 8px;
   --el-border-radius-small: 4px;
+  @include meta.load-css("highlight.js/styles/a11y-light");
+}
+html.dark {
+  @include meta.load-css("highlight.js/styles/a11y-dark");
 }
 
 .page-enter-active,
@@ -24,3 +30,42 @@ body {
   opacity: 0;
   filter: grayscale(1);
 }
+
+.aianything-scrollbars {
+  & ::-webkit-scrollbar {
+    width: 0.6em;
+    height: 0.6em;
+    background: transparent;
+  }
+
+  & ::-webkit-scrollbar-track {
+    @apply bg-gray-100;
+  }
+
+  & ::-webkit-scrollbar-thumb {
+    border-radius: 0.6em;
+    @apply bg-gray-300;
+    &:hover {
+      @apply bg-gray-400;
+    }
+    &:active {
+      @apply bg-gray-500;
+    }
+  }
+
+  &.dark {
+    & ::-webkit-scrollbar-track {
+      @apply bg-gray-800;
+    }
+
+    & ::-webkit-scrollbar-thumb {
+      @apply bg-gray-700;
+      &:hover {
+        @apply bg-gray-600;
+      }
+      &:active {
+        @apply bg-gray-500;
+      }
+    }
+  }
+}

components/tool/ToolDetail.vue

@@ -13,6 +13,7 @@ const {
   reset,
   toggleHistory,
 } = useAi(props.tool);
+
 function submit(data: any) {
   send(data);
 }
@@ -29,7 +30,15 @@ defineExpose({
 });
 </script>
 <template>
-  <div flex flex-col style="height: calc(100vh - 125px)">
+  <div
+    class="[--scroll-y-offset:125px] [--scroll-x-offset:0px] md:[--scroll-x-offset:300px]"
+    flex
+    flex-col
+    style="
+      height: calc(100vh - var(--scroll-y-offset));
+      width: calc(100vw - var(--scroll-x-offset));
+    "
+  >
     <el-scrollbar height="100%">
       <div p-4 sm:p-10>
         <ToolResult v-if="!tool.chat" :html="resultHtml" />

package.json

@@ -33,6 +33,7 @@
     "@vueuse/integrations": "^9.13.0",
     "element-plus": "^2.3.0",
     "eventsource-parser": "^0.1.0",
+    "highlight.js": "^11.7.0",
     "idb-keyval": "^6.2.0",
     "marked": "^4.2.12",
     "next-auth": "4.20.1",

plugins/marked.client.ts

@@ -0,0 +1,13 @@
+import { marked } from "marked";
+import hljs from "highlight.js";
+
+export default defineNuxtPlugin(() => {
+  marked.setOptions({
+    renderer: new marked.Renderer(),
+    highlight: function (code, lang) {
+      const language = hljs.getLanguage(lang) ? lang : "plaintext";
+      return hljs.highlight(code, { language }).value;
+    },
+    langPrefix: "hljs language-",
+  });
+});

plugins/scrollbars.client.ts

@@ -0,0 +1,9 @@
+export default defineNuxtPlugin(() => {
+  if (
+    navigator &&
+    navigator.userAgent &&
+    navigator.userAgent.match(/Win[a-z0-9]*;/)
+  ) {
+    document.documentElement.classList.add("aianything-scrollbars");
+  }
+});