SAP Fiori 应用中 markdown 格式的输入和渲染的支持

笔者知识星球里有朋友提问，他接到了一个 SAP UI5 开发任务，需要给 Manage Product Master Data 这个 Fiori 应用做一些增强：

具体需求是让 Notes 区域的文本编辑，支持 markdown 格式的输入，并能实时看到渲染效果。

简而言之，就是给 SAP S/4HANA 的物料主数据编辑应用里，增添一个「在线 markdown 编辑器」的小功能。

这个朋友拿到这个需求有点无从下手，于是找我咨询。

我们把这个需求进行拆解，有两个功能点需要实现。

其一是 SAP S/4HANA Manage Product Master Data 是一个基于 Fiori Elements 开发的 SAP UI5 应用。

关于 Fiori Elements 应用的扩展，笔者的Fiori Elements 开发教程有专门的章节介绍。

另一个功能点是，如何基于 SAP UI5 实现一个简单的 markdown 编辑器？

笔者很多年前捣鼓过个人博客，采取了当年流行的解决方案：Github Pages.

这是 GitHub 提供的一项服务，允许用户通过 GitHub 仓库免费托管静态网站。只需要通过简单的配置，就可以轻松地将自己的个人网站，发布到 Github Pages 上面。

为此我还专门去买了一个域名。

不过个人网站 https://jerrywang-sap.cn 弄好之后，我很快就发现，这只是万里长征完成了第一步啊。

要让自己的网站被搜索引擎收录并出现在搜索结果排名靠前的位置，还得在 SEO(Search Engine Optimization) 下功夫，而这也是一个大坑，里面的学问很深。

后来笔者评估了一下，决定弃坑了，还是把有限的技能点数，全放在 SAP 开发技术的技能树上吧。于是我停止了个人网站的维护，把所有技术文章都托管在了 CSDN 上。

不过这个折腾过程也没有白费。因为我使用 markdown 写博客，需要选择一个开源工具将 markdown 源代码转换成 html 原生代码，这样博客才能显示在我的个人网站上。

我当时研究了这款开源的 markdown 解析和转换工具 marked，目前在 Github 上有三万四千多个 stars 了。

https://github.com/markedjs

在命令行里轻松对其进行测试：

echo # header | marked

即可得到对应的 HTML 原生代码：

既然有了 marked，我们不用重复造轮子，直接在 SAP UI5 应用里使用 marked 的 parse 方法，将用户通过 SAP UI5 TextArea 控件手敲的 markdown 代码，转换成原生的 HTML 代码即可：

笔者做了一个例子，效果如下：

这个例子具体的实现步骤和源代码，笔者放在了我的SAP UI5 学习教程上，扫码即可阅读。