vue2--代码高亮

Java晓姐姐

已于 2024-08-14 16:37:55 修改

阅读量818

点赞数

分类专栏：前端文章标签： vue.js

于 2022-08-12 14:42:50 首次发布

本文链接：https://blog.youkuaiyun.com/m0_60323584/article/details/126302885

版权

前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何在Vue2项目中实现代码高亮显示。首先，通过访问highlight.js的官网获取配色方案和API文档。接着，通过npm或yarn安装vue-highlightjs和highlight.js两个依赖。在main.js中引入并应用这两个库，特别是导入highlight.js的atom-one-dark.css样式文件。最后，项目中可以正常使用代码高亮功能。

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

一.官网

1.highlight官网（查看配色）：https://highlightjs.orghighlightjshttps://highlightjs.org

2.highlight查看api地址：https://highlightjs.readthedocs.io

二.使用

1.安装两个依赖：vue-highlight.js，highlight.js

npm install vue-highlightjs //实现代码高亮的功能
npm install highlight.js //实现代码高亮css的样式文件

or

yarn add vue-highlightjs

yarn add highlight.js

2. main.js中引用依赖

import VueHighlightJS from 'vue-highlightjs'
import 'highlight.js/styles/atom-one-dark.css'
Vue.use(VueHighlightJS)

3.使用高亮

<template>
    <code v-code class="html">{{codes}}</code>
</template>
<script>
    export default {
        data() {
            return {
                codes:"<div class='content' style='width:300px;height:300px;'>\n\t
                            <h2>Vue高亮代码显示部分</h2>\n\t
                            <p>hello Vue!</p>\n
                        </div>"
            }
        },

    }
</script>

4.使用高亮