在vue3(vite+ts)中使用shiki实现代码语法高亮渲染

使用方法

安装shiki包

 npm install shiki -D

完整代码

 <template>
     <div v-html="output"></div>
 </template>
 <script setup lang="ts">
     import {getHighlighter, setCDN} from 'shiki'; 
     
     setCDN('/node_modules/shiki');
     // 更改加载languages和themes的文件路径
     
     getHighlighter({
         theme:'material-theme-lighter'
     }).then(highlighter=>{
         const code:string = 
 `const greet:string = "hello world!";
 console.log(greet);`;
         output.value = highlighter.codeToHtml(code, {lang: "ts"});
     }).catch(error=>{
         console.error(error);
     })
 </script>
 <style>
     ...
 </style>