Markdown文档元件

兼容性提醒：此作品只兼容Axure RP 9.0及以上版本，低版本软件无法使用。

1 元件概述

1.1 运行环境

元件版本：v2.0.0

兼容版本：Axure RP 9/10

作者：shileiye

最后更新：2024-05-20

1.2 更新记录

更新日期：2024-05-20  版本号：v2.0.0

更新内容：更新压缩包，之前如有一直在加载中，无法渲染显示的请使用Axure移除旧版原元件库后重新下载导入使用。

更新日期：2022-06-15  版本号：v2.0.0

更新内容：支持页面局部区块内容渲染及部分设置，增加PDR文档MD模版

更新日期：2022-05-25  版本号：v1.0.3

更新内容：改进资源加载策略，本地资源存在则完全离线使用，不存在则调用远程资源，确保文档正常显示

更新日期：2022-05-24  版本号：v1.0.2

更新内容：离线和在线版本共存，在线版无须导入资源文件，即装即用

更新日期：2022-05-23  版本号：v1.0.1

更新内容：配置离线版，不依赖网络运行

更新日期：2022-05-22  版本号：v1.0.0

更新内容：在线版发布

1.3 元件介绍

Markdown文档元件是为原型设计软件Axure RP输出显示Markdowm文档而制作的元件，利用该元件可让Axure RP设计的原型具备输出Markdown文档的能力，通过在原型中书写Markdown格式的文档自动渲染为美观易于阅读的网页文档。该元件基于Vditor编辑器制作，Markdowm文档支持输出大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染、plantumlUML 图等元素，支持主流浏览器，对移动端友好，配合官方开发的Markdown编辑器简直不要太好用！元件实现了HTML代码块功能，如果懂点HTML，发挥想象力，理论上可以实现任何网页效果。比如用它来编写PRD、数据字典、接口文档？后续如果有需要的话我会提供一些内容案例模版给大家，我始终期望并实践的一件事就是把那些乱七八糟的产品文档归到一份原型里，无论是Word文档、表格数据、脑图还是流程图，其实只要一份原型文档就可以了，对吧？反正我已经这样做了，产品人，你们自己看着办吧。​

1.4 语法支持

• 所有 CommonMark 语法：分隔线、ATX 标题、Setext 标题、缩进代码块、围栏代码块、HTML 块、链接引用定义、段落、块引用、列表、反斜杠转义、HTML 实体、行级代码、强调、加粗、链接、图片、行级 HTML、硬换行、软换行和纯文本。
• 所有 GFM 语法：表格、任务列表项、删除线、自动链接、XSS 过滤
• 常用 Markdown 扩展语法：脚注、ToC、自定义标题 ID
• 图表语法
  * 流程图、时序图、甘特图，通过 Mermaid 支持
  * Graphviz
  * 折线图、饼图、脑图等，通过 ECharts 支持
• 五线谱：通过 abc.js 支持
• 数学公式：数学公式块、行级数学公式，通过 MathJax 和 KaTeX 支持
• YAML Front Matter
• 中文语境优化
  * 中西文之间插入空格
  * 术语拼写修正
  * 中文后跟英文逗号句号等标点替换为中文对应标点
  以上大部分特性可以通过元件setting配置是否启用，设计者可根据自己的应用场景选择搭配。

2 使用说明及案例

2.1 元件使用方法

1. 1. 离线资源导入：将下载压缩包里的DefaultSettings文件夹复制到Axure安装目录下（如：C:\Program Files\Axure\Axure RP 9），然后将元件库文件Markdown文档.rplib导入Axure RP元件库即可；
   2. 使用在线资源：将元件库文件Markdown文档.rplib导入Axure RP元件库即可；
   3. 使用：在Axure RP元件库选择Markdown文档后，从里面选择Markdown元件拖到画布中，将Markdown文本输入到元件markdown_text输入框中即可，注意，整页渲染每个页面有且只能有一个Markdown文档元件，区域渲染页面可以存在多个Markdown文档元件，可在元件的markdown_setting中继器中进行渲染模式、大纲、渲染区域高度自适应等部分设置，详细设置请参看remark字段说明；​
   4. 运行：资源导入本地则为离线版，无须依赖网络，完全离线使用。若未导入本地资源则自动加载网络资源，确保文档显示正常；
   5. 附注：Markdown整页渲染页面的样式是自动生成的，在Axure RP中除页面背景外，修改元件的大小、样式、颜色等样式并不会对其最终生成的效果产生影响，区域渲染可进行部分设置，但区域渲染出来的大纲虽然可以显示，但存在一些小问题，进行区域渲染的时候不建议展示大纲，后续有时间再进行完善；
   6. 其他：有建议或意见可与邮件沟通；