react-mathjax VS react-markdown

I'm using React Markdown with remark-gfm, remark-math, react-mathjax, and MDX.

We're using the react-markdown plugin to render markdown-to-html. We expose props with the addPropertyControls method from Framer. You can style the different generated HTML tags with a renderers function.

You should install it first

I'm using Next.js(version 13 with the experimental app dir), and for rendering markdown on React I'm going to use react-markdown.

I've been trying to put together a blog for myself and a point comes when one needs to start thinking about strategies to store the blogs somewhere. One common strategy you find in a lot of tutorials is using some third-party library that parses markdown to the desired semantic, for eg. react-markdown . Now, speaking of the goods of such a library, it (hopefully) tackles the security concerns that come with letting external HTML render on a site. This is the security concern that leads to dangerous function names such as dangerouslySetInnerHTML, quoting the react docs , just " to remind yourself that it’s dangerous " . On a serious note, XSS attacks can be a major pain in the posterior. Apart from that, such libraries also eliminate the need to implement your own markdown parser.

21. react-markdown

Using React Markdown, we’re going to create Custom React Components (in a Next.js application) using parsed markdown retrieved from a headless CMS. By doing so, we will be able to quite easily utilize cutting-edge features like Next Image in the body of our Markdown. This way, we can take dynamic content and shape it the way we want, improving performance, accessibility, and overall user experience.

The Article page contains the actual article. I used react-markdown npm package to render markdown. It's an amazing tool, supports remark plugins, and safely converts markdown to HTML. You can also write GitHub-flavoured markdown. I will soon add embeds support. This page contains breadcrumb, last-updated date, read-time, featured image, published date, author photo, and name, audio article, article content, discussion/comment section and two suggested articles.

In order to display your instructions, you’ll need an extra library because Strapi’s rich text field uses Markdown. The easiest way to render Markdown is by installing the react-markdown library:

Otherwise there's this for markdown in react: https://www.npmjs.com/package/react-markdown

hardhat - Ethereum development environment web3modal - An easy-to-use library that allows users to connect their wallets to your app react-markdown and simplemde - Markdown editor and markdown renderer for the CMS @emotion/css - A great CSS in JS library @openzeppelin/contracts - Open source implementations of useful smart contract standards and functionality