前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序使用markdown遇到的坑,富文本内容渲染

小程序使用markdown遇到的坑,富文本内容渲染

作者头像
子润先生
修改2021-06-25 10:35:09
8720
修改2021-06-25 10:35:09
举报
文章被收录于专栏:用户8644135的专栏

简介 小程序渲染markdown的内容,出现图片不居中,代码块样式失效,就算是安装了markdown的插件,显示出来的效果也不尽人意,在网上找了很多办法,无法解决问题,下面介绍一种办法,亲测有效。

1.引入文件

代码语言:javascript
复制
const parser = require('./wemark/parser');
注:文件引入的路径根据自己项目实际情况而定

2.调用

代码语言:javascript
复制
this.parsedData = parser.parse(html, {
	link: false,
	highlight: false
});
注:
① parsedData为data中定义的变量
② html为markdown的内容

3.页面渲染

代码语言:javascript
复制
<view class="wemark_wrapper">
	<block wx:for="{{parsedData}}" wx:key="blockIndex" wx:for-index="blockIndex" wx:for-item="renderBlock">
		<view class="wemark_block_{{renderBlock.type}}">
			<block wx:if="{{renderBlock.isArray}}" wx:for="{{renderBlock.content}}" wx:key="inlineIndex" wx:for-index="inlineIndex" wx:for-item="renderInline">
				<text class="wemark_inline_{{renderInline.type}}" wx:if="{{renderInline.type === 'text' || renderInline.type === 'code' || renderInline.type === 'strong' || renderInline.type === 'strong_em' || renderInline.type === 'deleted' || renderInline.type === 'em' || renderInline.type === 'table_th' || renderInline.type === 'table_td'}}">{{renderInline.content}}</text>
				<!-- 代码高亮 -->
				<text class="wemark_inline_code_{{renderInline.type}}" wx:if="{{renderInline.type&&renderBlock.highlight}}">{{renderInline.content}}</text>
				<text class="wemark_inline_code_text" wx:if="{{!renderInline.type}}">{{renderInline}}</text>
				<navigator class="wemark_inline_link" url="{{renderInline.data.href}}" wx:if="{{renderInline.type === 'link'}}">{{renderInline.content}}</navigator>
				<image mode="widthFix" class="wemark_inline_image" src="{{renderInline.src}}" wx:if="{{renderInline.type === 'image'}}"></image>
			</block>
			<block wx:if="{{!renderBlock.isArray}}">
				<view wx:if="{{renderBlock.type === 'code'}}">{{renderBlock.content}}</view>
				<video wx:if="{{renderBlock.type == 'video'}}" class="wemark_block_video" src="{{renderBlock.src}}" poster="{{renderBlock.poster}}" controls></video>
				<view wx:if="{{renderBlock.type === 'html'}}" v-html="renderBlock.content"></view>
			</block>
		</view>
	</block>
</view>

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档