vue使用showdown并实现代码区域高亮的示例代码

编程学习 2021-07-04 15:01www.dzhlxh.cn编程入门
这篇文章主要介绍了vue使用showdown并实现代码区域高亮的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧

前言:当我们想把makedown文档转译为html在网页上显示,并且能漂亮的展示出自己想要的网页形式,接下来我给大家介绍插件来达到我们所想要的功能。
注:狼蚁网站SEO优化安装及使用方式是基于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>

效果如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板