wemark
1.0.0
小程序已原生支持HTML渲染,基本可替代wemark,推荐使用。本库年久失修,目前处于不维护状态,请谨慎使用。
用于在小程序中渲染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: '# headingnnText'
}
//...
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使用事宜,详情见 #36 。
npm install
npm test
MIT
如果你也使用了 wemark,欢迎提 PR 将自己的小程序加入列表
rich-text
渲染video[poster]
属性添加视频封面图 #15 by @kilik52widthFix
模式,不再动态计算高度 #11 #12~~deleted~~
)