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. 其他:有建议或意见可与邮件沟通;

21 条评论 发表评论

如何能控制不从页面左上角来展示啊,我想嵌入在页面内使用markdown,而不是整篇页面都是用markdown;

你好,感谢使用反馈,下个版本会更新页面部分元件使用markdown渲染,这个版本暂时只能整页渲染。

牛逼!只能说太厉害了;超赞,哈哈哈哈;

2.0版本更新不仅实现区块markdown渲染,而且还实现了单页面内多个markdown区块渲染,固定区域渲染;真的太牛逼了!

如果能实现右侧的导航栏就更牛逼~哈哈哈,如页面中出现多个markdown块元素时,导航从上到下依次排列即可;

区块目录是可行的,但实现点击目录跳转对应位置比较麻烦,需要花费较多时间去调整,只能以后空的时候搞了。

还有maekdown 的一些颜色风格样式如何调整,略懂一些css基础,是否可以指导源文件大概在哪儿修改颜色风格等样式可高度自定义;

目前行内块元素 “ 标志性略低,期望能自定义该行内块颜色

作者好,在商店页面预览发现,一直是 文档转码载入中,请稍后..
我上传蓝湖也一直显示 文档转码载入中,请稍后..
只有本地预览是对的,请问有解决方法不

你好,官方演示的JS资源似乎被删除了,你可以采用离线导入的方式来使用,这种方式不必联网,方法如下:
离线资源导入:将下载压缩包里的DefaultSettings文件夹复制到Axure安装目录下(如:C:\Program Files\Axure\Axure RP 9),然后将元件库文件Markdown文档.rplib导入Axure RP元件库即可;

您好,我也出现了以上问题,请问一下…mac 该如何离线导入呢?(可能问题比较愚蠢,实在不好意思啊)

【Mac导入离线包】
将下载压缩包里的DefaultSettings文件夹复制到以下目录后重新打开Axure即可
以中文系统为例:前往–应用程序–右键点击程序图标–显示包内容,依次打开文件夹:Contents>MacOS>

发表回复

以下作品你可能也喜欢:
推荐

售价:¥ 30.99 销量: 69 12955
推荐

产品定义为快消品B2B2C电商平台+供应链金融服务的系统,该WEB端版…

继续阅读 →

售价:¥ 88.88 销量: 101 16195
推荐

相关原型: SCM进销存管理系统高保真原型:https://www.a…

继续阅读 →

售价:¥ 60.00 销量: 56 11334
推荐

产品名称:物联网可视化数据大屏及数据单元地图组件原型 作品标签:可视化…

继续阅读 →

售价:¥ 69.00 销量: 284 26277
推荐

这是一款根据某500强药企的需求为肿瘤医生打造的学习平台,其平台也适用…

继续阅读 →

售价:¥ 49.00 销量: 18 4339
推荐

软件版本:Axure 8.0 作品大小:39.95MB 作品类型:高保…

继续阅读 →

售价:¥ 89.90 销量: 57 14411