genetic-orange•9mo ago

MarkdownField support

Is the MarkdownField component customizable at all? So far I tested all the components with MDEditor, and it seems only Bold, Italic, Strikethrough, Link , Checklist and Image components work, everything else is just shown as simple text. my MD string:

const MD_STRING = `
test

**bold**

---

*test italic*

~~strikethrough~~

> blockquote

[Link](https://google.com)

\`Code\`

\`\`\`
Code block
\`\`\`

<!-- Comment -->

![Image](https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Eopsaltria_australis_-_Mogo_Campground.jpg/640px-Eopsaltria_australis_-_Mogo_Campground.jpg)


| H1 | Header2 |
|--------|--------|
| 1 | Item 1 |
| 2 | Another item 2 |
| 3 | Third item |

- list
- test
- here

1. Ordered
2. List
3. Here

- [ ] Checklist
- [x] Here
- [ ] Test
`;

const MD_STRING = `
test

**bold**

---

*test italic*

~~strikethrough~~

> blockquote

[Link](https://google.com)

\`Code\`

\`\`\`
Code block
\`\`\`

<!-- Comment -->

![Image](https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Eopsaltria_australis_-_Mogo_Campground.jpg/640px-Eopsaltria_australis_-_Mogo_Campground.jpg)


| H1 | Header2 |
|--------|--------|
| 1 | Item 1 |
| 2 | Another item 2 |
| 3 | Third item |

- list
- test
- here

1. Ordered
2. List
3. Here

- [ ] Checklist
- [x] Here
- [ ] Test
`;

vs how it looks in the page:

3 Replies

kapa.ai•9mo ago

Hi @biohazard1521. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The MarkdownField component in refine is designed to display markdown content. It supports GitHub Flavored Markdown (https://github.github.com/gfm/), which includes syntax for things like bold, italic, strikethrough, links, and images. However, the component's customization options are not explicitly mentioned in the provided extracts. The extracts do mention that you can "swizzle" the component with the refine CLI (https://refine.dev/docs/packages/documentation/cli/) to customize it. Swizzling is a process that allows you to override the default behavior of a component. However, the specifics of how to swizzle the MarkdownField component and what customizations are possible are not detailed in the extracts. If you're finding that certain markdown features are not rendering as expected, it could be due to limitations in the markdown parser used by the MarkdownField component. For example, some markdown parsers do not support features like tables, checklists, or blockquotes. If you need more control over the markdown rendering, you might consider using a custom input component with a more feature-rich markdown editor. The Ant Design's <Form> documentation (https://ant.design/components/form/) provides some guidance on how to use custom form items, which could potentially be used to integrate a different markdown editor. For more detailed information, you may want to refer to the official documentation or reach out to the refine community. Sources: - Antd MarkdownField (https://refine.dev/docs/api-reference/antd/components/fields/markdown/) - Mui MarkdownField (https://refine.dev/docs/api-reference/mui/components/fields/markdown/) - Mantine MarkdownField (https://refine.dev/docs/api-reference/mantine/components/fields/markdown/) - Chakra-ui MarkdownField (https://refine.dev/docs/api-reference/chakra-ui/components/fields/markdown/) - Custom Inputs (https://refine.dev/docs/api-reference/antd/components/inputs/custom-inputs/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

<@680514070167683118> kapa.ai is still learning and improving, please let us know how it did by reacting below

genetic-orange•9mo ago

tried swizzling the field component, changed around the plugins, nothing changed. Seems like even tables do work to some extent, but feels like it's missing styles or something in the end I settled to use @uiw/react-markdown-preview to render Markdown