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

Puha_0618

于 2023-05-06 22:33:57 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/lenofurio/article/details/130536804

本文介绍了如何通过npm安装Shiki包，并在项目中设置CDN，使用Shiki的highlighter对typescript代码进行高亮显示，包括选择material-theme-lighter主题的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用方法

安装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>