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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
手写实现JS中的new
Nov 07 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 PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
Jquery 扩展方法
2010/05/06 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
python实现文件分组复制到不同目录的例子
2014/06/04 Python
Python编写登陆接口的方法
2017/07/10 Python
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
Python中实现输入一个整数的案例
2020/05/03 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
民主评议党员工作总结
2014/10/20 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
浅谈Python项目的服务器部署
2021/04/25 Python
英镑符号 £
2022/02/17 杂记