# Vue中Html和Markdown互相轉(zhuǎn)換

## 前言

最近想實現(xiàn)的一個功能，就是將系統(tǒng)中的博客進(jìn)行導(dǎo)出成Markdown格式，后面經(jīng)過了調(diào)研發(fā)現(xiàn)有兩種方法能夠滿足需求，一個是Java后臺中將HTML轉(zhuǎn)換成Markdown， 然后導(dǎo)出。第二種方式是在客戶端將Html轉(zhuǎn)換成Markdown

## 前臺處理

### MarkdownToHtml

#### 安裝

前臺處理Markdown轉(zhuǎn)換成Html，使用的是一款Vue組件 `showdown`：[點(diǎn)我傳送](https://github.com/showdownjs/showdown)

前端處理的好處是不需要占用后端的計算資源，因此首選是讓客戶端做這種處理的事情

首先我們需要安裝依賴

```

npm install showdown --save

```

或者使用CDN

```

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

```

#### Markdown 轉(zhuǎn)成 Html

```

var showdown = require('showdown'),

converter = new showdown.Converter(),

text = '# hello, markdown!',

html = converter.makeHtml(text);

```

### HtmlToMarkdown

#### 安裝

前臺處理Html轉(zhuǎn)換成Markdown，使用的是一款Vue組件 `turndown`：[點(diǎn)我傳送](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` ：[點(diǎn)我傳送](https://github.com/vsch/flexmark-java)

### 引入依賴

```

com.vladsch.flexmark

flexmark-all

${flexmark.version}

```

### MarkdownToHtml

```

/**

* Markdown轉(zhuǎn)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 轉(zhuǎn) 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;

}

```

一鍵復(fù)制

編輯

Web IDE

原始數(shù)據(jù)

按行查看

歷史

總結(jié)

以上是生活随笔為你收集整理的vue中将md转成html,Vue/Vue中Html和Markdown互相转换/README.md · 倚栏听风/LearningNotes - Gitee.com...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。