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中实现方式
- 使用Markdown解析器,直接输出为Html语法文档;
- 在Html使用JS解析器,动态解析Markdown内容;
这里,我们使用的是第二种方式,将所有工作交于浏览器来实现。
三、准备工作
首先,需要JavaScript版本的markdown的解析器。这里选择了marked.js。
GitHub项目地址:https://github.com/markedjs/marked
其次,需要CSS样式用来渲染。这里使用了GitHub风格样式github-markdown-css。
GitHub项目地址:https://github.com/sindresorhus/github-markdown-css
最后,处理代码高亮。
虽然神马笔记暂时还未支持编辑代码,但Markdown是支持代码格式的。
因此,这里选择highlight.js实现代码高亮。
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内容
<!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"/>