Vue中Html和Markdown互相转换

349 字

2 分钟

Vue中Html和Markdown互相转换

2025-04-30

Vue

前言#

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

前台处理#

MarkdownToHtml#

安装#

前台处理Markdown转换成Html，使用的是一款Vue组件 showdown：点我传送

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

首先我们需要安装依赖

1
npm install showdown --save

或者使用CDN

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

Markdown 转成 Html#

1
var showdown  = require('showdown'),
2
    converter = new showdown.Converter(),
3
    text      = '# hello, markdown!',
4
    html      = converter.makeHtml(text);

HtmlToMarkdown#

安装#

前台处理Html转换成Markdown，使用的是一款Vue组件 turndown：点我传送

首先安装依赖

1
npm install turndown --save

或使用CDN加速

1
<script src="https://unpkg.com/turndown/dist/turndown.js"></script>

使用#

1
// For Node.js
2
var TurndownService = require('turndown')
3
var turndownService = new TurndownService()
4
var markdown = turndownService.turndown('<h1>Hello world!</h1>')

后端处理#

后端处理使用的是 flexmark-java ：点我传送

引入依赖#

1
<!--Markdown 转 Html-->
2
<dependency>
3
    <groupId>com.vladsch.flexmark</groupId>
4
    <artifactId>flexmark-all</artifactId>
5
    <version>${flexmark.version}</version>
6
</dependency>

MarkdownToHtml#

1
    /**
2
     * Markdown转Html
3
     * @param markdown
4
     * @return
5
     */
6
    public static String markdownToHtml(String markdown) {
7
        MutableDataSet options = new MutableDataSet();
8
        Parser parser = Parser.builder(options).build();
9
        HtmlRenderer renderer = HtmlRenderer.builder(options).build();
10
        Node document = parser.parse(markdown);
11
        String html = renderer.render(document);
12
        return html;
13
    }

HtmlToMarkdown#

1
    /**
2
     * Html 转 Markdown
3
     * @param html
4
     * @return
5
     */
6
    public static String htmlToMarkdown(String html) {
7
        MutableDataSet options = new MutableDataSet();
8
        String markdown = FlexmarkHtmlConverter.builder(options).build().convert(html);
9
        System.out.println(markdown);
10
        return markdown;
11
    }