feat: add more code block themes (#331)

src/components/CodemirrorEditor/EditorHeader/StyleOptionMenu.vue

@@ -48,7 +48,7 @@ function setStyle(title, value) {
       <span>{{ props.title }}</span>
     </DropdownMenuSubTrigger>
     <DropdownMenuPortal>
-      <DropdownMenuSubContent>
+      <DropdownMenuSubContent class="max-h-56 overflow-auto">
         <DropdownMenuItem
           v-for="{ label, value, desc } in options"
           :key="value"

src/config/index.js

@@ -65,32 +65,92 @@ export const colorOptions = [
   // { label: `微信绿`, value: `rgb(26, 173, 25,1)`, desc: `经典微信绿` },
 ]
 
+const codeBlockUrlPrefix = `https://cdn.bootcdn.net/ajax/libs/highlight.js/11.10.0/styles/`
+const codeBlockThemeList = [
+  `1c-light.min.css`,
+  `a11y-dark.min.css`,
+  `a11y-light.min.css`,
+  `agate.min.css`,
+  `an-old-hope.min.css`,
+  `androidstudio.min.css`,
+  `arduino-light.min.css`,
+  `arta.min.css`,
+  `ascetic.min.css`,
+  `atom-one-dark-reasonable.min.css`,
+  `atom-one-dark.min.css`,
+  `atom-one-light.min.css`,
+  `brown-paper.min.css`,
+  `codepen-embed.min.css`,
+  `color-brewer.min.css`,
+  `dark.min.css`,
+  `default.min.css`,
+  `devibeans.min.css`,
+  `docco.min.css`,
+  `far.min.css`,
+  `felipec.min.css`,
+  `foundation.min.css`,
+  `github-dark-dimmed.min.css`,
+  `github-dark.min.css`,
+  `github.min.css`,
+  `gml.min.css`,
+  `googlecode.min.css`,
+  `gradient-dark.min.css`,
+  `gradient-light.min.css`,
+  `grayscale.min.css`,
+  `hybrid.min.css`,
+  `idea.min.css`,
+  `intellij-light.min.css`,
+  `ir-black.min.css`,
+  `isbl-editor-dark.min.css`,
+  `isbl-editor-light.min.css`,
+  `kimbie-dark.min.css`,
+  `kimbie-light.min.css`,
+  `lightfair.min.css`,
+  `lioshi.min.css`,
+  `magula.min.css`,
+  `mono-blue.min.css`,
+  `monokai-sublime.min.css`,
+  `monokai.min.css`,
+  `night-owl.min.css`,
+  `nnfx-dark.min.css`,
+  `nnfx-light.min.css`,
+  `nord.min.css`,
+  `obsidian.min.css`,
+  `panda-syntax-dark.min.css`,
+  `panda-syntax-light.min.css`,
+  `paraiso-dark.min.css`,
+  `paraiso-light.min.css`,
+  `pojoaque.min.css`,
+  `purebasic.min.css`,
+  `qtcreator-dark.min.css`,
+  `qtcreator-light.min.css`,
+  `rainbow.min.css`,
+  `routeros.min.css`,
+  `school-book.min.css`,
+  `shades-of-purple.min.css`,
+  `srcery.min.css`,
+  `stackoverflow-dark.min.css`,
+  `stackoverflow-light.min.css`,
+  `sunburst.min.css`,
+  `tokyo-night-dark.min.css`,
+  `tokyo-night-light.min.css`,
+  `tomorrow-night-blue.min.css`,
+  `tomorrow-night-bright.min.css`,
+  `vs.min.css`,
+  `vs2015.min.css`,
+  `xcode.min.css`,
+  `xt256.min.css`,
+]
+
 export const codeBlockThemeOptions = [
-  {
+  ...codeBlockThemeList.map((codeBlockTheme) => {
-    label: `github`,
+    const url = `${codeBlockUrlPrefix}${codeBlockTheme}`
-    value: `https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/highlight.js@11.5.1/styles/github.min.css`,
+    const label = codeBlockTheme.replace(`.min.css`, ``)
-    desc: `light`,
+    return {
-  },
+      label,
-  {
+      value: url,
-    label: `solarized-light`,
+    }
-    value: `https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/highlight.js@11.5.1/styles/solarized-light.min.css`,
+  }),
-    desc: `light`,
-  },
-  {
-    label: `atom-one-dark`,
-    value: `https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/highlight.js@11.5.1/styles/atom-one-dark.min.css`,
-    desc: `dark`,
-  },
-  {
-    label: `obsidian`,
-    value: `https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/highlight.js@11.5.1/styles/obsidian.min.css`,
-    desc: `dark`,
-  },
-  {
-    label: `vs2015`,
-    value: `https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/highlight.js@11.5.1/styles/vs2015.min.css`,
-    desc: `dark`,
-  },
 ]
 
 export const legendOptions = [