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") 以及最後的使用：

<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>