reactjs - Markdown trong Antd

Tôi có thể xác nhận rằng điều này vừa không được hỏi và cũng chưa được giải quyết ở bất kỳ đâu. Hiện tại tôi đang làm việc trên một trang web sử dụng Gatsby, Strapi và Antd cho thiết kế. Tôi đang sử dụng trình soạn thảo rich text cho một trong các loại nội dung nơi tôi đã đặt toàn bộ nội dung markdown của mình. Tuy nhiên, khi tôi cố gắng hiển thị nội dung thực tế trên trang web, kiểu dáng hoàn toàn bị phá hủy. Tôi đoán rằng điều này là do nội dung sử dụng các phần tử HTML thông thường như <h1> và <p> thay vì các thành phần antd như <Title> hoặc <Text>.

Vì vậy tôi đã tìm hiểu một số và phát hiện rằng Antd có một file markdown.less trong nguồn của họ, mà tôi đoán được sử dụng để tạo kiểu cho markdown trong tài liệu của họ. Tôi chưa tìm thấy cái tương tự sau khi lùng sục mã nguồn bên trong thư mục node modules. Điều này có nghĩa là Antd không hỗ trợ tạo kiểu cho markdown hay tôi đang bỏ lỡ điều gì đó ở đây?

Nhân tiện, tôi đang sử dụng thư viện react-markdown để hiển thị tất cả các markdown. Tôi cũng đã đăng tất cả mã liên quan ở bên dưới.

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

trang-thành-phan.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

Vấn đề có thể được chỉ ra ở đây, tôi đoán vậy. Thẻ <ReactMarkdown> nhận nội dung markdown thông qua props children. Nhưng một khi nội dung được hiển thị trên trang, kiểu dáng, như tôi đã đề cập ở trên, bị phá hủy.

Câu trả lời #1

Chậm hơn khoảng một tháng, nhưng tôi vừa tình cờ gặp việc này: Tôi cần một cách để thay đổi kiểu dáng của HTML do thành phần React react-markdown tạo ra. Tôi đang sử dụng react-markdown trong một ứng dụng NextJS, và sử dụng Antd làm thư viện thành phần của mình. Tôi cũng đang sử dụng react-syntax-highlighter và react-syntax-highlighter-prismjs để xử lý việc tô sáng các khối mã.

Mặc dù Antd không hỗ trợ markdown, nhưng lại có hỗ trợ các thành phần tùy chỉnh trong react-markdown! react-markdown cho phép bạn ghi đè công cụ render và thay thế các thành phần riêng lẻ bằng của riêng bạn, vì vậy tôi đã xem xét và thay thế một số thành phần bằng các thành phần của Antd:

Cảnh báo công bằng: Đây là lần thử đầu tiên của tôi để đảm bảo điều này hoạt động, ví dụ nó không xử lý các hộp kiểm bên trong các mục danh sách.

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>
    }
};

Sau đó bên trong hàm hiển thị của thành phần của bạn:

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

Câu trả lời #2

Tôi đã nêu vấn đề này trên GitHub tại đây. Theo các nhà phát triển, hiện tại không có hỗ trợ markdown cho antd. Như tôi nghĩ, tập tin markdown.less được liên kết ở trên chỉ dành cho markdown trong tài liệu của họ. Một cách để giải quyết vấn đề này là bao gồm các thẻ đúng như được chỉ định bởi các phần tử thành phần của antd. Ví dụ, thay vì dùng # hoặc <h1> cho tiêu đề, chúng ta có thể dùng <h1 class="antd typography">, mặc dù điều này chắc chắn là khó chịu và dễ mắc lỗi. Giải pháp khác là sử dụng MDX, hỗ trợ JSX bên trong markdown.