Android使用marked.js渲染markdown文档

最新推荐文章于 2024-07-10 03:06:31 发布
最新推荐文章于 2024-07-10 03:06:31 发布
阅读量1.3k 收藏 4
点赞数
分类专栏： 神马笔记 文章标签： marked.js highlight.js markdown
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chuyangchangxi/article/details/86251180
版权
本文介绍如何在Android中使用marked.js和highlight.js将Markdown转换为HTML，以实现预览功能。通过创建template.html加载所需库，处理代码高亮和Markdown转HTML，最终解决在不同Android系统中图片加载的问题。
摘要由CSDN通过智能技术生成

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样式

并且提供了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"/>
最低0.47元/天 解锁文章
Amoy阿磊
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android渲染markdown文件
济沧海 x 远沧溟
10-23 2774
Android渲染markdown文件一、使用方式Usage二、代码解析三、参考资料 一、使用方式Usage 实现效果 下载android_markdown模块 下载地址：https://github.com/jicanghai37927/WhatsAndroid/tree/master/andnext_markdown 创建MarkdownWebView控件 &lt;c...
Android解析渲染Markdown文档
济沧海 x 远沧溟
04-07 2793
Android解析渲染Markdown文档一、目标二、体验地址三、功能设计四、解析并渲染Markdown1. 已有的方案2. 新的方案五、问题处理六、Finally 一、目标 使用Markdown作为软件更新内容的文档格式。 二、体验地址 神马笔记最新版本下载：【神马笔记 版本2.1.0——软件更新功能.apk】 三、功能设计 神马笔记的软件更新介绍分为2个部分。 概要介绍，显示在软件更新界...
Marked.js - HTML 中直接解析显示 Markdown
hzx198's Blog
01-06 5069
Marked.js 的介绍与使用
Android 渲染 markdown
最新发布
weixin_36848098的博客
07-10 55
如何在Android中渲染markdown 引言 在Android应用中实现markdown渲染是一个常见的需求，它可以让文本内容更具有可读性和美观性。本文将指导你如何实现在Android应用中渲染markdown。 流程 下面是实现Android中渲染markdown的基本流程： 步骤 操作 1 引入Mar...
MarkdownView:一个用于Android的可自定义的Markdown渲染器
gitblog_00039的博客
03-14 655
MarkdownView:一个用于Android的可自定义的Markdown渲染器 MarkdownView是一个开源的Android库，它允许您在应用程序中显示Markdown文本，并且可以根据需要进行定制。 功能与用途 MarkdownView可以用来显示来自网络或本地存储的Markdown文件。它可以用来创建简单的笔记应用，也可以用来展示带有图片、表格和代码块的技术文档。 此外，Markdo...
Android markdown富文本渲染解析实现
资深全栈开发工程师
10-22 2403
MarkDown Android平台的原生Markdown解析器，已整合进 RichText 由markdown文本直接转换为Spanned，快捷高效 不依赖特定控件，低侵入性 遵循 Github Flavored Markdown 标准 效果展示 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f45iciTJ-1603370282814)(image/img1.jpg)] 使用 Markdown.fromMarkdown(text,imageGetter,textV
markdown-template:使用marked.js 对markdown 进行简单的客户端渲染
06-27
`marked.js`常用于博客系统、笔记应用、文档预览、GitHub Pages等场景，简化了客户端的Markdown渲染工作，提升了用户体验。 总结，`marked.js`是客户端Markdown渲染的一个强大工具，通过简单的API调用即可实现...
marked-to-md:标记渲染器将 Markdown 渲染为... Markdown
06-22
使用示例： ：打开标准 Markdown 文档并为 remark.js 添加所需的分隔符。 如何使用它？ var marked = require ( 'marked' ) ; var mdRenderer = require ( 'marked-to-md' ) ; var source = '# Markdown to md ...
ng-markdown:使用Angular和marked.js进行实时渲染的浏览器降价编辑器
07-13
**ng-markdown: 使用Angular和marked.js实现的实时Markdown编辑器** 在Web开发中，Markdown是一种流行的轻量级标记语言，用于编写易于阅读和编写的纯文本格式，然后可以转换为HTML。`ng-markdown`项目是针对Angular...
SpringBoot使用Editor.md构建Markdown富文本编辑器示例
08-27
本文主要介绍了使用 Spring Boot框架结合 Editor.md构建 Markdown 富文本编辑器的示例。Editor.md是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。通过配置 Editor....
Android-MarkdownView-支持Markdown渲染的WebView实现
08-12
MarkdownView - 支持Markdown渲染的WebView实现
Android-一个利用RxJava在TextView和EditText上渲染的markdown解析器
08-12
一个利用RxJava在TextView和EditText上渲染的markdown解析器，支持大部分语法以及部分语法在EditText上实时预览(yydcdut)
Android代码-Android Markdown 解析库，做的很棒，很有用。
08-06
MarkdownView Android library to display markdown text. It uses Flexmark and some of its extensions. Setup Add it in your root build.gradle at the end of repositories: allprojects { repositories { ... maven { url 'https://jitpack.io' } } } Add the dependency: implementation 'com.github.tiagohm.MarkdownView:library:LATEST-VERSION' LATEST-VERSION is Usage <br /> mMarkdownView = (MarkdownView)findViewById(R.id.markdown_view); mMarkdownView.addStyleSheet(n
支持Markdown渲染的WebView实现。-Android开发
05-26
MarkdownView WebView实现，支持Markdown呈现。 前提条件将此添加到您的root build.gradle文件（而不是模块build.gradle文件）中：allprojects {存储库{... maven MarkdownView支持Markdown渲染的WebView实现。 先决条件将其添加到您的root build.gradle文件（而不是模块build.gradle文件）中：allprojects {存储库{... maven {url“ https://jitpack.io”}}}依赖性将其添加到模块的构建中。 gradle文件（确保版本与上面的JitPack徽章匹配）：依赖项{...实现'com.github.GrenderG：MarkdownView：0.1.2'}基本用法注意：您将需要指定INTERNET pe
markedjs-extra:标记的 Markdown 额外插件。 支持脚注、定义、复选框
05-30
##markedjs-额外 该存储库是这是一个支持 Markdown Extra 语法的插件的 GitHub 分支。 打开 demo/demo.html 自己尝试一下。 ＃＃安装 使用 Bower 安装： bower install 标记js-extra --save 使用 npm 安装： npm install 标记额外 --save 用法 最少使用： var marked = require ( 'marked' ) ; console . log ( marked ( 'I am using __markdown__.' ) ) ; // Outputs: <p>I am using <strong>markdown</strong>.</p> 带有默认值的示例设置选项： var marked = require ( 'marked' ) ; marked . setO
marked-sanitizer-github:一个marked.js的净化器，它以与GitHub相同的方式净化markdown中HTML元素
05-02
GitHub的Markdown Sanitizer的端口，用于 提供了一个清除Markdown文档中HTML元素的清除器。 该实现是从移植的。 默认情况下，为提供消毒。 但是它不允许任何HTML元素，并在解析的Markdown文档中对所有元素进行转义...
MarkdownView-Android: 带给Android开发者的优雅Markdown渲染库
gitblog_00007的博客
04-16 494
MarkdownView-Android: 带给Android开发者的优雅Markdown渲染库 MarkdownView-AndroidMarkdown lets you easily display markdown data in android and its compose ready.项目地址:https://gitcode.com/gh_mirrors/ma/MarkdownVie...
marked.js简易手册
weixin_30423977的博客
12-26 1114
marked.js简易手册 本文介绍的是marked.js。秉持“来之即用”的原则，对它进行简要的翻译和归纳， 安装 在网上引用或者是引用本地文件即可。要么就用命令行： npm install marked --save 最简单用法 var rendererMD = new marked.Renderer(); marked.setOptions({ rendere...
Marked.js vue
11-16
Marked.js 是一个用于解析 Markdown 的 JavaScript 库，而 vue-markdown 是一个基于 marked.js 的 Vue Markdown 插件。它可以方便地将 Markdown 文档解析为 HTML，并且可以在 Vue 项目中使用。使用 vue-markdown 插件的步骤如下： 1. 在 Vue 组件中引入插件： ```javascript import VueMarkdown from 'vue-markdown' ``` 2. 注册组件： ```javascript components: { 'vue-markdown': VueMarkdown } ``` 3. 使用组件： ```html <template> <vue-markdown :source="markdownText"></vue-markdown> </template> ``` 其中，`:source` 属性用于指定要解析的 Markdown 文本。在组件中使用 vue-markdown 插件后，它会自动将 Markdown 文本解析为 HTML 并渲染到页面上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值