Markdown文档元件

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

1 元件概述

1.1 运行环境

元件版本:v2.0.0

兼容版本:Axure RP 9/10

作者:shileiye

最后更新:2022-06-15

1.2 更新记录

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

9 条评论 发表评论

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

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

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

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

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

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

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

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

发表评论

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

大家好,我是大马猴,又见面了,用心做产品,不忘初心,向着梦想前行,愿你从中找寻到设计的乐趣。 感谢官方在原型推荐第十三期,精心的推荐了我的这个后台模板,同时也感谢各位设计友人对我的支持。 兼容axure8,axure9,axure10。可以…

售价:¥ 72.80 销量: 1352 65877
推荐

更新时间:2022-08-12 版本v3.2 作品页面数量:80页 兼容软件:Axure9、Axure10 文件大小:6.5M 名称:工作流管理(审批管理)原型 作品介绍: 原型包含: 工作流管理模块,适用于各种后台管理系统表单审批功能。 …

售价:¥ 89.00 销量: 12 1710
推荐

V1.7 1. 新增标签管理模块 2022-04-08 V1.6 新增设置模块页面 2021-09-30 V1.5 新增发表动态、选择位置、可见范围、添加图片等页面 2021-09-07 V1.4 增加服务通知、服务号消息页面 增加发起群聊…

售价:¥ 49.00 销量: 40 8845
推荐

该系统是一款集媒资播控、运营为一体的大后台,适用于短视频、中视频、长视频、专辑系列;主要功能有:视频管理、专辑管理、频道管理、标签管理、用户管理、视频审核、专辑审核、用户资料审核、评论审核、举报管理、反馈管理、push管理、运营位管理、权限…

售价:¥ 55.55 销量: 73 13832
推荐

作品名称:AxureUX中后台管理信息系统通用原型方案 v2 作品类型:模板类/组件 主要适用:Web端 软件版本:Axure 9 作品编号:TEM020 特别说明: 1、本作品是使用Axure RP9制作的全新版本,作品相关资源仅支持使用…

售价:¥ 139.00 销量: 641 47971
推荐

高保真互联网公司官网原型 版本:V1.0 主要适用:web 软件版本:Axure 8.0 ----------假装有分割线---------- 嗯,这个是我捣鼓了一阵子的互联网官网原型,目前官网页面包含:首页、作品、服务、评价、关于、商城以…

售价:¥ 9.90 销量: 107 6335