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


Posted in Javascript onOctober 17, 2019

前言:当我们想把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>

最终展示效果

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并实现代码区域高亮的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现分割提取页面所需内容
May 09 Javascript
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 Javascript
js触发asp.net的Button的Onclick事件应用
Feb 02 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
js实现多图左右切换功能
Aug 04 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 Javascript
Vue中key的作用示例代码详解
Jun 10 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
vue-devtools的安装和使用步骤详解
Oct 17 #Javascript
express中static中间件的具体使用方法
Oct 17 #Javascript
在Express中提供静态文件的实现方法
Oct 17 #Javascript
微信小程序一周时间表功能实现
Oct 17 #Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 #Javascript
JS工厂模式开发实践案例分析
Oct 17 #Javascript
小程序input数据双向绑定实现方法
Oct 17 #Javascript
You might like
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Python实现的检测网站挂马程序
2014/11/30 Python
Python对List中的元素排序的方法
2018/04/01 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
Python接收手机短信的代码整理
2020/08/02 Python
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
2014年元旦活动方案
2014/02/15 职场文书
经济管理专业求职信
2014/06/09 职场文书
护理目标管理责任书
2014/07/25 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
房屋转让协议书
2014/10/18 职场文书
技术支持岗位职责
2015/02/13 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
创业计划书之面包店
2019/09/12 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript