blue html中转换,Vue/Vue中Html和Markdown互相转换/README.md · bluemoon/LearningNotes - Gitee.com...

# Vue中Html和Markdown互相转换

## 前言

最近想实现的一个功能,就是将系统中的博客进行导出成Markdown格式,后面经过了调研发现有两种方法能够满足需求,一个是Java后台中将HTML转换成Markdown, 然后导出。第二种方式是在客户端将Html转换成Markdown

## 前台处理

### MarkdownToHtml

#### 安装

前台处理Markdown转换成Html,使用的是一款Vue组件 `showdown`:[点我传送](https://github.com/showdownjs/showdown)

前端处理的好处是不需要占用后端的计算资源,因此首选是让客户端做这种处理的事情

首先我们需要安装依赖

```

npm install showdown --save

```

或者使用CDN

```

https://unpkg.com/showdown/dist/showdown.min.js

```

#### Markdown 转成 Html

```

var showdown = require('showdown'),

converter = new showdown.Converter(),

text = '# hello, markdown!',

html = converter.makeHtml(text);

```

### HtmlToMarkdown

#### 安装

前台处理Html转换成Markdown,使用的是一款Vue组件 `turndown`:[点我传送](https://github.com/domchristie/turndown)

首先安装依赖

```

npm install turndown --save

```

或使用CDN加速

```

```

#### 使用

```

// For Node.js

var TurndownService = require('turndown')

var turndownService = new TurndownService()

var markdown = turndownService.turndown('

Hello world!

')

```

## 后端处理

后端处理使用的是 `flexmark-java` :[点我传送](https://github.com/vsch/flexmark-java)

### 引入依赖

```

com.vladsch.flexmark

flexmark-all

${flexmark.version}

```

### MarkdownToHtml

```

/**

* Markdown转Html

* @param markdown

* @return

*/

public static String markdownToHtml(String markdown) {

MutableDataSet options = new MutableDataSet();

Parser parser = Parser.builder(options).build();

HtmlRenderer renderer = HtmlRenderer.builder(options).build();

Node document = parser.parse(markdown);

String html = renderer.render(document);

return html;

}

```

### HtmlToMarkdown

```

/**

* Html 转 Markdown

* @param html

* @return

*/

public static String htmlToMarkdown(String html) {

MutableDataSet options = new MutableDataSet();

String markdown = FlexmarkHtmlConverter.builder(options).build().convert(html);

System.out.println(markdown);

return markdown;

}

```

一键复制

编辑

Web IDE

原始数据

按行查看

历史

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367292.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WePY:在质疑中前进 | 文末福利

WePY 作者介绍 Q: 先介绍一下自己吧~ Gcaufy: 我 2011 年大学毕业之后,阴错阳差的走上了 Web 开发的道路。15 年之前算是自由职业 SOHO 工作,主要给一些国外的大公司做外包系统,更多的是做后端开发。15 年之后以前端工程师的身份加入腾讯&a…

表单必填标星_怎么用JS做form表单验证,要详细代码,求救!(带星号的是必填项)...

匿名用户1级2014-06-17 回答举个例子吧&#xff1a;<input type”text” id”telephone” ><input type“button” οnclick“functioncheck1”value“检测”>如果要检测它是否符合标准&#xff0c;那我就会在页面中导入js包然后写一个<script> f…

MySQL/MariaDB表表达式(3):视图

视图是表表达式的一种&#xff0c;所以它也是虚拟表。对视图操作的时候会通过语句动态的从表中临时获取数据。 1.创建、修改视图 CREATE [OR REPLACE][ALGORITHM {UNDEFINED | MERGE | TEMPTABLE}]VIEW [IF NOT EXISTS] view_name [(column_list)]AS select_statement[WITH [C…

使用Arquillian(包括JPA,EJB,Bean验证和CDI)测试Java EE 6

很长时间以来&#xff0c;我听到很多人对Arquillian说好话 。 虽然我一直在阅读有关其用法的文章&#xff0c;但实际上我无法在一篇文章中找到涵盖我认为重要的某些方面的文章。 当然&#xff0c;我看起来还不够努力。 我要讲的要点是&#xff1a; 使用JPA。 我只是在这里使用…

xpath和css selector

参考&#xff1a;https://www.cnblogs.com/captainmeng/p/7852044.html css selector解释&#xff1a;https://www.cnblogs.com/feng0815/p/8367672.html 转载于:https://www.cnblogs.com/Mezhou/p/9671284.html

android任务书技术要求,毕业设计任务书-Android应用程序开发

* *大学信息工程学院毕业设计(论文)任务书指导教师&#xff1a;*** 职称&#xff1a;讲师学生人数&#xff1a; 3学生姓名(学号、专业)&#xff1a;刘**(200927030111 09信息管理)***(200927030120 09信息管理)李**(200927030107 09信息管理)毕业设计(论文)题目(来源、类型)And…

Event Loop 其实也就这点事

前段时间在网上陆续看了很多关于 Event loop 的文章&#xff0c;看完也就混个眼熟&#xff0c;可能内心深处对这种偏原理的知识有一些抵触心情&#xff0c;看完后也都没有去深入理解。最近在看 Vue 的源码&#xff0c;在读到关于 nextTick 的实现时&#xff0c;总有一种似曾相识…

mock模拟接口测试 vue_在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟...

在 https://www.jb51.net/article/151520.htm这篇文章中&#xff0c;我们介绍了在 Angular-CLI 中引入 simple-mock 的方法。本文以 Vue-CLI 为例介绍引入 simple-mock 实现前端开发数据模拟的步骤。本质上这里介绍的是在 webpack-dev-server 中配置 simple-mock 实现 API Mock…

Kudu系列: Kudu主键选择策略

每个Kudu 表必须设置Pimary Key(unique), 另外Kudu表不能设置secondary index, 经过实际性能测试, 本文给出了选择Kudu主键的几个策略, 测试结果纠正了我之前的习惯认知. 简单介绍测试场景: 表中有一个unqiue字段Id, 另外还有一个日期维度字段histdate, 有三种设置kudu PK的方法…

OSS网页上传和断点续传(OSS配置篇)

OSS网页上传和断点续传主要根据BrowserJS-SDK和相关文档整理而得&#xff0c;快速构建OSS上传应用 一、Bucket设置 浏览器中直接访问OSS需要开通Bucket的CORS设置 将allowed origins设置成 *将allowed methods设置成 PUT, GET, POST, DELETE, HEAD将allowed headers设置成 *将e…

html vbs 输入框,HTML_vbs实现的下拉框对应键入值,vbs实现的下拉框对应键入值 - phpStudy...

vbs实现的下拉框对应键入值vbs实现的下拉框对应键入值 选择自 gu1dai 的 Blog关键字 vbs实现的下拉框对应键入值select centerbody{text-align:left;font:12px #000080 ;}#main{float:left;width:750px;border:#dddddd 1px solid;margin:5px 10px;padding:10px 5px;}#maintable…

为您的下一个基于Spring的应用程序考虑使用spring-boot的原因!

Spring-boot提供了一种创建基于Spring的应用程序的快速方法。 对于下一个项目&#xff0c;有一些非常令人信服的理由考虑使用Spring-boot&#xff1a; 原因1&#xff1a;使用spring-boot启动程序项目进行更简单的依赖性管理。 考虑使用Spring引导提供数据访问抽象的h2数据库实…

小程序各种姿势实现登录

喜闻乐见的背景时间--由于最近接触小程序比较多&#xff0c;又刚好经历过小程序的自动登录时代以及现在的点击登录时代。结合自己的实践以及观察到其他小程序的做法&#xff0c;就有了这篇小分享~ 本文可能涉及的内容-- 更新 首先感谢shaonialife同学的精彩评论~ 可能由于用词…

c#如何使用反射去创建一个委托_C# 反射的委托创建器

.Net 的反射是个很好很强大的东西&#xff0c;不过它的效率却实在是不给力。已经有很多人针对这个问题讨论过了&#xff0c;包括各种各样的 DynamicMethod 和各种各样的效率测试&#xff0c;不过总的来说解决方案就是利用 Expression Tree、Delegate.CreateDelegate 或者 Emit …

BBS-登录

from django.db import models# Create your models here. from django.contrib.auth.models import AbstractUser#用户 class UserInfo(AbstractUser):nidmodels.AutoField(primary_keyTrue)telephonemodels.CharField(max_length32)avatarmodels.FileField(upload_toavatar/,…

html 输入框从左上角,在输入框的左上角,使文本开始_input_开发99编程知识库

網頁上有幾個輸入框&#xff0c;我希望文本從左上角開始。 目前&#xff0c;使用 below&#xff0c;它的左對齊&#xff0c;但在框的中間。 我嘗試了垂直對齊和其他的東西&#xff0c;但沒有。 我不想使用 padding&#xff0c;因為文本需要包圍&#xff0c;它只能使它彈出框頂部…

PHP定时任务Crontab结合CLI模式详解

从版本 4.3.0 开始&#xff0c;PHP 提供了一种新类型的 CLI SAPI&#xff08;Server Application Programming Interface&#xff0c;服务端应用编程端口&#xff09;支持&#xff0c;名为 CLI&#xff0c;意为 Command Line Interface&#xff0c;即命令行接口。 STDIN 标准输…

使用Mockito和BeanPostProcessors在Spring注入测试双打

我非常确定&#xff0c;如果您曾经使用过Spring并且熟悉单元测试&#xff0c;那么您会遇到与您不想修改的Spring应用程序上下文中注入模拟/间谍&#xff08;测试双打&#xff09;有关的问题。 本文介绍了一种使用Spring组件解决此问题的方法。 项目结构 让我们从项目结构开始&…

当面试官问你如何进行性能优化时,你该这么回答(一)

背景 在开发好页面后&#xff0c;如何让页面更快更好的运行&#xff0c;是区分一个程序猿技术水平和视野的一个重要指标。所以面试时&#xff0c;面试官总会问你一个问题&#xff0c;如何进行性能优化呢&#xff1f; 如果你这时是头脑一片空白&#xff0c;或是像之前的我一样…

二叉搜索时与双向链表python_JZ26-二叉搜索树与双向链表

1、中序遍历&#xff0c;当前结点&#xff0c;以及左侧排好序的双向链表&#xff0c;再调整当前结点的指针指向最前结点/* struct TreeNode {int val;struct TreeNode *left;struct TreeNode *right;TreeNode(int x) :val(x), left(NULL), right(NULL) {} };*/ class Solution …