使用Highlight在页面高亮显示源码

未金涛

于 2021-04-10 11:50:24 发布

阅读量311

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/weixin_39753511/article/details/115280307

WEB前端专栏收录该内容

30 篇文章

订阅专栏

本文介绍如何在Vue项目中利用HighlightJS库来实现页面上的代码高亮显示。首先，通过安装HighlightJS来引入高亮功能，然后在main.js中进行注册，最后在模板中使用该组件，轻松实现代码片段的美化展示。参考官方文档以了解更多详细信息。

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

title: 使用Highlight在页面高亮显示源码
tags:

Highlight

使用Highlight在页面高亮显示源码

这是一个使用elementui Card 卡片和 highlightjs，在页面上显示代码的组件

安装highlight

npm install highlight.js

在man.js注册

import hljs from 'highlight.js';
//引入样式
import 'highlight.js/styles/github.css';
// 注册highlight插件
Vue.use(hljs.vuePlugin);

使用

您将获得一个highlightjs可在模板中使用的组件：

<div id="app">
<!-- bind to a data property named `code` -->
<highlightjs autodetect :code="code" />
<!-- or literal code works as well -->
<highlightjs language='javascript' code="var x = 5;" />
</div>

参考

highlight官方参考