如何使用Nuxt实现高亮代码块？

你也想像其他网站那样，可以高亮用户写的代码块吗？有两个Javascript库可以帮助你实现这一点，他们分别是Prism.js和highlight.js。在本教程中，我们将使用PrismJS来讲解如何实现代码块高亮。

首先，使用npm安装PrismJS：

npm install prismjs

然后前往composables文件夹，并在里面新建文件prism.js，其内容如下：

import Prism from 'prismjs'
import 'prismjs/themes/prism-tomorrow.css' // You can choose other themes

export default Prism

就这样，PrismJS就安装并配置好了，你只需要每次需要高亮代码的时候调用highlightAll()函数就可以了。具体例子如下：

<script lang="ts" setup>
onMounted(()=>{
    Prism.highlightAll()
})

$fetch('https://www.example.com')
.then((res)=>{
    nextTick(()=>{
        Prism.highlightAll()
    })
})
</script>

此外，还需要注意的是，根据上面的配置，PrismJS只会高亮Javascript和其他少数几种语言。因此，如果你想要高亮更多的语言，就需要一个个地将他们的component引入到prism.js中。例如，如果你想要高亮typescript：

import Prism from 'prismjs'
import 'prismjs/themes/prism-tomorrow.css' // You can choose other themes
import "prismjs/components/prism-typescript"

export default Prism

如果你需要高亮的语言很多，那么一个个地引入他们的component会是一件非常麻烦的事情。为了避免这个问题，你可以使用PrismJS自带的Autoloader插件。然而在Nuxt中使用PrismJS的插件有点难，最简单的方法莫过于直接使用CDN来加载插件，这将在我们的下一篇文章中详细介绍。