Use GitHub Copilot to Build a Markdown Editor

Contributed by: Rizèl Scarlett

Difficulty level: Easy

Prerequisites

• Create a GitHub account (if you don’t have one)

• Sign up for GitHub Copilot

• Install the GitHub Copilot extension in an editor of your choice

Now that we have everything we need, let’s get started!

Step 1: Create a Next.js GitHub Codespace Template

I use GitHub Codespace templates when I want to avoid installing boilerplate package dependencies and setting up my environment from scratch. It comes in handy when I want to spin up a quick proof of concept or deliver a demo. In our case, we want to save time installing Next.js and its accompanying dependencies.

You can create a Next.js GitHub Codespace template by navigating to https://github.com/codespaces/templates. Then, choose the “Use this template” button for Next.js. This will trigger a codespace to open with boilerplate Next.js code with a browser preview.

Figure 0.

Step 2: Install Specific Dependencies

Using a GitHub Codespace template reduced the need to install a few boilerplate dependencies, but we still have more to install.

• Ensure the GitHub Copilot extension is installed. See here for instructions.

• Install the React Markdown npm package. To do this, run the following command in your codespace’s terminal:

  npm install react-markdown

• Install the styled-components npm package. To do this, ...