Open JoinChang opened 4 months ago
This feature is not working properly: https://github.com/ipikuka/remark-flexible-containers?tab=readme-ov-file#without-a-type-and-a-title
Browser console:
Markdown file:
::: 手动创建错误成绩,或是通过其他方式导入了错误成绩,均会导致查分器计算出的 Best 50 与玩家 DX Rating 不一致。 :::
Source code:
const Content = ({ markdown }: { markdown: string }) => { const navigate = useNavigate(); return ( <Markdown remarkPlugins={[remarkGfm, remarkFlexibleContainers]} rehypePlugins={[ rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'wrap', properties: { className: classes.sectionHeading, }, }] ]} components={{ ... div({ className, children, ...props }) { const classesName = className ? className.split(" ") : []; if (classesName.includes("remark-container")) { let icon = <IconInfoCircle />; let color = "blue"; if (classesName.includes("warning")) { icon = <IconAlertCircle />; color = "yellow"; } if (classesName.includes("danger")) { icon = <IconAlertCircle />; color = "red"; } const childrenArray = React.Children.toArray(children); const titleChild = childrenArray.find( child => React.isValidElement(child) && child.props.className?.includes('remark-container-title') ) as React.ReactElement; return <Alert className={classes.alert} radius="md" variant="light" color={color} title={titleChild?.props.children} icon={icon}> {childrenArray.filter( (child) => !React.isValidElement(child) || !child.props.className?.includes('remark-container-title') )} </Alert> } return <div className={className} {...props}>{children}</div>; }, ... }} > {markdown} </Markdown> ) }
Expect result:
Thanks for reporting the issue, I will take care it.
This feature is not working properly: https://github.com/ipikuka/remark-flexible-containers?tab=readme-ov-file#without-a-type-and-a-title
Browser console:
Markdown file:
Source code:
Expect result: