Markdown解析

VIP文章叨槿

已于 2022-08-31 16:56:29 修改

阅读量1k

点赞数 1

分类专栏： javascript react 文章标签： javascript 前端开发语言

于 2022-08-16 17:33:54 首次发布

本文链接：https://blog.csdn.net/jyj15002967882/article/details/126370769

版权

对markdown内容进行解析展示，包括将markdown数据转换成html文本、数据消毒、转换成reactDom内容渲染等。

将markdown内容转换成html文本

此阶段将markdown格式的字符串文本转化成通用的html字符串

import MarkdownIt from 'markdown-it';

const html_content = new MarkdownIt({
   
  html: true,
   xhtmlOut: true,
   breaks: true,
   langPrefix: 'language-',
   linkify: true,
   typographer: true,
 }).render(text);

对转换后的html文本进行消毒处理

此阶段对html字符串中的不需要的内容进行消毒处理，比如Link标签、不确定安全性的第三方外链活着一些可能造成数据安全的脚本等

import sanitizeHtml from 'sanitize-html';

const sanitizeHtmlOptiosn = {
   
  allowedTags: [
    "address", "article", "aside", "footer", "header", "h1", "h2", "h3", "h4",
    "h5", "h6", "hgroup", "main", "nav", "section", "blockquote", "dd", "div",
    "dl", "dt", "figcaption", "figure", "hr", "li", "main", "ol", "p", "pre",
    "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn",
    "em", "i", "kbd", "mark", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp",
    "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "caption",
    "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "font", "img"
  ],
  disallowedTagsMode: 'discard',
  allowedAttributes: {
   
    font: [ 'color' ]