addL light and dark theme

Author: Hetari

docs/get-started.md

@@ -25,6 +25,7 @@ Once installed, you can start using the `CodeBlock` component in your `Vue 3` ap
 ```vue ts:line-numbers {1}
 <template>
   <CodeBlock
+    theme="dark"
     :code="codeExample"
     language="javascript"
     class="custom-class"
@@ -82,6 +83,7 @@ greet('World');
 | ----------- | --------- | -------- | ------- | ----------------------------------------------------------------------- |
 | `code`      | `string`  | Yes      | N/A     | The code you want to display, passed as a string.                       |
 | `language`  | `string`  | Yes      | N/A     | Specifies the programming language for syntax highlighting.             |
+| `theme`     | `string`  | Yes      | N/A     | Specifies the theme to be used for syntax highlighting (light or dark). |
 | `asElement` | `string`  | No       | `<pre>` | Defines the HTML element wrapping the code block (defaults to `<pre>`). |
 | `numbered`  | `boolean` | No       | `false` | Displays line numbers when set to `true`.                               |
 
@@ -93,6 +95,7 @@ One of the key features of **vuejs-code-block** is that it provides **unstyled**
 <template>
   <div class="p-4 bg-gray-800 rounded-lg">
     <CodeBlock
+      theme="dark"
       :code="exampleCode"
       language="javascript" />
   </div>

src/App.vue

@@ -1,6 +1,7 @@
 <template>
   Test:
   <CodeBlock
+    theme="dark"
     :code="code"
     language="python"
     code-class="codeClass"
@@ -27,6 +28,6 @@ ss = 2
 
 <style>
   body {
-    background-color: #000;
+    /* background-color: #000; */
   }
 </style>

src/components/code-block/CodeBlock.vue

@@ -2,7 +2,7 @@
   <!-- Code Block Component -->
   <component
     :id="props.id"
-    :class="props.class"
+    :class="`${props.class} ${props.theme}`"
     :is="props.asElement || 'pre'"
     v-bind="$attrs"
     class="code">
@@ -53,9 +53,12 @@
   .code {
     padding: 1rem;
     border-radius: 0.25rem;
+    border: 1px solid #888;
+  }
+
+  .dark.code {
     background-color: #121212;
     color: #fff;
-    border: 1px solid #888;
   }
 
   .line {

src/components/code-block/types.ts

@@ -1,4 +1,4 @@
-import { SupportedLanguageTypes } from 'code-block';
+import { SupportedLanguageTypes, themeType } from 'code-block';
 import type {
   ComponentPublicInstance,
   ExtractPropTypes,
@@ -52,6 +52,10 @@ export const codeBlockProps = () =>
       type: Boolean as PropType<boolean>,
       required: false,
       default: false
+    },
+    theme: {
+      type: String as PropType<themeType>,
+      required: true
     }
   } as const);
 
@@ -74,12 +78,13 @@ export interface UseCodeBlockProps {
   class: MaybeRefOrGetter<string | null>;
   id: MaybeRefOrGetter<string | null>;
   code: MaybeRefOrGetter<string>;
-  language: MaybeRefOrGetter<string>;
+  language: MaybeRefOrGetter<SupportedLanguageTypes>;
   codeClass: MaybeRefOrGetter<string>;
   linesHighlighted: MaybeRefOrGetter<string[] | number[]>;
   wordsHighlighted: MaybeRefOrGetter<string[]>;
   asElement: MaybeRefOrGetter<string | null>;
   numbered: MaybeRefOrGetter<boolean>;
+  theme: MaybeRefOrGetter<themeType>;
 }
 
 // Props goes here
@@ -98,6 +103,7 @@ export type PublicCodeBlockProps = Partial<
     | 'wordsHighlighted'
     | 'asElement'
     | 'numbered'
+    | 'theme'
   >
 > &
   // Then explicitly pick properties from UseCodeBlockProps to make them required
@@ -112,4 +118,5 @@ export type PublicCodeBlockProps = Partial<
     | 'wordsHighlighted'
     | 'asElement'
     | 'numbered'
+    | 'theme'
   >;

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

@@ -17,7 +17,8 @@ const defaultProps = {
   linesHighlighted: [],
   wordsHighlighted: [],
   asElement: '',
-  numbered: false
+  numbered: false,
+  theme: ''
 };
 
 export function useCodeBlock(props: PublicCodeBlockProps) {

src/components/utils.ts

@@ -1,7 +1,6 @@
+import 'prismjs/themes/prism.min.css';
 import 'prismjs/themes/prism-dark.min.css';
-
 import { Prism } from './prism-langs';
-// import 'prismjs/themes/prism-con.min.css';
 
 export function highlightedCode(code: string, language: string) {
   if (code === null || code === undefined) {

src/types/code-block.d.ts

@@ -7,13 +7,15 @@ declare module 'code-block' {
     class: string;
     id: string;
     code: string;
-    language: string;
+    language: SupportedLanguage;
     codeClass: string;
     linesHighlighted: string[] | number[];
     wordsHighlighted: string[];
     asElement: string;
     numbered: boolean;
+    theme: themeType;
   }
+  type themeType = 'light' | 'dark';
 
   type SupportedLanguage =
     | 'plain'
@@ -72,5 +74,9 @@ declare module 'code-block' {
     | 'java';
 
   const CodeBlockType: DefineComponent<CodeBlockProps>;
-  export { CodeBlockType, SupportedLanguage as SupportedLanguageTypes };
+  export {
+    CodeBlockType,
+    SupportedLanguage as SupportedLanguageTypes,
+    themeType
+  };
 }