前言：Markdown的用途很广泛，是一种纯文本格式的标记语言，这些标记和html的一些标签对应，通过一些转换库可以把markdown语法转换成html标签，反之亦然，从而使普通文本内容具有一定的格式。

Markdown作用:最大的作用是用来在网页上展示文章，省去排版布局的烦恼。

下面我以两步快速实现Markdown！

第一步：

将您需要渲染的字符串利用dangerouslySetInnerHTML转换为Html格式

注意：不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击

 function showhtml(htmlString: any) {
        var html = { __html: htmlString };
        return <div dangerouslySetInnerHTML={html}></div>;
    }
    
<div className="markdown">
  {"showhtml("输入您要渲染的内容")"}
</div>

第二步：

在当前模块的css中引入样式就可以了

.markdown {
    word-break: break-word;
    line-height: 1.75;
    font-weight: 400;
    font-size: 15px;
    overflow-x: hidden;
    letter-spacing: 1.2px;
    margin-top: 50px;
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
    line-height: 1.5;
    margin-top: 35px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    color: inherit;
}

.markdown h1 {
    font-size: 30px;
    margin-bottom: 5px;
}

.markdown h2 {
    padding-bottom: 12px;
    font-size: 24px;
    border-bottom: 1px solid #ececec;
}

.markdown h3 {
    font-size: 18px;
    padding-bottom: 0;
}

.markdown h4 {
    font-size: 16px;
}

.markdown h5 {
    font-size: 15px;
}

.markdown h6 {
    margin-top: 5px;
}

.markdown p {
    line-height: inherit;
    margin-top: 22px;
    margin-bottom: 22px;
}

.markdown img {
    max-width: 100%;
}

.markdown hr {
    border: none;
    border-top: 1px solid #ddd;
    margin-top: 32px;
    margin-bottom: 32px;
}

.markdown a {
    text-decoration: none;
    color: #0269c8;
    border-bottom: 1px solid #d1e9ff;
}

.markdown a:active,
.markdown a:hover {
    color: #275b8c;
}

.markdown blockquote {
    background-color: #f8f8f8;
}

.markdown blockquote:after {
    display: block;
    content: "";
}

.markdown blockquote > p {
    margin: 10px 0;
}

.markdown ul {
    list-style-type: disc;
}

.markdown ul ul {
    list-style-type: square;
}

.markdown ol,
.markdown ul {
    padding-left: 28px;
}

.markdown ol li,
.markdown ul li {
    margin-bottom: 0;
    list-style: inherit;
}

.markdown ol ol,
.markdown ol ul,
.markdown ul ol,
.markdown ul ul {
    margin-top: 3px;
}

.markdown ol li {
    padding-left: 6px;
}

.markdown .task-list-item {
    list-style: none;
    min-height: 22px;
    padding-left: 24px;
    border: 0;
    margin-left: -24px;
}

.markdown .task-list-item > input:before {
    content: "";
    /* position: relative; */
    top: 0;
    left: 0;
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    background-color: #fff;
    transition: all 0.3s;
    border-collapse: separate;
}

