add supported language types

Hetari · Hetari · commit 78296bf12a51 · 2024-10-03T14:03:19.000+03:00
diff --git a/src/App.vue b/src/App.vue
@@ -1,20 +1,26 @@
 <template>
   Test:
   <CodeBlock
-    class="my-class"
-    id="my-id"
     :code="code"
-    language="js"
+    language="javascript"
     code-class="codeClass"
     :numbered="true"
     :lines-highlighted="[1, 2]"
-    :words-highlighted="['log']"
-    as-element="" />
+    :words-highlighted="['log']">
+  </CodeBlock>
   End of App.vue
+  <!-- <pre>
+    {{ langs }}
+  </pre> -->
 </template>
 
 <script setup lang="ts">
+  import { ref } from 'vue';
   import { CodeBlock } from './components/code-block';
+
+  // import { Prism } from './components/prism-langs';
+  // const langs = ref(Object.keys(Prism.languages));
+
   const code = `
 console.log('Hello');
 const name = 'World';
diff --git a/src/components/code-block/CodeBlock.vue b/src/components/code-block/CodeBlock.vue
@@ -7,20 +7,15 @@
     v-bind="$attrs"
     class="code">
     <!-- Line Component -->
-    <template
-      v-for="(line, i) in code"
-      :key="i">
-      <div class="line">
-        <div class="number-container">
-          <span
-            class="number"
-            v-if="!props.numbered"
-            >{{ i + 1 }}</span
-          >
+    <slot>
+      <template
+        v-for="(line, i) in code"
+        :key="i">
+        <div class="line">
+          <div v-html="line"></div>
         </div>
-        <div v-html="line"></div>
-      </div>
-    </template>
+      </template>
+    </slot>
   </component>
 </template>
 
diff --git a/src/components/code-block/types.ts b/src/components/code-block/types.ts
@@ -1,3 +1,4 @@
+import { SupportedLanguageTypes } from 'code-block';
 import type {
   ComponentPublicInstance,
   ExtractPropTypes,
@@ -24,7 +25,7 @@ export const codeBlockProps = () =>
       required: true
     },
     language: {
-      type: String as PropType<string>,
+      type: String as PropType<SupportedLanguageTypes>,
       required: true
     },
     codeClass: {
diff --git a/src/components/generate-prism-languages/index.ts b/src/components/generate-prism-languages/index.ts
@@ -12,19 +12,20 @@
 // import * as uglify from 'uglify-js';
 
 // export const languagesToBundle = <const>[
-//   'markup',
+//   'vue',
 //   'jsx',
 //   'tsx',
 //   'swift',
 //   'kotlin',
+//   'java',
 //   'objectivec',
-//   'js-extras',
-//   'reason',
+//   'javascript',
 //   'rust',
 //   'graphql',
 //   'yaml',
 //   'go',
 //   'cpp',
+//   'c',
 //   'markdown',
 //   'python',
 //   'json'
diff --git a/src/components/prism-langs.ts b/src/components/prism-langs.ts
diff --git a/src/types/code-block.d.ts b/src/types/code-block.d.ts
@@ -15,6 +15,62 @@ declare module 'code-block' {
     numbered: boolean;
   }
 
+  type SupportedLanguage =
+    | 'plain'
+    | 'plaintext'
+    | 'text'
+    | 'txt'
+    | 'extend'
+    | 'insertBefore'
+    | 'DFS'
+    | 'markup'
+    | 'html'
+    | 'mathml'
+    | 'svg'
+    | 'xml'
+    | 'ssml'
+    | 'atom'
+    | 'rss'
+    | 'css'
+    | 'clike'
+    | 'javascript'
+    | 'js'
+    | 'regex'
+    | 'actionscript'
+    | 'coffeescript'
+    | 'coffee'
+    | 'javadoclike'
+    | 'yaml'
+    | 'yml'
+    | 'markdown'
+    | 'md'
+    | 'graphql'
+    | 'sql'
+    | 'typescript'
+    | 'ts'
+    | 'jsdoc'
+    | 'flow'
+    | 'n4js'
+    | 'n4jsd'
+    | 'jsx'
+    | 'tsx'
+    | 'swift'
+    | 'kotlin'
+    | 'kt'
+    | 'kts'
+    | 'c'
+    | 'objectivec'
+    | 'objc'
+    | 'reason'
+    | 'rust'
+    | 'go'
+    | 'cpp'
+    | 'python'
+    | 'py'
+    | 'json'
+    | 'webmanifest'
+    | 'java';
+
   const CodeBlockType: DefineComponent<CodeBlockProps>;
-  export { CodeBlockType };
+  export { CodeBlockType, SupportedLanguage as SupportedLanguageTypes };
 }
