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

最新推荐文章于 2024-01-18 11:06:41 发布

原创最新推荐文章于 2024-01-18 11:06:41 发布 · 1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #highlight.js #页面代码块

Vue 专栏收录该内容

15 篇文章

订阅专栏

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

在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>
	  `
  	}
  }
}

示例：
在这里插入图片描述