How to use code snippets with gatsby-source-notion-api
Tags: gatsby, javascript, notion, jamstack
Published: 2021-06-04 09:31:47

---
title: How to use code snippets with gatsby-source-notion-api
published: true
tags: gatsby, javascript, notion, jamstack
canonical_url: https://orlow.dev/how-to-use-code-snippets-with-gatsby-source-notion-api
cover_image: https://images.unsplash.com/photo-1526649661456-89c7ed4d00b8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1171&q=80
---

As of today, the official Notion API doesn't support code snippets. If such block exists on your Notion page, the API returns it with a type of `unsupported` and its contents are empty. When I was migrating my personal blog to [gatsby-source-notion-api](https://www.gatsbyjs.com/plugins/gatsby-source-notion-api/?=gatsby-source-notion-), I found two rather convenient ways to embed code.

# gatsby-remark-embedder

Not sure if it will work if you use MDX, but it works perfectly with MarkdownRemark. All you need to do is to create a code snippet on [CodePen](https://codepen.io) or [CodeSandBox](https://codepen.io) and simply throw a link to the snippet onto the page.

This approach has the great benefit of having all your code snippets put together. You can reuse them in different places, you can edit them separately from the writing process, and you can share them outside your blog as well. You can also find the plugin useful in other places like embedding tweets, youtube videos, and what-not.

Plugin docs can be found [here](https://www.gatsbyjs.com/plugins/gatsby-remark-embedder/?=embedder#codepen). In short - install the plugin, add it to your `gatsby-config.js`, create a code snippet [^1] and throw its link to the page.

# Markdown syntax

If you prefer things to be right inside the page, there is a way, and it's what I personally use on my blog. You can write a code snippet in Markdown syntax and simply disallow Notion to transform it to a code block. Start a line with <code>&#96;&#96;&#96;</code> and put a space. Notion will automatically turn it into a code block. `Cmd/Ctrl + Z` to undo this transformation. Put the snippet contents below. Then put <code>&#96;&#96;&#96;</code> on a separate line again.

To specify syntax you want to use in the snippet, you can put it right after the first <code>&#96;&#96;&#96;</code>.

`gatsby-source-notion-api` will transform it preserve it as Markdown syntax, and MarkdownRemark or MDX will transform it into valid HTML.

**CAVEAT:** since it's a kind of a wallhack to make the current state of Notion API a bit more usable, it's should not be a way to go when they start to support code blocks properly. So, what you need to do to make it work is to indent the contents of the whole code snippet one level up. I.e. simply select the stuff between <code>&#96;&#96;&#96;</code> and press `Tab` once. This will ensure snippet contents are rendered as snippet contents, not just as separate paragraphs.

Here's an example of what it looks like as a result:

```javascript
console.log("Hello world!");
```

And here's what it looks like in Notion to make it work:

![Code Snippet](https://orlow.dev/how-to-use-code-snippets-with-gatsby-source-notion-api-code-snippet.png)

[^1]: You probably need to sign up at [CodePen](https://codepen.io) or [CodeSandBox](https://codepen.io) to be able to use long-lasting links to your snippets.