Android使用marked.js渲染markdown文档
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内容
<!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
的一段代码实现转义。
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文档相关推荐
- Javascript 强制浏览器渲染Dom文档
在Cordova+Framework7开发Hybrid App时,在iPhone 7上遇到一个诡异的现象(Chrome浏览器.Android都正常):js修改手风琴中的input文本框的值后,但页面仍 ...
- MarkdownView:Markdown 文档预览视图组件
原文链接:https://github.com/keitaoouchi/MarkdownView MarkdownView:Markdown 文档预览视图组件.# 为开源点赞# -- 由SwiftLa ...
- linux 如何查看终端格式,你应该还不知道,Linux终端下的 Markdown 文档查看器
原标题:你应该还不知道,Linux终端下的 Markdown 文档查看器 现在,Markdown 差不多已经成为技术文档的标准.它可以实现技术文档的快捷写作,以及输出发布.同样都是标记语言,但Mark ...
- 在Spring中使用Asciidoctor:使用Spring MVC渲染Asciidoc文档
Asciidoc是一种基于文本的文档格式,因此如果要将文档提交到版本控制系统中并跟踪不同版本之间的更改,它非常有用. 这使Asciidoc成为编写书籍,技术文档,常见问题解答或用户手册的理想工具. 创 ...
- typora插入代码设置_一篇文章教会你如何在Markdown文档中插入数学公式
我平时用的比较多的是Typora这个markdown编辑器.所以在这里就以Typora为例,介绍如何在Markdown文档中插入数学公式的方法. 如果你学会了这个方法,那么你无论使用哪一个markdo ...
- linux文档查看器翻译,mdv – Linux终端下的 Markdown 文档查看器
现在,Markdown 差不多已经成为技术文档的标准.它可以实现技术文档的快捷写作,以及输出发布.同样都是标记语言,但Markdown 文档相比HTML更加简单.一是体现在标记符的数量上,二是体现在标 ...
- Dva.js 入门级教学文档-1
Dva.js 入门级教学文档-1 简介 一.介绍 1.什么是 dva 2.dva 的作用是什么 二.环境搭建和使用 1.环境搭建 2.创建项目 3.使用 antd 三.全局架构 1.index.js( ...
- js导出word文档 可以兼容IE8+浏览器适配其他浏览器
js导出word文档,兼容IE8浏览器 其他浏览器需要引入两个文件:FileSaver.js 和 jqueryWordExport.js 需要兼容IE8浏览器需要引用:FileSaver.js exc ...
- php编写文件管理工具,php之markdown文档管理工具的实现代码
本文主要和大家分享php之markdown文档管理工具的实现代码,希望能帮助到大家. 主要目标: 1.可以多人编辑 2.可以在浏览器中查看 3.有一个可以折叠的目录 4.支持多级目录 5.支持mark ...
- 在HBuilder中编辑markdown文档(原)
最近才真正意识到markdown的神奇.本篇内容主要部分来自HBuilderX自带的markdown语法帮助,加入了一些自己认为很实用的使用方法. 目 录 自动生成目录 返回目录 生成html页面 引 ...
最新文章
- 2019-12-06 数字信号处理的学科结构
- 那个双非本科,还想转算法岗的姑娘,最后怎么了?
- JavaScript 语言基础知识点图示
- Juniper Firewall多进单出配制实例
- 【快速幂】小明解密码 (jzoj 2146)
- js连续指定两次或者多次的click事件(解决办法)
- ubuntu安装zsh、oh-my-zsh及常用配置
- HTML+CSS+JS实现 ❤️贪吃蛇游戏、你能吃过我?❤️【源码送给你一起来玩-建议收藏】
- c语言程序设计案例教程肖利群,C语言程序设计案例教程
- python 拼音 四线格_Python 中拼音库 PyPinyin 的用法
- GREAT-UPD 开源软件使用笔记
- ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(五) 之 加好友,加群流程,消息管理和即时消息提示的实现...
- 爱奇艺《大魔术师》海内外备受关注
- TCP四次挥手(详解)
- 国考省考行测:年均增长率,等速率增长率问题
- SA-用calibre做xrc时用的cellmap文件怎么设置
- 年总结兼英语小黑屋总结
- 发布软件——电子节拍器
- 计算机通信技术论文,计算机通信技术专业论文选题 计算机通信技术论文题目如何取...
- 成人大专和全日制大专的区别在哪里