.markdown .task-list-item > input:checked:before {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.markdown .task-list-item > input:after {
    content: " ";
    position: absolute;
    left: 6.571429px;
    top: 6.142857px;
    display: table;
    width: 5.71428571px;
    height: 9.14285714px;
    border: 2px solid #fff;
    border-top: 0;
    border-left: 0;
    transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
    transform: rotate(45deg) scale(0);
    opacity: 0;
}

.markdown .task-list-item > input:checked:after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.markdown code,
.markdown pre {
    font-family: Menlo, Monaco, Consolas, Courier New, monospace;
}

.markdown code {
    display: inline;
    padding: 2px 4px;
    border-radius: 4px;
    margin: 0 2px;
    color: var(--main-text-color);
    background-color: rgba(27, 31, 35, 0.05);
    font-size: 14px;
    word-wrap: break-word;
    word-break: break-all;
}

.markdown pre {
    position: relative;
    max-height: 400px;
    padding-top: 30px;
    border-radius: 5px;
    margin: 10px 0;
    background-color: var(--bg-code);
    font-size: 1em;
}

.markdown pre:before {
    position: absolute;
    top: 0;
    width: 100%;
    height: 30px;
    background-image: url(https://wipi.oss-cn-shanghai.aliyuncs.com/2020-07-12/97e4eed2-a992-4976-acf0-ccb6fb34d308.png);
    background-position: 10px 10px;
    background-size: 40px;
    background-repeat: no-repeat;
    content: "";
}

.markdown pre:before,
.markdown pre code {
    display: block;
    background-color: var(--bg-code);
}

.markdown pre code {
    max-height: 370px;
    padding: 9px 10px 12px;
    border-radius: 0;
    color: var(--main-text-color);
    overflow: auto;
    overscroll-behavior: contain;
    font-size: 12px;
    margin: 0;
    white-space: pre-wrap;
}

pre {
    overflow: hidden;
}

.markdown blockquote {
    padding: 1px 23px;
    border-left: 4px solid #cbcbcb;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--disable-text-color);
    margin: 22px 0;
    color: #666;
    background-color: var(--bg-second);
}

.markdown strong {
    font-weight: 700;
}

.markdown strong:before {
    content: "\300C";
}

.markdown strong:after {
    content: "\300D";
}

.markdown p em {
    font-weight: 400;
}

.markdown em {
    font-style: normal;
}

.markdown em,
.markdown em strong {
    color: var(--main-text-color);
}

.markdown img {
    display: block;
    width: 100%;
    border-radius: var(--border-radius);
    margin: 20px auto;
    object-fit: contain;
}

.markdown table {
    display: inline-block;
    font-size: 13px;
    width: auto;
    max-width: 100%;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-collapse: collapse;
}

.markdown table thead,
.markdown table tr:nth-child(2n) {
    background-color: var(--bg-code);
}

.markdown table td,
.markdown table th {
    padding: 4px 8px;
    line-height: 24px;
}

.markdown code.language-ts:before {
    content: "ts";
}

.markdown code.language-js:before,
.markdown code.language-ts:before {
    position: absolute;
    top: 8px;
    right: 45px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    color: hsla(0, 0%, 54.9%, 0.8);
    transition: color 0.1s;
}

.markdown code.language-js:before {
    content: "js";
}

.markdown code.language-typescript:before {
    content: "typescript";
}

.markdown code.language-javascript:before,
.markdown code.language-typescript:before {
    position: absolute;
    top: 8px;
    right: 45px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    color: hsla(0, 0%, 54.9%, 0.8);
    transition: color 0.1s;
}

.markdown code.language-javascript:before {
    content: "javascript";
}

.markdown code.language-html:before {
    content: "html";
}

.markdown code.language-css:before,
.markdown code.language-html:before {
    position: absolute;
    top: 8px;
    right: 45px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    color: hsla(0, 0%, 54.9%, 0.8);
    transition: color 0.1s;
}

.markdown code.language-css:before {
    content: "css";
}

.markdown code.language-php:before {
    content: "php";
}

.markdown code.language-go:before,
.markdown code.language-php:before {
    position: absolute;
    top: 8px;
    right: 45px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    color: hsla(0, 0%, 54.9%, 0.8);
    transition: color 0.1s;
}

.markdown code.language-go:before {
    content: "go";
}

.markdown code.language-sql:before {
    content: "sql";
}

.markdown code.language-json:before,
.markdown code.language-sql:before {
    position: absolute;
    top: 8px;
    right: 45px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    color: hsla(0, 0%, 54.9%, 0.8);
    transition: color 0.1s;
}

.markdown code.language-json:before {
    content: "json";
}

.markdown code.language-bash:before {
    content: "bash";
}

.markdown code.language-bash:before,
.markdown code.language-less:before {
    position: absolute;
    top: 8px;
    right: 45px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    color: hsla(0, 0%, 54.9%, 0.8);
    transition: color 0.1s;
}

.markdown code.language-less:before {
    content: "less";
}

.markdown code.language-scss:before {
    content: "scss";
}

.markdown code.language-nginx:before,
.markdown code.language-scss:before {
    position: absolute;
    top: 8px;
    right: 45px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    color: hsla(0, 0%, 54.9%, 0.8);
    transition: color 0.1s;
}

.markdown code.language-nginx:before {
    content: "nginx";
}

.markdown code.language-shell:before {
    content: "shell";
}

.markdown code.language-shell:before,
.markdown code.language-stylus:before {
    position: absolute;
    top: 8px;
    right: 45px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    color: hsla(0, 0%, 54.9%, 0.8);
    transition: color 0.1s;
}

.markdown code.language-stylus:before {
    content: "stylus";
}

.markdown code.language-python:before {
    content: "python";
}

.markdown code.language-python:before,
.markdown code.language-yaml:before {
    position: absolute;
    top: 8px;
    right: 45px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    color: hsla(0, 0%, 54.9%, 0.8);
    transition: color 0.1s;
}

.markdown code.language-yaml:before {
    content: "yaml";
}

.markdown code.language-yml:before {
    content: "yml";
}

.markdown code.language-lua:before,
.markdown code.language-yml:before {
    position: absolute;
    top: 8px;
    right: 45px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    color: hsla(0, 0%, 54.9%, 0.8);
    transition: color 0.1s;
}

.markdown code.language-lua:before {
    content: "lua";
}