uniapp 渲染Markdown-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 渲染Markdown。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

现记录如下：

首先将代码克隆下来

  git clone https://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") 以及最后的使用：文章来源地址https://www.toymoban.com/news/detail-458976.html

<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: 'https://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>

到了这里，关于uniapp 渲染Markdown的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！