通过react-markdown渲染的markdown文本为什么有些没有实现应该有的效果？

Question

我想通过react-markdown渲染markdown文本到页面上，发现渲染出来的标签没有问题，但是有些标签并没有效果。比如h1,h2,h3标签并没有加粗变大的效果，比如markdown的这个标签‘ >> ’并没有多层嵌套。

import React from 'react';
import ReactMarkdown from 'react-markdown/with-html';
// import marked from 'marked';
// import hljs from 'highlight.js';

class Test extends React.Component{
  // componentDidUpdate(){
    // console.log('==========================id:',this.props.match.params.docId);
    // console.log('==========================id:',this.props.match.params.dirId);
  // }

  render(){
    const markdown = '## 只求极致222\n' +
      '[ **M** ] arkdown + E [ **ditor** ] = **Mditor**  \n' +
      '> Mditor 是一个简洁、易于集成、方便扩展、期望舒服的编写 markdown 的编辑器，仅此而已... \n' +
       '**这是加粗的文字**\n' +
      '*这是倾斜的文字*`\n' +
      '***这是斜体加粗的文字***\n' +
      '~~这是加删除线的文字~~ \n'+
      '> aaaaaaaaa\n' +
      '>> bbbbbbbbb\n' +
      '>>> cccccccccc\n'+
      '***\n' +
      '*****';

    return (
      <div>
        <ReactMarkdown source={markdown} />
      </div>
    );
  }
}

export default Test;

效果：

Answer 1

你代码里面是不是有重置样式的css
react-markdown 只是markdown转html并没有处理css样式

Answer 2

markdown中，H1 这些是有 # 表示的, 并不是箭头。

Answer 3

我试了下,可以正常渲染出嵌套的样子

你用审查下元素看看你的生成的文档结构,以及blockquote的 css 样式,是不是有别的样式在起作用

Answer 4

你可能是引了antd之类的玩意儿给覆盖了。我碰到过这个问题。antd中的reset把blockquote的margin设置为 0 0 1em，所以样式不对

Answer 5

同样遇到了这个问题 楼主解决了吗