feat: use shiki for better syntax highlighting (#2)

Author: antfu

README.md

@@ -44,12 +44,12 @@ Source code to highlight.
 
 ### lang
 
-- Type: `string`
-
-Language of the source code. If you don't set it yourself, this component will try to auto-detect it. [All languages of highlight.js](https://github.com/highlightjs/highlight.js/blob/master/SUPPORTED_LANGUAGES.md#supported-languages) are supported.
+- Type: [Lang](https://github.com/shikijs/shiki/blob/main/docs/languages.md)
 
 ### theme
 
-- Type: [Theme](https://github.com/felixfbecker/cli-highlight/blob/main/src/theme.ts#L280)<br>
+- Type: [Theme](https://github.com/shikijs/shiki/blob/main/docs/themes.md)<br>
+
+## Credits
 
-You can write your custom theme and pass it as a prop. [More info regarding custom theme](https://github.com/felixfbecker/cli-highlight/blob/main/README.md#themes).
+Syntax Highlight is based on [Shiki](https://github.com/shikijs/shiki)

package.json

@@ -44,19 +44,20 @@
   },
   "homepage": "https://github.com/vue-terminal/syntax-highlight#readme",
   "peerDependencies": {
-    "vue-termui": "^0.0.17",
-    "@vue/runtime-core": "^3.2.41"
+    "@vue/runtime-core": "^3.2.41",
+    "vue-termui": "^0.0.17"
   },
   "devDependencies": {
     "@types/node": "^18.11.9",
     "@vue/runtime-core": "^3.2.41",
+    "chalk": "^5.2.0",
     "prettier": "^2.8.0",
     "tsup": "^6.5.0",
     "typescript": "^4.9.3",
     "vue": "^3.2.41",
     "vue-termui": "0.0.17"
   },
   "dependencies": {
-    "cli-highlight": "^2.1.11"
+    "shiki": "^0.11.1"
   }
 }

playground/components.d.ts

@@ -8,5 +8,6 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     Box: typeof import('vue-termui')['TuiBox']
+    Text: typeof import('vue-termui')['TuiText']
   }
 }

playground/src/App.vue

@@ -15,18 +15,36 @@ setInterval(()=> {
 }, 1000)
 `
 )
+
+const code2 = `
+fn main() {
+  // Print text to the console
+  println!("Hello World!");
+}
+`
 </script>
 
 <template>
   <Box
-    :padding="2"
+    :padding="1"
     :width="50"
     justifyContent="center"
     alignItems="center"
     flexDirection="column"
-    borderColor="blue"
+    borderColor="green"
     borderStyle="round"
   >
     <SyntaxHighlight :code="code" lang="js" />
   </Box>
+  <Box
+    :padding="1"
+    :width="50"
+    justifyContent="center"
+    alignItems="center"
+    flexDirection="column"
+    borderColor="blue"
+    borderStyle="round"
+  >
+    <SyntaxHighlight :code="code2" lang="rust" theme="nord" />
+  </Box>
 </template>