add more icons

Author: Hetari

package-lock.json

@@ -63,6 +63,7 @@
     "vite": "^5.4.1",
     "vite-plugin-dts": "^4.2.2",
     "vite-plugin-libcss": "^1.1.1",
+    "vite-svg-loader": "^5.1.0",
     "vitepress": "^1.3.4",
     "vue-tsc": "^2.0.29"
   },

package.json

@@ -3,7 +3,7 @@
   <CodeBlock
     theme="dracula"
     :code="code"
-    language="js"
+    language="python"
     :numbered="true"
     file-name="">
   </CodeBlock>

src/App.vue

@@ -1,4 +1,8 @@
 <template>
+  <img
+    width="240"
+    :src="icons[props.language]"
+    alt="" />
   <!-- Code Block Component -->
   <div
     :id="props.id"
@@ -32,6 +36,7 @@
 </template>
 
 <script setup lang="ts">
+  import { icons } from '../icons';
   import {
     computed,
     defineComponent,
@@ -52,6 +57,8 @@
   import { addThemeToCodeBlock, themes } from '../themes';
 
   const props = defineProps(codeBlockProps());
+  const langIcon = ref(`../icons/${props.language}.svg`);
+
   const codeBlock: Ref<HTMLDivElement | null> = ref(null);
 
   const code = computed(() => parseCodeIntoLines(props.code, props.language));

src/components/code-block/CodeBlock.vue

@@ -0,0 +1,51 @@
+import { SupportedLanguageTypes } from 'code-block';
+
+const iconModules = import.meta.glob('./*.svg', { eager: true });
+
+const aliasMap: Record<string, string> = {
+  DFS: 'svg',
+  coffeescript: 'coffee',
+  clike: 'c',
+  extend: 'markdown',
+  js: 'javascript',
+  jsx: 'typescript',
+  kts: 'kotlin',
+  kt: 'kotlin',
+  markup: 'html',
+  mathml: 'xml',
+  md: 'markdown',
+  objc: 'c',
+  objectivec: 'c',
+  plain: 'document',
+  plaintext: 'document',
+  py: 'python',
+  ssml: 'xml',
+  ts: 'typescript',
+  tsx: 'typescript',
+  txt: 'document',
+  text: 'document',
+  webmanifest: 'json',
+  xml: 'markup',
+  yml: 'yaml'
+};
+
+export const icons = Object.fromEntries(
+  Object.entries(iconModules).flatMap(([key, value]) => {
+    // remove './' prefix and '.svg' suffix
+    const name = key.slice(2, -4);
+
+    const defaultExport = (value as { default: any }).default;
+    const entries = [[name, defaultExport]];
+
+    // Check if the name has an alias
+    const aliases = Object.entries(aliasMap).filter(
+      ([aliasKey, originalKey]) => originalKey === name
+    );
+
+    aliases.forEach(([aliasKey]) => {
+      entries.push([aliasKey, defaultExport]);
+    });
+
+    return entries;
+  })
+);