Member-only story
Loading Gists in a NextJS Application
A tutorial on how to load GitHub Gists from inside markdown pages of a NextJS blog
For non-members, please click here to continue reading.
Introduction
All my blog posts are available on my personal website. Under the hood, they are saved as markdown files.
It allows me to easily write the posts, but when I’m cross-posting on other platforms, I don’t have the luxury to get the syntax highlighting and the right colors for the code snippets.
To make it prettier on every platform, I’m using Github Gists. It renders well everywhere, but I don’t want to have Github’s code blocs styles on my blog but I prefer something that match my website design. To do so, I have to adapt the markdown parser I use to load and render the code from gists in the way I prefer.
In this post, we will see how to create a blog post using markdown files, how to create and integrate a remark plugin, highlight the recovered code it with react-syntax-highlighter and keep the performances as good as possible.
Initial Situation: Loading Markdown in a NextJS Page
Before getting into the code for loading gists, we first need to make the blog to load markdown files. To do so, it needs two different items:
- A markdown file containing the blog post
- A NextJS page containing the markdown loading, parsing and rendering
Let’s start with the markdown file
What Does The Markdown File Looks Like
The markdown file is separated in two different parts: the metadata and the content itself.
The metadata are here to give informations on the author, the date, the language used (I have posts both in french and english), the URL path, tags, etc.
These informations are isolated from the content by three dashes ——-at the begin and three and the end.
Here is a light sample of what a blog post can look like:
