若依后端和uni-app前端 支持markdown

一：若依后端：

1）采用mavon editor

二：uni-app前端

尽管后端数据都是通过mavon editor插入数据，如代码块，但因uni-app前端发布因可以到14个平台

本文只讨论两个平台：h5即网页版和微信小程序版

h5网页版采用mavon editor ,微信小程序采用wemark

1）h5网页版

<!-- #ifndef H5 -->
非H5下显示
<view>
	<mavon-editor v-model="chapter.content" :subfield="false"
	:boxShadow="false"                                    
	defaultOpen="preview"                                    
	:toolbarsFlag="false" :ishljs="true" :navigation="true"></mavon-editor>
	<!-- {{chapter.content}} -->
</view>

<mavon-editor 属性解入

1）defaultOpen="preview"  预览模式

2）:toolbarsFlag="false"  工具栏是否显示

更多参数  见： https://gitee.com/kongfanqun/mavonEditor

2）微信小程序端

来源：uni-app微信小程序如何渲染markdown  请点击此链接，亲自测试有效，收藏备用

背景

在开发个人网站微信登录平台易登微信小程序的时候，由于说明文档是用markdown格式来书写的，在网页上有各种markdown个人渲染引擎，比如这个markdown编辑器无敌了！。

但是在小程序上还是第一次渲染markdown，找了各种方案，但处处是坑，除此之外最后渲染出来的效果也惨不忍睹。踩坑无数之后终于找到了wemark，完完美美地把我的文档渲染出来了。

wemark可以实现在小程序下渲染Markdown内容，支持图片、表格在内的大部分Markdown特性。详细介绍参考以下链接：

gitee地址：这个markdown编辑器无敌了！

安装wemark

• 下载wemark源码

git clone https://gitee.com/gitwcx/wemark.git

• 将wemark目录拷贝到uni-app的static目录下

• 在需要渲染markdown的页面引入wemark

 uni-app 的 script

import wemark from '@/static/wemark/wemark.js'
export default {
    components: {
        wemark
    },
    data() {
        return {
            content: 'markdown',
        }
    }
}

 

 

uni-app 的 template

<wemark :md="content" link highlight type="wemark"></wemark>