How to Safely Render Markdown From a React Component

• react-markdown

  48 12,167 7.2 JavaScript

  Markdown component for React

  

  React-markdown is a library that provides the React component to render the Markdown markup. Built on remark, a markdown preprocessor.

• remark

  42 7,172 6.9 JavaScript

  markdown processor powered by plugins part of the @unifiedjs collective (by remarkjs)

  

  React markdown vs remark react-markdown is a library that provides the React component to render the Markdown markup while remark is a markdown preprocessor built on micromark. It inspects, parses and transforms markdowns.

• SurveyJS

  surveyjs.io

  sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• micromark

  2 1,654 8.6 JavaScript

  small, safe, and great commonmark (optionally gfm) compliant markdown parser

  

  React markdown vs remark react-markdown is a library that provides the React component to render the Markdown markup while remark is a markdown preprocessor built on micromark. It inspects, parses and transforms markdowns.

• typography

  1 2,154 6.8 JavaScript

  Discontinued [Moved to: https://github.com/tailwindlabs/tailwindcss-typography] (by tailwindcss)

  

  Note that the blogpost body we want to render with react-markdown is passed to the children prop and the other plugins added. The className prose is from tailwind, we get it from the tailwindcss/typography plugin we installed and added to our tailwind config to provide support for markdown styles.

• remark-gfm

  4 606 6.5 JavaScript

  remark plugin to support GFM (autolink literals, footnotes, strikethrough, tables, tasklists)

  

  gfm is a remark plugin that adds support for strikethrough, table, tasklist and URLs

• Font-Awesome

  211 72,973 4.9 JavaScript

  The iconic SVG, font, and CSS toolkit

  

  We will add a fontawesome CDN link so we can use fontawesome icons for delete and edit as we have in lines 12 and 13 of the bove code block.

Suggest a related project