# 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

原始數據

按行查看

歷史

總結

以上是生活随笔為你收集整理的blue html中转换,Vue/Vue中Html和Markdown互相转换/README.md · bluemoon/LearningNotes - Gitee.com...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。