add prismjs for syntax highlight

package.json

@@ -49,11 +49,13 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
+    "@types/prismjs": "^1.26.4",
     "vue": "^3.0.0"
   },
   "devDependencies": {
     "@types/node": "^22.7.4",
     "@vitejs/plugin-vue": "^5.1.2",
+    "prismjs": "^1.29.0",
     "semantic-release": "^24.1.2",
     "typescript": "^5.5.3",
     "vite": "^5.4.1",
@@ -64,4 +66,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

src/App.vue

@@ -2,16 +2,7 @@
 
 <template>
   Test:
-  <code>
-    <pre>
-  <CodeBlock
-    class="my-class"
-    id="my-id"
-    code="'sss'" />
-  <CodeBlock code="'123'" />
-  <CodeBlock code="'123sds'"> s </CodeBlock>
-  </pre>
-  </code>
+  <CodeBlock code="console.log('Hello, World!');" />
   End of App.vue
 </template>
 

src/components/code-block/CodeBlock.vue

@@ -2,21 +2,18 @@
   <div
     :class="class"
     :id="id">
-    Vuejs Code Block
+    <code
+      :class="codeClass"
+      v-html="highlightedCode"></code>
+    <slot name="default"></slot>
   </div>
-  {{ code }}
-
-  Slot here default:
-  <slot name="default"></slot>
-
-  Slot here trigger:
-  <slot name="trigger"></slot>
 </template>
 
 <script setup lang="ts">
-  import { defineComponent, toRefs } from 'vue';
+  import { defineComponent, ref, toRefs } from 'vue';
   import { codeBlockProps, codeBlockInstance } from './types';
   import { useCodeBlock } from './use-code-block';
+  import { highlightedCode } from './utils';
 
   defineProps(codeBlockProps());
   defineComponent<codeBlockInstance>({

src/components/code-block/types.ts

@@ -22,6 +22,11 @@ export const codeBlockProps = () =>
     code: {
       type: String as PropType<string>,
       required: true
+    },
+    codeClass: {
+      type: String as PropType<string>,
+      required: false,
+      default: ''
     }
   } as const);
 
@@ -49,16 +54,17 @@ export interface UseCodeBlockProps {
   class: MaybeRefOrGetter<string | null>;
   id: MaybeRefOrGetter<string | null>;
   code: MaybeRefOrGetter<string>;
+  codeClass: MaybeRefOrGetter<string>;
 }
 
 // Props goes here
 // The type `PublicCodeBlockProps` allows optional properties from UseCodeBlockProps,
 // but ensures that properties are required.
 export type PublicCodeBlockProps = Partial<
   // Omit properties from UseCodeBlockProps to make the remaining props optional
-  Omit<UseCodeBlockProps, 'code' | 'class' | 'id'>
+  Omit<UseCodeBlockProps, 'code' | 'class' | 'id' | 'codeClass'>
 > &
   // Then explicitly pick properties from UseCodeBlockProps to make them required
-  Pick<UseCodeBlockProps, 'code' | 'class' | 'id'>;
+  Pick<UseCodeBlockProps, 'code' | 'class' | 'id' | 'codeClass'>;
 
 export type PropertyFunction<T> = () => T;

src/components/code-block/use-code-block.ts

@@ -11,7 +11,8 @@ import { PublicCodeBlockProps } from './types';
 const defaultProps = {
   class: '',
   id: '',
-  code: ''
+  code: '',
+  codeClass: ''
 };
 
 export function useCodeBlock(props: PublicCodeBlockProps) {

src/components/code-block/utils.ts

@@ -0,0 +1,26 @@
+import 'prismjs/themes/prism.css';
+
+import { computed } from 'vue';
+import { highlight, languages } from 'prismjs';
+
+export function highlightedCode(code: String, language: String) {
+  return computed(() => {
+    if (code === null || code === undefined) {
+      throw new Error('Code is null or undefined');
+    }
+
+    if (typeof code !== 'string') {
+      throw new Error('Code is not a string');
+    }
+
+    const prismLanguage = languages[language as string] || languages.markup;
+
+    if (!prismLanguage) {
+      throw new Error(
+        `Prism component for language "${language}" was not found. Did you forget to register it?`
+      );
+    }
+
+    return highlight(code, prismLanguage, language as string);
+  });
+}

src/types/code-block.d.ts

@@ -7,6 +7,7 @@ declare module 'code-block' {
     class: string;
     id: string;
     code: string;
+    codeClass: string;
   }
 
   const CodeBlockType: DefineComponent<CodeBlockProps>;

tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/index.ts","./src/main.ts","./src/components/components.ts","./src/components/index.ts","./src/components/code-block/index.ts","./src/components/code-block/types.ts","./src/components/code-block/use-code-block.ts","./src/types/code-block.d.ts","./src/App.vue","./src/components/code-block/CodeBlock.vue"],"version":"5.6.2"}
+{"root":["./src/index.ts","./src/main.ts","./src/components/components.ts","./src/components/index.ts","./src/components/code-block/index.ts","./src/components/code-block/types.ts","./src/components/code-block/use-code-block.ts","./src/components/code-block/utils.ts","./src/types/code-block.d.ts","./src/App.vue","./src/components/code-block/CodeBlock.vue"],"version":"5.6.2"}

vite.config.ts

@@ -26,7 +26,7 @@ export default defineConfig({
       formats: ['es', 'cjs'] // Output formats
     },
     rollupOptions: {
-      external: ['vue'], // Externalize dependencies
+      external: ['vue', 'prismjs/themes/prism.css'],
       output: {
         globals: {
           vue: 'Vue' // Global variable for Vue