网页渲染markdown（markdown-it）_new markdownit()

网页渲染markdown（markdown-it）

markdown-it基础使用

1. 安装markdown-it

npm install markdown-it --save
1

2、初始化markdown-it

import MarkdownIt  from "markdown-it"
1

3、渲染markdown文件

const markdownStr = 'xxxx'; // 需要渲染的markdown字符串
const md = new MarkdownIt();
const result = md.render(markdownStr);
return <div className="App" dangerouslySetInnerHTML={{__html: result}}></div>
1
2
3
4

markdown-it样式

由于markdown-it只是将markdown文件转化为html文件，所以还需要为其添加所需要的样式

1、添加基础样式

• 由于最总的渲染内容其实还是html，所以可以利用css自定义自己的样式
• 利用一些好看的已有样式，例如https://theme.typoraio.cn/上就有很多好看的markdown样式，可以将其加入到自己的项目中

2、代码高亮

• 代码高亮可以使用highlight.js

import hljs from "highlight.js";
  const md = new MarkdownIt({
    highlight: function (str, lang) {
      if (lang && hljs.getLanguage(lang)) {
        try {
          return hljs.highlight(lang, str).value;
        } catch (__) {}
      }

      return '';
    }
  });
  const result = md.render(str);
1
2
3
4
5
6
7
8
9
10
11
12
13

• 添加代码高亮的样式

  在node_modules/highlight.js/styles目录下存在很多的高亮样式，挑选适合自己的样式，将其加入到自己的样式文件中