Android使用marked.js渲染markdown文档

一、目标

1. 效果图
2. 下载地址

二、功能设计
三、准备工作
四、组合起来

1. template.html
2. escape

五、Final

一、目标

通过浏览器渲染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中实现方式

使用Markdown解析器，直接输出为Html语法文档；
在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内容

<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的一段代码实现转义。

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无法显示本地图片

~奈何～奈何～

Android使用marked.js渲染markdown文档