用于在小程序中渲染Markdown文本。
在小程序诞生之前,Markdown的渲染一般需要解析成HTML,然后渲染解析后的HTML。然而小程序并没有提供HTML渲染的功能,因此在wemark诞生之前,几乎所有的Markdown渲染库全部无法在小程序下正常工作。
wemark可以实现在小程序下渲染Markdown内容,支持图片、表格在内的大部分Markdown特性。
rich-text
进行渲染wemark
目录到小程序根目录wemark
组件{
"usingComponents": {
"wemark": "../wemark/wemark"
}
}
<wemark md="{{md}}" link highlight type="wemark"></wemark>
详细代码可见
demo
目录,该目录是一个完整的小程序“代码片段”项目,可在wemark根目录先运行npm run copy
,然后添加到微信开发者工具的“代码片段”中进行体验。
参数说明:
md
,必填,需要渲染的Markdown字符串;link
,是否解析链接,如果解析,会使用小程序navigator
组件展现,可在小程序内跳转,默认为false
;highlight
,是否对代码进行高亮处理,默认为false
;type
,渲染方式,wemark
会使用wemark
的数据结构和模板进行渲染,rich-text
会使用小程序内置的rich-text
组件进行渲染(不支持链接跳转、视频)。注:代码高亮会使标签数量和解析后的数据量增大,不排除产生渲染性能问题,请根据实际需要酌情使用。
mpvue支持引入微信自定义组件,可在页面的.js
文件中添加配置,引用wemark
,然后在.vue
文件的template
部分直接使用wemark
:
export default {
config: {
// 这儿添加要用的小程序组件
usingComponents: {
wemark: '../../static/wemark/wemark'
}
}
}
<wemark :md="md" link highlight type="wemark"></wemark>
注:为了让mpvue打包时能把
wemark
包一并打包到dist
目录,建议将wemark
放置在源码static
目录下。
本项目mpvue
目录中包含完整的mpvue小程序演示项目,可在wemark
根目录运行npm run copy
,然后在微信开发者工具中打开使用。
在已有的taro项目中进行如下修改:
wemark
放入src
目录,即src/wemark
目录wemark
目录,修改config/index.js
,在copy
设置项中增加wemark
,参考如下:copy: {
patterns: [
{
from: 'src/wemark',
to: 'dist/wemark',
},
],
options: {
}
},
remarkable.js
,继续修改config/index.js
,参考如下:weapp: {
compile: {
exclude: [
'src/wemark/remarkable.js',
]
},
...
}
wemark
,例如src/pages/index/index.js
:config = {
navigationBarTitleText: '首页',
usingComponents: {
wemark: '../../wemark/wemark'
}
}
state = {
md: '# heading\n\nText'
}
//...
render () {
return (
<View className='index'>
<wemark md={this.state.md} link highlight type='wemark' />
</View>
)
}
global.d.ts
中添加以下内容(仅 typescript 项目)declare namespace JSX {
interface IntrinsicElements {
wemark: any
}
}
本项目taro
目录中包含完整的taro小程序演示项目,可在wemark
根目录运行npm run copy
,然后在微信开发者工具中打开使用。
特别感谢 @Songkeys 全程跟进taro使用事宜,详情见 https://github.com/TooBug/wemark/issues/36 。
npm install
npm test
MIT
如果你也使用了 wemark,欢迎提 PR 将自己的小程序加入列表
rich-text
渲染video[poster]
属性添加视频封面图 #15 by @kilik52widthFix
模式,不再动态计算高度 #11 #12~~deleted~~
)此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。