add some default style

src/App.vue

@@ -6,6 +6,7 @@
     :code="code"
     language="python"
     code-class="codeClass"
+    :numbered="true"
     :lines-highlighted="[1, 2]"
     :words-highlighted="['log']"
     as-element="" />
@@ -14,23 +15,11 @@
 
 <script setup lang="ts">
   import { CodeBlock } from './components/code-block';
-  const code = `console.log('Hello');
-  const name = 'World';
-  def greet(name) {
-     console.log('Hello, ' + name);
-  }
-  `;
+  const code = `
+console.log('Hello');
+const name = 'World';
+def greet(name) {
+    console.log('Hello, ' + name);
+}
+`;
 </script>
-
-<style>
-  .my-class {
-    color: rgb(65, 24, 24);
-    border: 1px solid red;
-    border-radius: 10px;
-    font-size: 16px;
-  }
-  #my-id {
-    /* background-color: rgb(0, 0, 0); */
-    padding: 25px;
-  }
-</style>

src/components/code-block/CodeBlock.vue

@@ -15,9 +15,10 @@
   const props = defineProps(codeBlockProps());
 
   // TODO: add theme
+  // codeClass: props.codeClass,
   const rootContext = computed(() => ({
-    // codeClass: props.codeClass,
     code: parseCodeIntoLines(props.code, props.language),
+    numbered: props.numbered,
     language: props.language,
     linesHighlighted: props.linesHighlighted,
     wordsHighlighted: props.wordsHighlighted,

src/components/code-block/types.ts

@@ -47,6 +47,11 @@ export const codeBlockProps = () =>
       type: String as PropType<string>,
       required: false,
       default: ''
+    },
+    numbered: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: false
     }
   } as const);
 
@@ -74,6 +79,7 @@ export interface UseCodeBlockProps {
   linesHighlighted: MaybeRefOrGetter<string[] | number[]>;
   wordsHighlighted: MaybeRefOrGetter<string[]>;
   asElement: MaybeRefOrGetter<string | null>;
+  numbered: MaybeRefOrGetter<boolean>;
 }
 
 // Props goes here
@@ -91,6 +97,7 @@ export type PublicCodeBlockProps = Partial<
     | 'linesHighlighted'
     | 'wordsHighlighted'
     | 'asElement'
+    | 'numbered'
   >
 > &
   // Then explicitly pick properties from UseCodeBlockProps to make them required
@@ -104,4 +111,5 @@ export type PublicCodeBlockProps = Partial<
     | 'linesHighlighted'
     | 'wordsHighlighted'
     | 'asElement'
+    | 'numbered'
   >;

src/components/code/Code.vue

@@ -1,11 +1,11 @@
 <template>
-  <component
-    :is="value.asElement || 'pre'"
-    v-bind="$attrs">
-    <template
-      v-for="(line, i) in value.code"
-      :key="i">
-      <Line :line="line"></Line>
+  <component 
+    :is="value.asElement || 'pre'" 
+    v-bind="$attrs" 
+    class="code"
+  >
+    <template v-for="(line, i) in value.code" :key="i">
+      <Line :number="i + 1" :numbered="value.numbered" :line="line"></Line>
     </template>
   </component>
 </template>
@@ -16,7 +16,7 @@
   import { useCode } from './use-code';
   import Line from '../line/Line.vue';
 
-  const props = defineProps(codeProps());
+  defineProps(codeProps());
 
   defineComponent<codeInstance>({
     name: 'Code',
@@ -26,3 +26,11 @@
     }
   });
 </script>
+
+<style>
+.code {
+  padding: 1rem 1.5rem;
+  border-radius: 0.25rem;
+  background-color: #f5f5f5;
+}
+</style>

src/components/code/types.ts

@@ -11,6 +11,7 @@ type CodeProps = {
   linesHighlighted: string[] | number[];
   wordsHighlighted: string[];
   asElement: string;
+  numbered: boolean;
 };
 
 // Props goes here

src/components/line/Line.vue

@@ -1,5 +1,14 @@
 <template>
-  <div v-html="line"></div>
+  <div class="line">
+    <div class="number-container">
+      <span
+        class="number"
+        v-if="numbered"
+        >{{ number }}</span
+      >
+    </div>
+    <div v-html="line"></div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -17,3 +26,19 @@
     }
   });
 </script>
+
+<style>
+  .line {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+  .number-container {
+    color: #666;
+  }
+
+  .number {
+    font-size: 0.8rem;
+    user-select: none;
+  }
+</style>

src/components/line/types.ts

@@ -11,6 +11,16 @@ export const lineProps = () =>
     line: {
       type: String as PropType<string>,
       required: true
+    },
+    numbered: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: false
+    },
+    number: {
+      type: Number as PropType<number>,
+      required: false,
+      default: 0
     }
   } as const);
 
@@ -25,8 +35,12 @@ export type lineInstance = ComponentPublicInstance<lineProps, lineExpose>;
 // Props goes here
 export interface UseLineProps {
   line: MaybeRefOrGetter<object>;
+  numbered: MaybeRefOrGetter<boolean>;
+  number: MaybeRefOrGetter<number>;
 }
 
 // Props goes here
-export type PublicLineProps = Partial<Omit<UseLineProps, 'line'>> &
-  Pick<UseLineProps, 'line'>;
+export type PublicLineProps = Partial<
+  Omit<UseLineProps, 'line' | 'numbered' | 'number'>
+> &
+  Pick<UseLineProps, 'line' | 'numbered' | 'number'>;