在网页中显示高亮的代码块

JasoncodeQvQ

于 2021-03-31 20:24:20 发布

阅读量991

点赞数 1

分类专栏： Vue 文章标签： vue highlight.js 页面代码块

本文链接：https://blog.csdn.net/CodingmanNAN/article/details/115359269

版权

Vue 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何在Vue CLI项目中使用highlight.js库来创建高亮且格式化的代码块。首先，通过npm安装highlight.js依赖，并导入所需的样式文件。接着，在main.js中全局注册VueHighlightJS插件。在组件中，可以使用<highlightjs>标签配合language属性和code数据来展示高亮的HTML代码。示例展示了导入monokai-sublime样式的代码高亮效果。

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

在VueCli项目中生成高亮且格式正确的代码块
以"highlight.js": "^10.7.1"插件为例

安装依赖：npm install highlight.js

main.js

import VueHighlightJS from "highlight.js";	// 引入入依赖

import 'highlight.js/styles/monokai-sublime.css';	// 高亮代码的样式
// import 'highlight.js/styles/github.css'; 	
// import 'highlight.js/styles/rainbow.css'; 	
// import 'highlight.js/styles/tomorrow.css'; 
// import 'highlight.js/styles/dracula.css'; 
// import 'highlight.js/styles/agate.css';


Vue.use(VueHighlightJS.vuePlugin);

其他组件中使用方式：

<template>
  <div class="home">
  	<highlightjs language='html' :code=codehtml />
  </div>
</template>


export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  data() {
   return {
	 codehtml:`
		<el-tab-pane label="HTML" name="first">
         <div class="code">
           HTML Code
          </div>
          <div class="intro">
            业务简介：这是一段html代码简介！
          </div>
        </el-tab-pane>
	  `
  	}
  }
}