Antd 中的 Markdown

Question

我可以确认这个问题在任何地方都没有被问到也没有得到解决。我目前正在使用 Gatsby、Strapi 和 Antd 进行设计的网站。我将富文本编辑器用于其中一种内容类型，我已将所有降价内容放入其中。但是，当我尝试在网页上显示实际内容时，样式完全被破坏了。我认为这是因为内容使用正常的 HTML 元素，如 <h1> 和 <p>，而不是 antd 组件，如 <Title> 或 <Text>.

所以我做了一些研究，发现 Antd 在他们的源代码中有一个 markdown.less，我认为这是用来在他们的文档中设置 markdown 样式的。在节点模块文件夹中搜索源代码后，我还没有找到相同的东西。这是否意味着 Antd 不支持 markdown 的样式，或者我在这里遗漏了什么？

顺便说一句，我正在使用 react-markdown 库来显示所有降价。我还在下面发布了所有相关代码。

template.tsx

const ProductTemplate: React.FC<Props> = ({ data }: Props) => {
  const {
    ...
  } = data

  const {
    product: { strapiId: selectedKeyProp },
  } = data
  return (
    <Layout>
      <AntLayout>
        <ProductSidebar
          selectedKeyProp={selectedKeyProp}
          productsInfo={productsInfo}
        >
          <ProductInfo product={product} />
        </ProductSidebar>
      </AntLayout>
    </Layout>
  )
}

export const query = graphql`
  ...
`

export default ProductTemplate

页面-component.tsx

const ComponentName = ({ data }) => {
  const {
    ...
  } = data

  console.log(data)
  return (
    <Layout>
      <AntLayout>
        <ProductSidebar productsInfo={productsInfo}>
          <div style={{ display: "unset", padding: "15px 35px" }}>
            <ReactMarkdown className="markdown" children={content} />
          </div>
        </ProductSidebar>
      </AntLayout>
    </Layout>
  )
}

export const query = graphql`
  ...
`

export default ComponentName

我想这里可以指出问题。 <ReactMarkdown> 在 children 道具中接收降价内容。但是一旦内容显示到页面上，样式，正如我上面提到的，就被取消了。

Answer 1

我在 github here 上提出了这个问题。根据开发者的说法，目前还没有对 antd 的 markdown 支持。如我所想，上面链接的 markdown.less 文件仅用于其文档中的降价。绕过此解决方案的一种方法是完全按照 antd 组件元素的指定包含标签。例如，我们可以使用 <h1 class="antd typography"> 而不是 # 或 <h1> 来代替 header，尽管这肯定是痛苦的并且容易出错。另一个解决方案是使用 MDX，它支持 markdown 中的 jsx。

Answer 2

大约晚了一个月，但我只是运行进入了这个：我需要一种方法来更改由 react-markdown React 组件生成的 html 的样式。我在 NextJS 应用程序中使用 react-markdown，并使用 Antd 作为我的组件库。我还使用 react-syntax-highlighter 和 react-syntax-highlighter-prismjs 来处理光照代码块

虽然Antd不支持markdown，但是react-markdown支持自定义组件！ react-markdown 允许您覆盖渲染引擎并用您自己的组件替换单个组件，所以我仔细检查并用 Antd 组件替换了其中的一堆：

公平警告：这是我第一次确保它有效，它不处理列表项输入内的复选框。

import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import {coy} from "react-syntax-highlighter/dist/cjs/styles/prism/prism";
import gfm from 'remark-gfm';

import { Typography } from 'antd';
const { Title, Text } = Typography;
import { List } from 'antd';

const mymarkdowndata = '
# A heading
Some text
## A second heading
 * List!
 * Has
 * Many
 * Items!
'
const renderers = {
    heading: function Heading(props) {
        return <Title level={props.level}>{props.children}</Title>;
    },
    list: function MakeList(props) {
        return <List bordered>{props.children}</List>
    },  
    listItem: function MakeListItem(props) {
        return <List.Item>{props.children}</List.Item>
    },
    inlineCode: function makeInlineCode(props) {
        return  <Text code>{props.children}</Text>
    },
    code: function makeCodeBlock(props) {
        return <SyntaxHighlighter language={props.language} style={coy}>{props.value}</SyntaxHighlighter>
    },
    blockquote: function makeBlockQuote(props) {
        return <Text type="secondary">{props.children}</Text>
    }
};

然后在你的组件渲染函数里面：

render() {
    return <ReactMarkdown renderers={renderers} plugins={[gfm]} children={mymarkdowndata} />
}

Antd 中的 Markdown

Markdown in Antd

markdown

typescript

reactjs

strapi

antd