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 相关文章推荐
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
Vue多系统切换实现方案
Jun 05 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 Javascript
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 静态变量的初始化
2009/11/15 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
php 实现进制相互转换
2016/04/07 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
PHP实现倒计时功能
2020/11/16 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
vue项目创建步骤及路由router
2020/01/14 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
深入理解Python中变量赋值的问题
2017/01/12 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
金融专业个人求职信
2013/09/22 职场文书
工厂仓管员岗位职责
2014/01/01 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
演讲主持词
2014/03/18 职场文书
学雷锋宣传标语
2014/06/25 职场文书
我的中国梦主题班会
2015/08/14 职场文书
Apache POI的基本使用详解
2021/11/07 Servers
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers