uniapp 渲染Markdown

近日在编写一个小程序,将日记功能移植到小程序中,虽然在手机端写日记一般用不到Markdown,但是仍想在小程序中查看在电脑端写的Markdown格式的内容,如代码块等。

经过查询,找到一个被广泛使用的解决方案是towxml

现记录如下:

首先将代码克隆下来

  git clone http://github.com/sbfkcel/towxml.git

打开根目录的config.js进行自定义的配置

配置完后安装依赖

npm i

打包

npm run build

将打包后的dist文件夹复制到uniapp项目的static目录,更名为towxml

在需要使用的页面中使用,主要包括引入towxml组件: import towxml from '../../static/towxml/towxml',引入转换方法:require("@/static/towxml/index.js") 以及最后的使用:

<template>
	<view>
		<view v-if="o" class="reader-title">
			<view class="date">
				{{o.date}}
			</view>
			<view class="city">
				{{o.city}}
			</view>
			<view class="weather">
				{{o.weather}}
			</view>
		</view>
		
		<towxml :nodes="content"></towxml>
		<!-- <rich-text :nodes="content"></rich-text> -->
		<!-- {{content}} -->
	</view>
</template>

<script>
import { requestForGetDiaryDetail } from '../../utils/allRequests';
import { decrypt } from '../../utils/crypto';
import towxml from '../../static/towxml/towxml'
import marked from 'marked'


	export default {
		components:{
			towxml:towxml
		},
		data() {
			return {
				content:'',
				o:null,
				towxmlFun:require("@/static/towxml/index.js")
			};
		},
	onLoad(options) {
		requestForGetDiaryDetail(options.id,(a)=>{
			let c = a.data.result.res[0]
			this.o =c
			let t = decrypt(c.normal)
			// this.content = this.marked(t)
			console.log(this.marked)
			// console.log(this.content)
			this.content = this.towxmlFun(t,'markdown',{
				// base: 'http://www.xxx.com',
				theme:"light"
			})
			// console.log(t,this.content)
			
		})
	}
	}
</script>

<style lang="scss">
.reader-title{
	display: flex;
	justify-content: space-evenly;
	text-align: center;
}
</style>

本文转载于网络 如有侵权请联系删除

