jianghoy/example-nextjs-markdown-editor

Use CodeMirror to create Editor. Use react-markdown to render Markdown to React.

TypeScript

Markdown Editor Web Application

A markdown editor built with Next.js.

App in development environment

App in production environment

Tech Stack

Next.js : A widely-used framework for building React applications
TypeScript: A typed JavaScript
CodeMirror 6: An extensible code editor for the web
Remark: An extensible Markdown processor
React-Markdown: React component to render markdown.
react-syntax-highlighter: Syntax highlighting component for react with prismjs or highlightjs using inline styles

Getting Started

Install all dependencies:

yarn
# or 
yarn install

Run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

Build the app:

yarn build

Deploy on Vercel

The deployed app link: https://example-nextjs-markdown-editor.vercel.app/

Relevant articles

(Learn to Build NextJS Applications)(https://medium.com/r/?url=https%3A%2F%2Famy-juan-li.medium.com%2Flist%2Fdb243e7bdf05)
Build a Markdown Editor Using Electron, React, TypeScript, CodeMirror 6, and Remark

About me