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

一：若依后端：

1）采用mavon editor

二：uni-app前端

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

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

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

1）h5网页版

?

1 2 3 4 5 6 7 8 9

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