fix parsing

Author: Hetari

src/App.vue

@@ -4,7 +4,7 @@
     class="my-class"
     id="my-id"
     :code="code"
-    language="js"
+    language="py"
     code-class="codeClass"
     :lines-highlighted="[1, 2]"
     :words-highlighted="['log']"
@@ -15,18 +15,19 @@
 <script setup lang="ts">
   import { CodeBlock } from '../dist';
   const code = `console.log('Hello');
-                const name = 'World';
-                `;
+  const name = 'World';
+  `;
 </script>
 
 <style>
   .my-class {
     color: rgb(65, 24, 24);
     border: 1px solid red;
     border-radius: 10px;
+    font-size: 16px;
   }
   #my-id {
-    background-color: rgb(107, 194, 126);
+    /* background-color: rgb(0, 0, 0); */
     padding: 25px;
   }
 </style>

src/components/code-block/CodeBlock.vue

@@ -17,7 +17,7 @@
   // TODO: add theme
   const rootContext = computed(() => ({
     // codeClass: props.codeClass,
-    code: parseCodeIntoLines(props.code),
+    code: parseCodeIntoLines(props.code, props.language),
     language: props.language,
     linesHighlighted: props.linesHighlighted,
     wordsHighlighted: props.wordsHighlighted,

src/components/line/Line.vue

@@ -1,12 +1,17 @@
-<template></template>
+<template>
+  <div v-html="line"></div>
+</template>
 
 <script setup lang="ts">
-  import { defineComponent, toRefs } from 'vue';
+  import { defineComponent, onBeforeMount, toRefs } from 'vue';
   import { lineProps, lineInstance } from './types';
   import { useCode } from './use-line';
+  import { highlightedCode } from '../utils';
 
   const props = defineProps(lineProps());
-
+  // onBeforeMount(()=> {
+  //   highlightedCode(props.line);
+  // })
   defineComponent<lineInstance>({
     name: 'Line',
     props: lineProps(),

src/components/utils.ts

@@ -1,6 +1,5 @@
-import 'prismjs/themes/prism.css';
 import { highlight, languages } from 'prismjs';
-// import 'prismjs-components-importer/esm';
+import 'prismjs/themes/prism-tomorrow.min.css';
 
 export function highlightedCode(code: string, language: string) {
   if (code === null || code === undefined) {
@@ -23,13 +22,19 @@ export function highlightedCode(code: string, language: string) {
   return highlight(code, prismLanguage, language);
 }
 
-export function parseCodeIntoLines(code: string): string[] {
+export function parseCodeIntoLines(
+  code: string,
+  language: string = 'markup'
+): string[] {
   if (typeof code !== 'string') {
     throw new Error('Provided code must be a string');
   }
 
   return code
     .split(/\r?\n/)
     .map((line) => line.trim())
-    .filter((l) => l.length > 0);
+    .filter((l) => l.length > 0)
+    .map((line) => {
+      return highlightedCode(line, language);
+    });
 }

tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/index.ts","./src/main.ts","./src/components/components.ts","./src/components/index.ts","./src/components/utils.ts","./src/components/code/index.ts","./src/components/code/types.ts","./src/components/code/use-code.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/types/code.d.ts","./src/App.vue","./src/components/code/Code.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/utils.ts","./src/components/code/index.ts","./src/components/code/types.ts","./src/components/code/use-code.ts","./src/components/code-block/index.ts","./src/components/code-block/types.ts","./src/components/code-block/use-code-block.ts","./src/components/line/index.ts","./src/components/line/types.ts","./src/components/line/use-line.ts","./src/types/code-block.d.ts","./src/types/code.d.ts","./src/types/line.d.ts","./src/App.vue","./src/components/code/Code.vue","./src/components/code-block/CodeBlock.vue","./src/components/line/Line.vue"],"version":"5.6.2"}