前端markdown转换为html

不言

js

发布于：2020年1月13日

次浏览

安装

1

npm install showdown

使用

1
2
3
4
5

const showdown  = require('showdown');
const converter = new showdown.Converter();

const markdown_content = ...;
const html_content = converter.makeHtml(markdown_content);

markdown_content是markdown格式内容，html_content是转换后内容，如需做一些显示配合v-html即可。

在页面显示

1

<div v-html="html_content"></div>

样式

这里只是把markdown转换为了html代码，并不能按照来源地的markdown样式。一般转换后都是p,pre,code,li,h1~h6等元素，为了避免全局污染，可以给v-html的那层div定义个id或者唯一class。

例如: class=markdown_convert_html

然后在写样式的时候

1
2
3
4
5
6
7

.markdown_convert_html p {
  ...
}
.markdown_convert_html pre {
  ...
}
/..以此类推../

更新于：2025年6月17日

html

js

markdown