fix: resolve hljs style injection issue

Signed-off-by: DingChil <xu.dingchao@gmail.com>

assets/styles/csui-reset.scss

@@ -1,6 +1,7 @@
 /* stylelint-disable */
-#webpilot-container {
+#webpilot-template {
   @import './reset.scss';
+  @import './solarized_light.scss';
 }
 
 #webpilot-content {
@@ -33,24 +34,26 @@
     background: #fdf6e3;
     color: #657b83;
     border-radius: 6px;
-    box-shadow: none !important;
+    // box-shadow: none !important;
+    box-shadow: none;
   }
-
-  // @import './solarized_light.scss';
 }
 
 @media (prefers-color-scheme: dark) {
   #webpilot-content {
     p {
     color: #dcdcdc;
-  }
-  li {
-    color: #dcdcdc;
-  }
+    }
+    li {
+      color: #dcdcdc;
+    }
     code {
       background: #002b36;
-      color: #839496;}
-
-      // @import './solarized_dark.scss';
+      color: #839496;
+    }
+  }
+
+  #webpilot-template {
+    @import './solarized_dark.scss';
   }
 }

assets/styles/csui-theme.scss

@@ -1,5 +1,5 @@
 /* Theme Color */
-
+/* stylelint-disable */
 :root {
   --webpilot-theme-main-text-color: #929497;
   --webpilot-theme-icon-default-and-secondary-text: #585b58;
@@ -14,6 +14,10 @@
   --webpilot-theme-brightness-number: 1;
   --webpilot-theme-invert-number: 0;
 }
+#webpilot-template {
+  @import './reset.scss';
+  @import './solarized_light.scss';
+}
 
 @media (prefers-color-scheme: dark) {
   :root {
@@ -30,4 +34,7 @@
     --webpilot-theme-brightness-number: 3;
     --webpilot-theme-invert-number: 1;
   }
+  #webpilot-template {
+    @import './solarized_dark.scss';
+  }
 }

src/components/PromptResult.vue

@@ -45,7 +45,7 @@ import {ref, watch, computed} from 'vue'
 // import {useToast} from 'vue-toast-notification'
 import Markdown from 'vue3-markdown-it'
 // eslint-disable-next-line import/no-unresolved
-import 'highlight.js/styles/monokai.css'
+// import 'highlight.js/styles/monokai.css'
 
 // import WebpilotButton from './WebpilotButton.vue'
 // import IconCheckmark from './icon/IconCheckmark.vue'

src/contents/Index.vue

@@ -21,6 +21,9 @@ export const config = {
 async function render({createRootContainer}) {
   const rootElement = await createRootContainer()
   const shadowElement = rootElement.attachShadow({mode: 'open'})
+  const templateElement = document.createElement('div')
+  templateElement.setAttribute('id', 'webpilot-template')
+  shadowElement.append(templateElement)
 
   const pinia = createPinia()
   const app = createApp(App)
@@ -31,7 +34,7 @@ async function render({createRootContainer}) {
   // init pinia data
   const store = useStore()
   await store.initConfig()
-  app.mount(shadowElement)
+  app.mount(templateElement)
 
   // inject styles
   insertStylesheet(shadowElement)