{"id":13430116,"url":"https://github.com/TooBug/wemark","last_synced_at":"2025-03-16T05:30:30.216Z","repository":{"id":146146241,"uuid":"76116964","full_name":"TooBug/wemark","owner":"TooBug","description":"微信小程序Markdown渲染库","archived":false,"fork":false,"pushed_at":"2023-07-05T01:41:41.000Z","size":522,"stargazers_count":1303,"open_issues_count":22,"forks_count":172,"subscribers_count":27,"default_branch":"master","last_synced_at":"2025-03-15T08:53:56.392Z","etag":null,"topics":["markdown","markdown-viewer","weapp","wechat","weixin","wxml","wxss","xiaochengxu"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TooBug.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-10T14:19:32.000Z","updated_at":"2025-03-14T02:23:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"5946ab49-046a-43f4-880a-85ad3b4a3158","html_url":"https://github.com/TooBug/wemark","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TooBug%2Fwemark","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TooBug%2Fwemark/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TooBug%2Fwemark/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TooBug%2Fwemark/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TooBug","download_url":"https://codeload.github.com/TooBug/wemark/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243830912,"owners_count":20354848,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["markdown","markdown-viewer","weapp","wechat","weixin","wxml","wxss","xiaochengxu"],"created_at":"2024-07-31T02:00:50.150Z","updated_at":"2025-03-16T05:30:29.543Z","avatar_url":"https://github.com/TooBug.png","language":"JavaScript","funding_links":[],"categories":["组件","JavaScript","UI组件","Uncategorized","开发阶段","9. 其他与展望","UI模板","Mobile UI Components"],"sub_categories":["Uncategorized","小程序组件","5. 参考材料","3、小程序模板","Wechat"],"readme":"# wemark - 微信小程序Markdown渲染库\n\n[![Travis](https://img.shields.io/travis/TooBug/wemark/master.svg)](https://travis-ci.org/TooBug/wemark)\n![MIT](https://img.shields.io/badge/LICENSE-MIT-green.svg)\n\n**小程序已原生支持HTML渲染，基本可替代wemark，推荐使用。本库年久失修，目前处于不维护状态，请谨慎使用。**\n\n![wemark](./screenshot.png)\n\n## 背景和功能\n\n用于在小程序中渲染Markdown文本。\n\n在小程序诞生之前，Markdown的渲染一般需要解析成HTML，然后渲染解析后的HTML。然而小程序并没有提供HTML渲染的功能，因此在wemark诞生之前，几乎所有的Markdown渲染库全部无法在小程序下正常工作。\n\nwemark可以实现在小程序下渲染Markdown内容，支持图片、表格在内的大部分Markdown特性。\n\n## 特性\n\n- 以小程序自定义组件形式提供，可直接引入使用\n- 支持大部分markdown标记的解析、渲染（详细支持情况见下方附录）\n- 支持代码表格、代码高亮、HTML视频等特性\n- 支持使用原生`rich-text`进行渲染\n- 兼容mpvue等开发框架\n\n## 使用方式\n\n1. 下载并拷贝`wemark`目录到小程序根目录\n2. 在页面的配置文件中引用`wemark`组件\n\t```json\n\t{\n\t\t\"usingComponents\": {\n\t\t\t\"wemark\": \"../wemark/wemark\"\n\t\t}\n\t}\n\t```\n3. WXML中使用：`\u003cwemark md=\"{{md}}\" link highlight type=\"wemark\"\u003e\u003c/wemark\u003e`\n\n\u003e 详细代码可见`demo`目录，该目录是一个完整的小程序“代码片段”项目，可在wemark根目录先运行`npm run copy`，然后添加到微信开发者工具的“代码片段”中进行体验。\n\n参数说明：\n\n- `md`，必填，需要渲染的Markdown字符串；\n- `link`，是否解析链接，如果解析，会使用小程序`navigator`组件展现，可在小程序内跳转，默认为`false`；\n- `highlight`，是否对代码进行高亮处理，默认为`false`；\n- `type`，渲染方式，`wemark`会使用`wemark`的数据结构和模板进行渲染，`rich-text`会使用小程序内置的`rich-text`组件进行渲染（不支持链接跳转、视频）。\n\n\u003e 注：代码高亮会使标签数量和解析后的数据量增大，不排除产生渲染性能问题，请根据实际需要酌情使用。\n\n## 其它框架中使用\n\n### mpvue\n\nmpvue支持引入微信自定义组件，可在页面的`.js`文件中添加配置，引用`wemark`，然后在`.vue`文件的`template`部分直接使用`wemark`：\n\n```javascript\nexport default {\n  config: {\n    // 这儿添加要用的小程序组件\n    usingComponents: {\n      wemark: '../../static/wemark/wemark'\n    }\n  }\n}\n```\n\n```html\n\u003cwemark :md=\"md\" link highlight type=\"wemark\"\u003e\u003c/wemark\u003e\n```\n\n\u003e 注：为了让mpvue打包时能把`wemark`包一并打包到`dist`目录，建议将`wemark`放置在源码`static`目录下。\n\n本项目`mpvue`目录中包含完整的mpvue小程序演示项目，可在`wemark`根目录运行`npm run copy`，然后在微信开发者工具中打开使用。\n\n### taro\n\n在已有的taro项目中进行如下修改：\n\n1. 将`wemark`放入`src`目录，即`src/wemark`目录\n2. 设置编译时复制`wemark`目录，修改`config/index.js`，在`copy`设置项中增加`wemark`，参考如下：\n\t```javascript\n\tcopy: {\n\t  patterns: [\n\t    {\n\t      from: 'src/wemark',\n\t      to: 'dist/wemark',\n\t    },\n\t  ],\n\t  options: {\n\t  }\n\t},\n\t```\n3. 设置taro编译时忽略`remarkable.js`，继续修改`config/index.js`，参考如下：\n\t```javascript\n\tweapp: {\n\t  compile: {\n\t    exclude: [\n\t      'src/wemark/remarkable.js',\n\t    ]\n\t  },\n\t  ...\n\t}\n\t```\n4. 在页面中引入和使用`wemark`，例如`src/pages/index/index.js`：\n\t```javascript\n\tconfig = {\n\t  navigationBarTitleText: '首页',\n\t  usingComponents: {\n\t    wemark: '../../wemark/wemark'\n\t  }\n\t}\n\tstate = {\n\t  md: '# heading\\n\\nText'\n\t}\n\t//...\n\trender () {\n\t  return (\n\t    \u003cView className='index'\u003e\n\t      \u003cwemark md={this.state.md} link highlight type='wemark' /\u003e\n\t    \u003c/View\u003e\n\t  )\n\t}\n\t```\n5. 在 `global.d.ts` 中添加以下内容（仅 typescript 项目）\n    ``` ts\n    declare namespace JSX {\n      interface IntrinsicElements {\n        wemark: any\n      }\n    }\n\t```\n\n本项目`taro`目录中包含完整的taro小程序演示项目，可在`wemark`根目录运行`npm run copy`，然后在微信开发者工具中打开使用。\n\n\u003e 特别感谢 @Songkeys 全程跟进taro使用事宜，详情见 \u003chttps://github.com/TooBug/wemark/issues/36\u003e 。\n\n## 附：特性\n\n- 标题\n- 段落\n- 代码段（可高亮）\n- 引用\n- 无序列表\n- 有序列表\n- 粗体\n- 强调（斜体）\n- 删除线\n- 行内代码\n- 图片\n- 表格\n- HTML标记\n\t- 视频\n\n## 测试\n\n```shell\nnpm install\nnpm test\n```\n\n## 开源协议\n\nMIT\n\n## 用户列表\n\n- [TooNote](https://xiaotu.io)\n- [王者荣耀早知道](https://www.wxappr.com/app/1449)\n- [有的选](https://www.damengxiang.me/app/724e3131.html)\n- [群里有事](http://www.ifanr.com/minapp/843889) （目测 尝试联系作者确认，没有回应）\n- [麦芽Lite](https://minapp.com/miniapp/10295)\n- [前端小助手](https://user-images.githubusercontent.com/8676711/51069422-cee4f780-1669-11e9-937c-33055af05eef.jpg)（前端早报、周刊等信息）\n- [GitHub Trending Hub](https://github.com/ZhuPeng/mp-githubtrending) (以 Feed 流形式查看 GitHub Trending 仓库集合的工具)\n\n\n如果你也使用了 wemark，欢迎提 PR 将自己的小程序加入列表\n\n## 版本记录\n\n### v2.0.0 2019-02-23\n\n- 修复代码高亮开启时部分代码显示错误的问题 #58\n\n### v2.0.0-beta2 2018-08-18\n\n- 修复HTML代码高亮的bug #39\n\n### v2.0.0-beta1 2018-07-12\n\n- 重构代码，使用小程序自定义组件发布，兼容mpvue #34 #32 #24\n- 支持代码高亮 #25\n- 支持链接解析，在小程序内跳转 #37\n- 支持使用小程序富文本组件`rich-text`渲染\n- 支持“双空格+回车”的软换行渲染 #29\n\n### v1.2.3 2018-07-05\n\n- 支持缩进形式的代码段 #31 by kapeter\n- 修复“##”后不加空格和文字时渲染出错的问题 #27\n\n### v1.2.2 2018-01-30\n\n- 修复小程序框架更新后数组判断失效导致渲染失败的问题 #17\n\n### v1.2.1 2017-07-24\n\n- 支持使用`video[poster]`属性添加视频封面图 #15 by @kilik52\n\n### v1.2.0 2017-06-30\n\n- 一些渲染细节样式修正 #9 #10\n- 图片渲染使用`widthFix`模式，不再动态计算高度 #11 #12\n### v1.1.0 2017-01-22\n\n- 添加删除线渲染（`~~deleted~~`）\n- 添加HTML视频解析（需求\u0026初始实现 by @littledu）\n- 解析功能补齐自动测试\n\n### v1.0.0 2016-12-12\n\n- 基本功能\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTooBug%2Fwemark","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTooBug%2Fwemark","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTooBug%2Fwemark/lists"}