vue.js 中如何实现代码高亮功能? 下面本篇文章给大家介绍一下 vue 中实现代码高亮功能的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
Vue 中实现代码高亮功能
1, 首先需要下载依赖:
NPM install highlight.JS --save
2, 在 main.JS 文件中导入包:
- import hljs from 'highlight.js' // 导入代码高亮文件
- import 'highlight.js/styles/monokai-sublime.CSS' // 导入代码高亮样式
3, 同样是在 main.JS 文件中自定义一个指令:
- // 自定义一个代码高亮指令
- Vue.directive('highlight',function (el) {
- let highlight = el.querySelectorAll('pre code');
- highlight.forEach((block)=>{
- hljs.highlightBlock(block)
- })
- })
4, 在 vue 文件中使用指令:
- <div class="article_content" v-highlight>
- <div class="head">
- <h2><span class="article-type">{{article_type}}</span>{{title}}</h2>
- <span>{{time}}</span><span > 作者:{{author}}</span>
- <span > 阅读数:{{count_read}}</span><span > 分类:{{blog_type}}</span>
- </div>
- <hr style="margin: 15px 0;">
- <div v-html="input"></div>
- </div>
上图:
至此, 已经成功实现了代码高亮.
更多 web 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17201.html