Gist Links to Embeds in Markdown on Next.js
For Reasons(TM) that include compatibility, I'm writing my site content using Commonmark. This means I'm just going to be pasting plain gist links into my posts and hoping for the best.
To help this 'best' to happen, I've also needed to make a few modifications to my Next.js site to ensure these get rendered as embeds.
- You should be using Next.js's preferred
next-mdx-remotemethod of handling MDX files
Step 1. Create the
@remark-embedder gist link transformer
Step 2. Modify your page to apply both the transform and
Note: It is apparently possible to apply the
mdxOptions used by the
serialize function in
next.config.mjs but I was unable to change my
.mjs and still have Next.js run.
If you're happy to keep using
.mdx and including
<Gist id="[the_id]" /> in your markdown, you can skip the transformer entirely, which is what I was doing before. But then you wouldn't be needing this post.