怎么在vue中利用showdown实现代码区域高亮

发布时间:2021-03-23 16:13:09 作者:Leah
来源:亿速云 阅读:291

怎么在vue中利用showdown实现代码区域高亮?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

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>

最终展示效果

怎么在vue中利用showdown实现代码区域高亮

但是这时有个问题出现,如果我们去添加代码块儿时,代码是统一颜色,代码块也没有背景色,同时也没有高亮样式,接下来我们解决代码没有高亮问题。

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中利用showdown实现代码区域高亮

看完上述内容,你们掌握怎么在vue中利用showdown实现代码区域高亮的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

推荐阅读:
  1. Ueditor代码高亮
  2. 怎么在nginx中利用geoip实现区域限制

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue showdown

上一篇:怎么在Laravel框架中使用MongoDB

下一篇:如何在Python中使用元类type创建类对象

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》