Android使用marked.js渲染markdown文档

最新推荐文章于 2025-06-19 09:09:54 发布

原创

最新推荐文章于 2025-06-19 09:09:54 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#marked.js #highlight.js #markdown

本文介绍如何在Android中使用marked.js和highlight.js将Markdown转换为HTML，以实现预览功能。通过创建template.html加载所需库，处理代码高亮和Markdown转HTML，最终解决在不同Android系统中图片加载的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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。

官方网站：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样式

并且提供了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