blue html中转换,vue/vue中html和markdown互相转换/readme.md · bluemoon/learningnotes -凯发k8官方网

# 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('

')

```

## 后端处理

后端处理使用的是 `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

原始数据

按行查看

历史

总结

以上是凯发k8官方网为你收集整理的blue html中转换,vue/vue中html和markdown互相转换/readme.md · bluemoon/learningnotes - gitee.com...的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。