常我们都会在GitHub上浏览很多的readme文件，这些都是Markdown语法写成的Markdown文件，HTML中并没有用于展示Markdown文件的元素，那么为什么可以在前端展示呢？

有别于GitHub官方给提供的API(有访问频率限制)，我使用了一个npm 模块。这个模块可以非常方便的将Markdown语法的字符串直接转化为HTML 代码字符串。然后我们让某个div

元素的innerHTML属性为这个字符串即可显示。

这个npm模块叫做showdown，它的源码可以在GitHub找到：源码，GitHub可以一并找到使用教程。

这里把使用方法简单介绍一下：

1.安装

npm install showdown

2.引入

ES6 import：

import showdown from ‘showdown’;

3.初始化转换器：

let converter = new showdown.Converter();

4.将markdown语法的字符串转换为HTML字符串：

//html变量是HTML代码字符串

//text是Markdown语法的字符串

let html = converter.makeHtml(text);

5.在前端页面显示：

document.getElementById('id').innerHTML = html;

如果对显示样式不满意，可以通过CSS自定义，非常方便。

另外，如果获取后端的.md文件作为字符串呢？

答案是直接通过ajax的get

原文地址：https://blog.csdn.net/weixin_30884743/article/details/118292851?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168905672416800213067636%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168905672416800213067636&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-26-118292851-null-null.142^v88^control_2,239^v2^insert_chatgpt&utm_term=markdown