vue使用showdown并实现代码区域高亮的示例代码
2019-10-17 18:07
821 查看
前言:当我们想把makedown文档转译为html在网页上显示,并且能漂亮的展示出自己想要的网页形式,接下来我给大家介绍插件来达到我们所想要的功能。
注:下面安装及使用方式是基于vue进行滴。
1、安装showdown
npm install showdown --save
2、将showdown引入到使用的页面中
<template> <div v-html="htms"></div> </template> <script> import showdown from "showdown" converter.setOption('tables', true); // 将表格显示出来 export default { data() { return { htms: "" } }, created() { this.setMakedown() }, methods: { setMakedown() { this.htms = converter.makeHtml('# 这是一个标题') } } } </script>
最终展示效果
但是这时有个问题出现,如果我们去添加代码块儿时,代码是统一颜色,代码块也没有背景色,同时也没有高亮样式,接下来我们解决代码没有高亮问题。
1、安装highlight
npm install highlight --save
2、 在main.js添加自定义指令
import hljs from "highlight.js" import 'highlight.js/styles/default.css'; // 定义自定义指令 highlight 代码高亮 Vue.directive('highlight',function (el) { let blocks = el.querySelectorAll('pre code'); blocks.forEach((block)=>{ hljs.highlightBlock(block) }) })
3、 将“ v-highlight ”添加到使用的div标签上
<template> <div v-html="htms" v-highlight></div> </template>
效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- vue使用原生js实现滚动页面跟踪导航高亮的示例代码
- 使用vue.js实现联动效果的示例代码
- vue使用Google地图的实现示例代码
- vue2.0使用swiper组件实现轮播的示例代码
- 使用Vue父子组件通信实现todolist的功能示例代码
- Vue进阶(二十九):使用children实现路由的嵌套示例代码
- vue使用drag与drop实现拖拽的示例代码
- vue使用mint-ui实现下拉刷新和无限滚动的示例代码
- 使用 SyntaxHighlighter 实现代码高亮
- PHP程序中使用PDO对象实现对数据库的增删改查操作的示例代码
- vue实现消息的无缝滚动效果的示例代码
- Mac下使用MarsEdit和SublimeText,实现代码高亮拷贝
- 使用xheditor+SyntaxHighligher实现代码高亮显示实例
- Android TextView实现词组高亮的示例代码
- 使用mint-ui实现省市区三级联动效果的示例代码
- freemarker生成的前端代码下使用javascript实现导航菜单高亮显示
- 使用jquery.upload.js实现异步上传示例代码
- vue.js实现表格合并示例代码
- 在webpack中使用Code Splitting--代码分割来实现vue中的懒加载
- Python编程使用tkinter模块实现计算器软件完整代码示例