Android使用marked.js渲染markdown文档

Android使用marked.js渲染markdown文档

一、目标

通过浏览器渲染markdown文档,实现预览功能

1. 效果图

  • 左侧——Smartisan浏览器
  • 右侧——UC浏览器

2. 下载地址

神马笔记最新版本:【神马笔记 版本1.2.0.apk

二、功能设计

神马笔记支持图文混排的笔记形式,但图片与文本格式文档无法满足图文混排的方式。

因此,需要第三种形式的文档格式,并且支持图文混排。

markdown、html、pdf、word、……

所有备选格式中,markdown是最为简单,并且导出后的格式也可以二次编辑,实在是最理想的第三种文档格式。

虽然神马笔记的笔记格式很容易转换为Markdown格式。但是?

神马笔记目前是不支持编辑markdown格式,也没有预览markdown格式的功能,并且Android系统也没有内置Markdown格式的阅读器。那么怎么才能预览导出的markdown文档了?

将Markdown文档转化为html,再调用浏览器进行预览!

Markdown转Html用2中实现方式

  1. 使用Markdown解析器,直接输出为Html语法文档;
  2. 在Html使用JS解析器,动态解析Markdown内容;

这里,我们使用的是第二种方式,将所有工作交于浏览器来实现。

三、准备工作

首先,需要JavaScript版本的markdown的解析器。这里选择了marked.js。

官方网站:https://marked.js.org

GitHub项目地址:https://github.com/markedjs/marked

其次,需要CSS样式用来渲染。这里使用了GitHub风格样式github-markdown-css。

GitHub项目地址:https://github.com/sindresorhus/github-markdown-css

最后,处理代码高亮。

虽然神马笔记暂时还未支持编辑代码,但Markdown是支持代码格式的。

因此,这里选择highlight.js实现代码高亮。

官方网站:https://highlightjs.org/

GitHub项目地址:https://github.com/highlightjs/highlight.js

最后的最后,选择CDN服务器用来加载JS脚本及CSS样式,选择以下2个CDN网站。

BootCDN:https://www.bootcdn.cn/

CDNJS:https://cdnjs.com/

四、组合起来

1. template.html

template.html加载了外部JS脚本及CSS样式

  • https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css
  • https://cdn.bootcss.com/highlight.js/9.13.1/styles/default.min.css
  • https://cdn.bootcss.com/highlight.js/9.13.1/highlight.min.js
  • https://cdnjs.cloudflare.com/ajax/libs/marked/0.6.0/marked.min.js

并且提供了2个模版参数

  • {title} 标题
  • {markdown} markdown内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8"/>

<meta name="viewport" content="width=device-width, initial-scale=1"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css"
rel="stylesheet"/>
<style>
.markdown-body
{
box-sizing: border-box;
min-width: 200px;
max-width: 980px;
margin: 0 auto;
padding: 45px;
}

@media (max-width: 767px)
{
.markdown-body
{
padding: 15px;
}
}
</style>

<link href="https://cdn.bootcss.com/highlight.js/9.13.1/styles/default.min.css" rel="stylesheet"/>

<script src="https://cdn.bootcss.com/highlight.js/9.13.1/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.6.0/marked.min.js"></script>

<script>

marked.setOptions({
renderer: new marked.Renderer(),
gfm: true,
tables: true,
breaks: true,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false,
highlight: function (code, lang) {
if (lang && hljs.getLanguage(lang)) {
return hljs.highlight(lang, code, true).value;
} else {
return hljs.highlightAuto(code).value;
}
}
});

</script>

<title>{title}</title>
</head>

<body>
<article id="content" class="markdown-body" style="text-align: left;"></article>

<script>
var text = '```java\npublic class BitmapUtils {}\nString text = null; \n```';

text = '{markdown}';
text = marked(text);

document.getElementById('content').innerHTML = text;
</script>
</body>

</html>

2. escape

替换{markdown}模版参数时,必须进行转义,否则无法正常显示。

借用了JSONStringer的一段代码实现转义。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
static String escape(String s) {

StringBuilder out = new StringBuilder(s.length() + 128);

for (int i = 0, length = s.length(); i < length; i++) {
char c = s.charAt(i);

/*
* From RFC 4627, "All Unicode characters may be placed within the
* quotation marks except for the characters that must be escaped:
* quotation mark, reverse solidus, and the control characters
* (U+0000 through U+001F)."
*/
switch (c) {
case '"':
case '\\':
case '/':
out.append('\\').append(c);
break;

case '\t':
out.append("\\t");
break;

case '\b':
out.append("\\b");
break;

case '\n':
out.append("\\n");
break;

case '\r':
out.append("\\r");
break;

case '\f':
out.append("\\f");
break;

default:
if (c <= 0x1F) {
out.append(String.format("\\u%04x", (int) c));
} else {
out.append(c);
}
break;
}

}

return out.toString();
}

五、Final

完成所有工作,导出Markdown文件,导出相关的图片,导出预览的Html文件。

调用第三方应用查看预览的html文件,你会惊喜的发现图片加载不出来

检查代码,发现一切都没有问题后,仍会发现图片还是加载不出来

主要原因在于:

Android 7.0(API 24)之后,调用Intent不能传递file://形式的Uri,只能通过content://传递本地文件Uri。

如此一来,浏览器无法定位相对路径。

即使文件中的图片路径使用绝对路径,采用file://路径形式,依然无法加载图片。

以下是一些测试结果,仅供参考。

机型 调用位置 浏览器 显示结果
坚果Pro2 神马笔记 Smartisan浏览器 无法显示
Chrome 无法显示
UC浏览器 正常显示
Smartisan文件管理器 Smartisan浏览器 正常显示
Chrome 不支持
UC浏览器 正常显示

查看浏览器地址栏,发现Smartisan文件管理器传递的Uri为file://

机型 调用位置 浏览器 显示结果
红米6 Pro 神马笔记 MIUI浏览器 正常显示
Chrome 无法显示
UC浏览器 正常显示
MIUI文件管理器 MIUI浏览器 正常显示
Chrome 无法显示
UC浏览器 正常显示

查看地址栏地址,发现MIUI文件管理器传递的Uri为file://content://两种形式。

MIU浏览器和UC浏览器显示为file://

Chrome显示为content://

结论:

  • UC浏览器完美支持file://及content://
  • MIUI浏览器完美支持file://及content://
  • Smartisan浏览器支持file://
  • Chrome无法显示本地图片

~奈何~奈何~