reactjs - มาร์กดาวน์ใน Antd

ฉันสามารถยืนยันได้ว่าสิ่งนี้ไม่ได้ถูกถามหรือถูกแก้ไขที่ไหนเลย ตอนนี้ฉันกำลังทำงานบนเว็บไซต์โดยใช้ Gatsby, Strapi และ Antd สำหรับการออกแบบ ฉันกำลังใช้ตัวแก้ไขข้อความแบบ rich text สำหรับหนึ่งในประเภทเนื้อหาที่ฉันใส่เนื้อหา markdown ทั้งหมดของฉันลงไป อย่างไรก็ตาม เมื่อฉันพยายามแสดงเนื้อหาจริงบนเว็บเพจ การจัดรูปแบบทั้งหมดถูกทำลาย ฉันสันนิษฐานว่านี่เป็นเพราะเนื้อหาใช้ element ของ HTML ปกติเช่น <h1> และ <p> แทนที่จะใช้ component ของ antd เช่น <Title> หรือ <Text>.

ดังนั้นฉันจึงทำการค้นคว้าบ้างและพบว่า Antd มีไฟล์ markdown.less ในซอร์สของพวกเขา ซึ่งฉันคิดว่าใช้เพื่อจัดสไตล์ markdown ในเอกสารของพวกเขา ฉันยังไม่พบไฟล์เดียวกันหลังจากค้นซอร์สโค้ดภายในโฟลเดอร์ node_modules นี่หมายความว่า Antd ไม่สนับสนุนการจัดสไตล์สำหรับ markdown หรือว่าฉันพลาดอะไรบางอย่างไป?

อ้อ ฉันกำลังใช้ไลบรารี react-markdown เพื่อแสดงผลมาร์กดาวน์ทั้งหมด ฉันยังได้โพสต์โค้ดที่เกี่ยวข้องทั้งหมดด้านล่างด้วย

เทมเพลต.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

หน้า-คอมโพเนนต์.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> รับเนื้อหา markdown ใน props children แต่เมื่อเนื้อหาถูกแสดงบนหน้า การจัดรูปแบบตามที่ฉันกล่าวไว้ข้างต้นจะถูกลบออก

คำตอบ #1

มาช้าประมาณเดือนหนึ่ง แต่ฉันเพิ่งเจอสิ่งนี้: ฉันต้องการวิธีการเปลี่ยนสไตล์ของ HTML ที่สร้างโดยคอมโพเนนต์ React react-markdown ฉันกำลังใช้ react-markdown ในแอป NextJS และใช้ Antd เป็นไลบรารีคอมโพเนนต์ของฉัน นอกจากนี้ฉันยังใช้ react-syntax-highlighter และ react-syntax-highlighter-prismjs สำหรับการจัดการไฮไลต์โค้ดบล็อก

แม้ว่าจะไม่มีการสนับสนุน Markdown ใน Antd แต่ก็มีการสนับสนุนสำหรับคอมโพเนนต์ที่กำหนดเองใน 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} />
}

คำตอบ #2

ฉันได้ยกประเด็นนี้ขึ้นบน GitHub ที่นี่ ตามที่นักพัฒนา กล่าวว่า ตอนนี้ยังไม่มีการสนับสนุน Markdown สำหรับ antd ตามที่ฉันคิด ไฟล์ markdown.less ที่ลิงก์ด้านบนเป็นเพียงสำหรับ Markdown ในเอกสารของพวกเขา วิธีหนึ่งในการแก้ปัญหานี้คือการรวมแท็กตามที่องค์ประกอบของ antd กำหนดไว้อย่างแม่นยำ ตัวอย่างเช่น แทนที่จะใช้ # หรือ <h1> สำหรับหัวเรื่อง เราสามารถใช้ <h1 class="antd typography"> แม้ว่านี่จะทำให้ยุ่งยากและเกิดความผิดพลาดได้ง่าย อีกวิธีหนึ่งคือการใช้ MDX ซึ่งรองรับ JSX ภายใน Markdown