Adding code snippets to static markdown in Next.js using react-syntax-highlighter

• react-markdown

  12 12,129 7.2 JavaScript

  Markdown component for React

  

  In order to allow for code highlighting, we want to be using the React Markdown package to render our markdown. The reason for this is that we can set the renderers property to use our custom code highlighting component.

• react-syntax-highlighter

  1 3,829 1.5 JavaScript

  syntax highlighting component for react with prismjs or highlightjs ast using inline styles

  

  The above code will render our code snippet where the {value} tag is. And we are setting a few properties to our Syntax Highlighter such as style & showLineNumbers. For a full list of properties, check out the GitHub Readme for react-syntax-highlighter.

• 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.

  

Suggest a related project