相关文章

  • PPT:智能物流建设方案及典型案例

  • Python 爬取留言板留言(一):单进程版+selenium模拟

    文章目录一、项目概述1.项目说明2.环境配置二、项目实施1.导入所需要的库2.全局变量和参数配置3.产生随机时间和用户代理4.获取领导的fid5.获取领导所有留言链接6.获取留言详情7.获取并保存领导所有留言8.合并文件9.主函数调用三、结果、分析及说明1.结果说明2.改进分析3.合法性说明一、项目概述1.项目说明本项目主要是对领导留言板内的所有留言的具体内容进行抓取,对留言详情、回复详情和评价详情进行提取保存,并用于之后的数据分析和进一步处理,可以对政府的决策和电子政务的实施提供依据。 网站链接是http://liuyan.people.com.cn/home?p=0,任意选择一条留言点击进入详情页后,如下 对于图中标出的数据,均要进行爬取,以此构成一条留言的组成部分。2.环境配置(1)Python:3.x (2)所需库:dateutil安装方法:pipinstallpython-dateutilselenium安装方法:pipinstallselenium(3)模拟驱动: chromedriver,可点击https://download.csdn.net/download/CUF

  • 实战:异步爬取之异步的简单使用

    一、使用异步的注意事项异步代码中不能有耗时的I/O操作,像文件读写、网络请求、数据库读写等操作都需要使用对应的异步库来代替。异步代码要尽可能短小,短小的意思就是功能要尽可能细分,前面讲过异步在任务量较少的时候性能并不能达到最优,我们可以通过合理地拆分代码来增加任务量,从而达到提高性能的目的。二、使用异步需要了解的两个重要的类AbstractEventLoop,我们可以把它简称为EventLoop类或者事件循环。事件循环是整个异步的基础,所有的异步操作都在事件循环里完成。 这里我们需要了解并学会使用它的如下几个方法: run_until_complete(Future)该方法接受一个或多个Future对象作为参数,然后运行这些对象直到全部完成并返回它们的结果run_forever()让事件循环一直运行下去,直到stop()方法被调用,当stop()方法被调用时,会继续执行完正在执行的任务,但是这些任务的回调和未被执行的任务将不再执行。create_task()、create_future()光看名字可能大家会误以为这两个方法的功能是创建一个Task类或者Future类并将其返回,事实上这

  • C#集合类型大揭秘

    集合是.NETFCL(FrameworkClassLibrary)的重要组成部分,我们平常撸C#代码时免不了和集合打交道,FCL提供了丰富易用的集合类型,给我们撸码提供了极大的便利。正是因为这种与生俱来的便利性,使得我们对集合既熟悉又陌生。很多同学可能一直还是停留在使用的层面上,那么今天我们一起来深入学习一下C#语言中的各种集合。首先我们看一下FCL给我们提供的集合接口:FCL提供了泛型和非泛型两大类集合类型。因为非泛型集合装箱和拆箱带来的性能开销问题,和泛型集合相比,已经变得越来越鸡肋。所以我们也侧重于泛型集合的分析,但是两者差别不大。IEnumerable和IEnumeratorIEnumerable接口是所有集合类型的祖宗接口,其作用相当于Object类型之于其它类型。如果某个类型实现了IEnumerable接口,就意味着它可以被迭代访问,也就可以称之为集合类型(可枚举)。IEnumerable接口定义非常简单,只有一个GetEnumerator()方法用于获取IEnumerator类型的迭代器。我们可以将迭代器想象成数据库的游标,即序列(集合)中的某个位置,迭代器只能在序列(集

  • 金融科技&大数据产品推荐:恒丰银行实时智能决策引擎

    恒丰银行实时智能决策引擎是恒丰银行业务策略管理解决方案的核心产品,该产品让策略业务人员轻松高效地配置出风控、反欺诈、实时营销等场景下实时、准实时的决策模型/规则 官网|www.datayuan.cn 微信公众号ID|datayuancn 本产品为数据猿推出的“金融科技价值—数据驱动金融商业裂变”大型主题策划活动第一部分的文章/案例/产品征集部分;感谢恒丰银行的产品投递 1、产品名称 恒丰银行实时智能决策引擎 2、产品分类 金融科技·风控、反欺诈、实时营销 3、产品介绍 恒丰银行实时智能决策引擎是恒丰银行业务策略管理解决方案的核心产品,该产品让策略业务人员轻松高效地配置出风控、反欺诈、实时营销等场景下实时、准实时的决策模型/规则,实现在实时流数据的驱动下,基于海量数据进行成千上万个决策模型/规则的计算任务,满足高并发、低延迟的应用场景需求。 实时智能决策引擎提供相关业务策略的全生命周期的统一管理,包括可重用的简单规则、决策表、决策树和规则流等组件的编辑、部署、运行、监控等功能,可为任何业务系统提供高效的实时决策管理服务。其非常适用于解决业务策略频繁变化的场景,它能帮助业务将策略模型/规则

  • 轻松几步搞定SSH连接Git配置

    如果使用ssh的方式管理,需要配置sshkey.1、打开gitbash命令窗口2、生成sshkeyssh-keygen-trsa-b4096-C"your_email@example.com"复制your_email@example.com为github上你注册的email地址。如下面完整创建过程:$ssh-keygen-trsa-b4096-C"test@qq.com" Generatingpublic/privatersakeypair. Enterfileinwhichtosavethekey(/c/Users/Administrator/.ssh/id_rsa): Enterpassphrase(emptyfornopassphrase): Entersamepassphraseagain: Youridentificationhasbeensavedin/c/Users/Administrator/.ssh/id_rsa. Yourpublickeyhasbeensavedin/c/Users/Administrator/.ssh/id

  • MySQL Tips【Updating】

    1、MySQL中varchar最大长度问题问题:为啥大字段可以建,小字段却失败? 单个varchar(20000)用utf8没有超过64K,不会转成text类型,2个呢又超了64K最大单行长度。varchar(30000)用utf8超64K,被转成text类型,所以没事。其实第一个建表语句被"2warnings"果断出卖了  具体的可以参考这篇: MySQL中varchar最大长度是多少?http://dinglin.iteye.com/blog/9142762、mysql时间相减的问题(bug)--创建表 mysql> CREATE TABLE mytest (   t1 datetime,   t2 datetime ); Query OK, 0 rows affected --插入测试记录 mysql> insert into mytest(t1,t2) values('2013-04-21 16:59:33','2013-04-21 16:59:43'); Query OK, 1 row affected

  • 小书匠语法手册

    小书匠语法使用手册小书匠语法MARKDOWN帮助 常用语法 标题 这是H1一级标题 ====== 这是H2二级标题 ------ #这是H1一级标题 ##这是H2二级标题 ###这是H3三级标题 ####这是H4四级标题 #####这是H5五级标题 ######这是H6六级标题复制 快捷键:[ctrl+h] 列表 无序列表 *项目1 *子项目1.1 *子项目1.2 *子项目1.2.1 *项目2 *项目3 +项目1 +子项目1.1 +子项目1.2 +子项目1.2.1 +项目2 +项目3 -项目1 -子项目1.1 -子项目1.2 -子项目1.2.1 -项目2 -项目3复制 快捷键:[ctrl+u] 有序列表 1.项目1 2.项目2 3.项目3 1.项目3.1 2.项目3.2 1.项目1 1.项目2 1.项目3 1.项目3.1 1.项目3.2复制 有序列表起始编号 58.项目5 2.项目6复制 快捷键:[ctrl+o] 链接 [链接名称](链接地址) [链接名称][1] [1]:链接地址复制 图片 ![名称](链接地址) ![名称][1

  • VirtrualBox使用已存在的镜像创建虚拟机

    转载请说明出处:http://blog.csdn.net/cywosp/article/details/41605443     再将一个已经存在的虚拟机镜像拷贝为另一个新的虚拟机镜像后,要将该新的镜像添加到新的虚拟机中时会出现错误提示,从而导致不能创建虚拟机。例如有'D:\App\VirtualBox VMs\CentOS_6.5_One\CentOS_6.5_One.vmdk' 镜像拷贝成'D:\App\VirtualBox VMs\CentOS_6.5_Three\CentOS_6.5_Three.vmdk' 后,将其加入到新的虚拟机CentOS_6.5_Three时出现了下面的问题: 打开硬盘文件D:\App\VirtualBox VMs\CentOS_6.5_Three\CentOS_6.5_Three.vmdk失败. Cannotregistertheharddisk'D:\App\VirtualBox VMs\CentOS_6.5_Three\CentOS_6.5_Three.vmd

  • 【原】Hyper-V虚拟机设置外部网络访问

    作者:david_zhang@sh【转载时请以超链接形式标明文章】 https://www.cnblogs.com/david-zhang-index/p/12323451.html 疫情期间,在家远程办公,同时找了一部教程学点新框架,开发的时候需要模拟服务器,就想到Windows自带的Hyper-V,安装很顺利,安装完成宿主机器不能远程ssh虚拟机及虚拟机无法上网,先步骤如下: 1.在Hyper-V管理器中(操作-->虚拟交换机管理器)新建一个虚拟交换机,类型为内部,随便起一个名称2.在虚拟机的设置中,将网络适配器设置为刚才随便启的那个名字3.点击网络和共享中心,更改适配器设置,找到本地可以上网的网卡,右键属性,点击共享,将网络共享给刚启名字的网卡 4.重启虚拟机,就可以远程连接了,而且该虚拟机也可以连接网络 除了方面方法外,还可直接使用自带的,叫默认开关的交换机

  • 内存扫盲

    快速补充关于内存的一些基础知识,主要是为了理解DPDK,没有涉及太深。 简介 RAM(randomaccessmemory)随机存取存储器,随机存取是指存储单元的内容可按需要随意取出或存入,且存取的速度与存储单元的位置无关。 RAM分为SRAM(staticrandomaccessmemory)和DRAM(dynamicrandomaccessmemory), SRAM结构复杂,单位面积容量少,存取速度快; DRAM结构简单,单位面积容量多,存储速度慢。 DRAM因为结构简单,存储的电荷会随着时间渐渐消失,因此需要有个再充电(refresh)的动作保持储存的数据。 SRAM适合做寄存器和CPU缓存。DRAM则适合做主存及其他硬件装置的缓存 主存(通常所说的内存)结构层次 主存DRAM由大至小,由上往下可做以下拆分: channel>DIMM>rank>chip>bank>row/column   主存从channel到chip的对应关系   Chip往下拆分   Bank往下拆就是一个个的储存单元,横向为row,纵向为c

  • 查杀进程小工具——WPF和Prism初体验

    最近因为工作需要,研究了一下桌面应用程序。在winform、WPF、Electron等几种技术里,最终选择了WPF作为最后的选型。WPF最吸引我的地方,就是MVVM模式了。MVVM模式完全把界面和业务剥离开来,页面所有操作都通过数据来驱动。更替页面不用修改业务代码逻辑。 以一个查杀进程的小工具来作为初次学习的成果总结。日常开发JavaWeb程序的时候,进程遇到端口占用问题,通过命令查找端口、查找进程、杀死进程,这一套命令敲下来过于麻烦。于是就写了这么一个小Demo,即作为学习使用,也为以后工作降低工作量。 项目代码 https://github.com/zer0Black/WinPidKiller 需求设计 进程列表:展示所有经常的列表,按照应用名称正序排序。列表展示进程名、PID、协议、本机IP:端口、远程IP:端口、进程路径 搜索框:进行端口搜索,在经常列表中展示搜索结果 刷新按钮:刷新进程列表 杀死按钮:选中进程,进行进程的杀死。杀死进程后刷新进程列表 关键要点 DataContext DataContext主要作用是用于绑定数据源,默认值为null。 DataConte

  • Web网站的几个并发量级

    评价一个网站的“大小”,处于视角的不同,有很多种衡量的方法,类似文章数,页面数之类的数据非常明显,也没有什么可以争议的。但对于并发来说,争议非常之多,这里就从一个技术的角度开始,谈谈几个Web网站的数量级。 相信很多人谈论一个网站的热度,总免不了会询问日均PV,同时在线人数、注册用户数等运营数据,说实话从技术角度来说,这几个数值没有一个可以放在一起比较的——一个静态网站的PV跟一个SNS类/WebGame网站的PV根本就不是一回事。由于互联网有一个传说中的“3秒定律”,可能当下更多的网站技术指标要求1.5秒以内加载整页,或者至少可以达到阅读的标准。如果要较真什么“同时在线”,毫不客气的说,对于HTTP这类短链接的网络协议来说,在WebSocket还不普及的时代,能统计在线纯属扯淡,唯一能做的只是取个时间段,计算下访问用户而已。这些依然可以换算成QPS(QuestPerSecond每秒请求数)。就并发而言,我唯一推崇的只有理论最大QPS和悲观QPS。   这里就大致根据理论最大QPS,给网站做几个分类 50QPS以下——小网站 没什么好说的,简单的小网站而已,就如同本站这样,你

  • 现代移动端网络短连接的优化手段总结:请求速度、弱网适应、安全保障

    1、前言 众所周之,通常我们开发一个移动端应用,会直接调用系统提供的网络请求接口去服务端请求数据,再针对返回的数据进行一些处理,或者使用iOS中的开源AFNetworking/OKHttp这样的网络库(Android中可以用HttpURLConnection或者开源的okhttp库),管理好请求线程和队列,再自动做一些数据解析,就结束了。 但对于追求用户体验的应用来说,还会针对移动网络的特性做进一步优化,包括: 1)速度优化:网络请求的速度怎样能进一步提升? 2)弱网适应:移动端网络环境随时变化,经常出现网络连接很不稳定可用性差的情况,怎样在这种情况下最大限度最快地成功请求? 3)安全保障:怎样防止被第三方窃听/篡改或冒充,防止运营商劫持,同时又不影响性能? 对基于浏览器的前端开发来说,网络这块能做的事情很少,但对于原生的移动端应用来说(本文中说的原生主要指iOS和Android应用),整个网络请求过程是自由控制的,可以做很多事情。很多大型APP都针对这三个问题做了很多网络层的优化,一些新的网络层协议像HTTP2/ QUIC 也是在这些方面进行了不少优化。在此请

  • 快到2020年了写个总结和展望吧

    2020年还有10天就来了,2019年还有10天就说再 见了。 2019年,喜痛参半。 上半年过的还算不错,和2018年底新加入的团队一起合作,项目和收入也都还可以,至少可以Cover住日常生活开支,还有点小结余。 可是到了下半年,急剧下降。新加入的新团队因为接不到项目我被迫离开了。从此个人的收入也就断涯式下跌,压力和痛苦随之而来。 由于大娃初三了,明年面临着中考,为了照顾和督促她学习,老婆也离开上海回到老家。而我也不得不承担起照顾二娃的事。二娃现在在上海读小学。虽然现在已经比较懂事了,但以前从未照顾过孩子的起居和辅导作业,一下子还无法适应,不知道有没有同学有类似的体验。 现在想想,以前老婆大人一起照顾两个娃是怎么熬过来这么多年的,真的太感谢老婆大人了。   一、回顾2019的Flag 1.工作方面 没有当初想的那么美好。希望的奇迹也没有创建出来,2018年底加入新团队时,谈的一个2000万的大项目,最终也是黄了。如果没黄,现在可能也是另外一个样子了。 这个世界没有如果,只有结果。 当初规划的两个产品,也没有认真的完成。开发产品时间需要的比较长,团队负责人觉得我们还

  • 2022-04-17

    近日总被喇叭唤醒,叫人起床核酸,突然记起小时妈妈喊我起床,循环往复,翻来覆去,悟了,这就是祖国母亲。

  • js的数据类型及数据类型检测

    js有两种数据类型: 1.基本数据类型:Undefined、Null、Boolean、Number、String、Symbol(ES6新增,表示独一无二的值) 2.引用数据类型(统称为Object对象):对象、数组和函数。   基本数据类型和引用数据类型的区别: 1.基本数据类型值不可变,引用数据类型值是可变的。 2.基本数据类型存放在栈区:原始数据类型直接存储在栈(stack)中的简单数据段,占据空间小、大小固定,属于被频繁使用数据,所以放入栈中存储。   引用数据类型同时保存在栈内存和堆内存:引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中,将会影响程序运行的性能;引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体。 3.基本数据类型是值的比较。引用数据类型是引用的比较   数据类型检测: 1.typeof   typeof返回一个表示数据类型的字符串,返回结果包括:number、boolean、string

  • 基于MATLAB的中值滤波均值滤波以及高斯滤波的实现

    基于MATLAB的中值滤波均值滤波以及高斯滤波的实现 作者:lee神 1.  背景知识 中值滤波法是一种非线性平滑技术,它将每一像素点的灰度值设置为该点某邻域窗口内的所有像素点灰度值的中值. 中值滤波是基于排序统计理论的一种能有效抑制噪声的非线性信号处理技术,中值滤波的基本原理是把数字图像或数字序列中一点的值用该点的一个邻域中各点值的中值代替,让周围的像素值接近的真实值,从而消除孤立的噪声点。 方法是用某种结构的二维滑动模板,将板内像素按照像素值的大小进行排序,生成单调上升(或下降)的为二维数据序列。二维中值滤波输出为g(x,y)=med{f(x-k,y-l),(k,l∈W)},其中,f(x,y),g(x,y)分别为原始图像和处理后图像。W为二维模板,通常为3*3,5*5区域,也可以是不同的的形状,如线状,圆形,十字形,圆环形等。             2 4 8     1 3 9   &nb

  • python学习-56 贪吃蛇&#128013;

    importrandom,pygame,sys frompygame.localsimport* FPS=15 WINDOWWIDTH=640 WINDOWHEIGHT=480 CELLSIZE=20 assertWINDOWWIDTH%CELLSIZE==0,"Windowwidthmustbeamultipleofcellsize." assertWINDOWHEIGHT%CELLSIZE==0,"Windowheightmustbeamultipleofcellsize." CELLWIDTH=int(WINDOWWIDTH/CELLSIZE) CELLHEIGHT=int(WINDOWHEIGHT/CELLSIZE) #RGB WHITE=(255,255,255) BLACK=(0,0,0) RED=(255,0,0) GREEN=(0,255,0) DARKGREEN=(0,155,0) DARKGRAY=(40,40,40) BGCOLOR=BLACK UP='up' DOWN='down' LEFT='left' RIGHT='right' HEAD=0#syn

  • win10自带Hyper-V安装CentOS7流程

    开启win10自带的Hyper-v 1、查看是否已经开启了Hyper-V,步骤:开始>管理工具>Hyper-V管理器. 这个一般都不会开启,所以不显示,需要我们手动设置出来。     2、打开程序和功能,点击"启用或关闭Windows功能"。 程序和功能就是卸载软件的地方,可以右键开始,选“应用程序和功能”打开,不行在控制面板找。   3、将Hyper的这几个都选中,点击“确定”,需要重启电脑。     4、重启后点击打开,开始>管理工具>Hyper-V管理器,如下图。     新建虚拟机: 1、步骤:新建>选择虚拟机       2、点击下一步     3、修改虚拟机名称,和虚拟机保存的位置,点击下一步     4、选择第一代,点击下一步       5、分配内存,根据自己情况分配     6、配置网络,选择默认即可。     7、硬盘

  • JavaScript语言的三大结构

    JavaScript语言的三大结构 一、三大结构 ​ 顺序结构 ​ 自上而下,逐行执行,先来后到,相同语句,后面的覆盖前面的 ​ 选择分支结构 ​ 多条路径,根据不同条件,只执行其中的一条或选择性的执行多条 ​ 循环结构 ​ 重复执行某些代码,代替某些重复性操作,减少代码冗余,提升效率 二、选择分支结构 1.单分支结构 ​ 两条路径二选一,做或者不做,有或者没有,执行或不执行; (1)if判断语句 //语法结构: if(){} if //语句名 () //是否执行的条件,true或false {} //执行的内容 //例: if(true){ console.log("hello");//"hello"---if括号中是true则输出hello,若为false则不输出 } 复制 2.双分支结构 ​ 有两个选项,两者必定执行一个 (1)if-else判断语句 //当条件判断为true时,执行花括号内的语句,如果条件为假false,跳过花括号内的语句执行else里的内容 if(条件){ 执行语句1,条件为真时执行 }else{ 执行语句2,条件为假时执行 } 复制 (2)if条

相关推荐

推荐阅读