Android解析渲染Markdown文档

Android解析渲染Markdown文档

一、目标

使用Markdown作为软件更新内容的文档格式。

二、体验地址

神马笔记最新版本下载:【神马笔记 版本2.1.0——软件更新功能.apk

三、功能设计

神马笔记的软件更新介绍分为2个部分。

  1. 概要介绍,显示在软件更新界面
  2. 详细介绍,单独的详情界面

介绍内容有如下几点要求:

  1. 基本的文字样式:粗体、斜体、下划线、……
  2. 无序符号
  3. 有序符号
  4. 可点击的链接
  5. ……

因为有格式及交互的要求,纯文本是无法达到此要求的,必须使用标识性语言才行。

Android内置了HTML解析。

  1. 使用WebView显示HTML内容
  2. 将HTML转换为Spannable对象,可以用于TextView及其子类中

就使用的便捷性来说,HTML确实是非常不错的选择。

但是,考虑到编辑性,Markdown则是更加适合的选择。

关于Markdown的更多内容,请参考百度百科

虽然Markdown在编辑性和阅读性上胜过HTML很多,并且功能性对于当前的场景也是适用的。但是存在一个问题,如何解析Markdown?

四、解析并渲染Markdown

1. 已有的方案

我们在之前的2篇文章中有介绍过Markdown的解析。

文章 概述
Android使用marked.js渲染markdown文档 marked.js解析markdown文档,使用WebView渲染文档内容。
马克笔记MarkNote——优质的Android开源Markdown笔记应用 flexmark-java解析markdown文档,使用WebView进行渲染。
解析器 参考地址
marked.js https://marked.js.org
flexmark-java https://github.com/vsch/flexmark-java

无论是通过marked.js还是flexmark-java解析,最终都是转化为HTML语言,然后使用WebView进行渲染。

2. 新的方案

使用 WebView渲染Markdown文档,确实是非常不错的一种实现方式。

只是为了展示介绍内容就使用WebView,未免过于大材小用,因此决定寻找一张更轻量化的实现方案。

理想的实现方案——Spannable

如果能将markdwn文档解析成Spannable对象,那么使用TextView及其子类即可渲染markdown文档。

如何转换为Spannable对象呢?

  1. 使用markdown解析器解析文档,将解析结果转换为Spannable对象。
  2. 使用markdown解析器解析文档,将解析结果转换为HTML文档,再通过HTML对象转换为Spannable对象。

马克笔记MarkNote——优质的Android开源Markdown笔记应用》一文已经实现了markdown解析为html,仅需使用Android内置的HTML对象转换即可。

如果可以一步到位,自然是再好不过了。

万能的Github已经提供了解决方案——Markwon

有关Markwon的使用方式,请查看官方网站:https://noties.github.io/Markwon/。

五、问题处理

使用Markwon优雅地展示了软件更新内容,但是交互上存在2个小问题。

问题 原因 解决方案
setTextIsSelectableture后,无法点击链接 设置文本为可选后,MovementMethod被设置了ArrowKeyMovementMethod导致无法点击。 MovementMethod重新设置为LinkMovementMethod
最后内容为链接时,点击链接下方空白区域也会触发跳转链接 原因未知。 在文本最后插入中文空白字符'\u3000'。不能插入英文空白字符,因为被trim

六、Finally

~年年欲惜春~春去不容惜~