vue使用showdown并实现代码区域高亮的示例代码
更新时间：2019年10月17日 15:01:21 作者：N_饼干
这篇文章主要介绍了vue使用showdown并实现代码区域高亮的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前言：当我们想把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权限管理系统的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了vue flex 布局实现div均分自动换行,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
本文主要介绍了elementui弹窗页按钮重复提交问题解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-08-08
这篇文章主要介绍了Vue的自定义事件之组件通信工具详解,Vue的自定义事件(Custom Events)是一种强大的工具,用于实现组件之间的通信和数据传递,本文将深入探讨什么是Vue的自定义事件,以及如何自定义和使用它们,需要的朋友可以参考下2023-10-10
基本上后台管理系统都需要有多页签的功能，但是因为一些脚手架项目基本都把这个功能给集成好了，导致在学习或者修改的时候不知道该如何下手。今天这篇文章就来聊一聊，vue-element-admin项目是如何实现多页签功能的2022-09-09
Vant UI中van-collapse下拉折叠面板默认展开第一项的方法
之前做项目的时候,使用了Collapse折叠面板,下面这篇文章主要给大家介绍了关于Vant UI中van-collapse下拉折叠面板默认展开第一项的相关资料,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了浅谈VUE单页应用首屏加载速度优化方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
本文主要介绍了Vue中实现滚动加载与无限滚动，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
本文通过实例代码给大家介绍了Vue起步(无cli)的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2019-04-04
Vue提供了transition的封装组件,可以给任何元素和组件添加进入/离开过渡,下面这篇文章主要给大家介绍了关于Vue中transition标签基本使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
最新评论