Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

A starter for the "Code Notes" Gatsby theme

gatsby-theme-code-notes is released under the MIT license. PRs welcome! Follow @MrMartineau


Code Notes - A Gatsby theme for publishing code-related notes online | Product Hunt Embed


  • Notes can:
    • be written using Markdown (.md) or MDX (.mdx)
    • have zero, one or many tags. See an example here
    • have associated emojis 👏
    • be nested in subfolders so you can organise them how you like
  • Full syntax highlighting for most programming languages
  • Extra markdown features have also been added. Find out more here
  • Note search powered by the super-fast Flexsearch


Using Gatsby Starter Code Notes

This guide will take you through setting up Code Notes with Gatsby Starter Code Notes.

Step 1: Starter installation

With gatsby-cli:
gatsby new code-notes
With git clone:
git clone

cd code-notes


Step 2: Develop & Build

Once installed or cloned locally and all packages are installed you can begin developing your site.

# Run localhost
yarn dev

# Build your Gatsby site
yarn build


Theme Options

Key Default value Description
basePath / Root url for all notes pages
contentPath /content/notes Location of notes content
logo '' (empty string) Path to your site's logo. Will be used as the src attribute for an image
showDescriptionInSidebar true Show in the sidebar
gitRepoContentPath '' Set the location for your notes if they're hosted online, e.g. your git repo. This will show a "Edit this page" link underneath each note
showThemeInfo true Show info about this Gatsby theme
mdxOtherwiseConfigured true Configure gatsby-plugin-mdx. Note that most sites will not need to use this flag. If your site has already configured gatsby-plugin-mdx separately, set this flag false.
flexSearchEngineOptions { encode: 'icase', tokenize: 'forward', resolution: 9 } Configure FlexSearch's index method. The default value uses FlexSearch's default preset. Find out your other options here.

Example usage

// gatsby-config.js
module.exports = {
  plugins: [
      resolve: `gatsby-theme-code-notes`,
      options: {
        basePath: '/',
        contentPath: '/content/notes',
        showDescriptionInSidebar: true,
        showThemeInfo: false,
        logo: '',

Add notes to your site by creating md or mdx files inside /content/notes.

Note that if you've changed the default contentPath in the configuration, you'll want to add your markdown files in the directory specified by that path.

Note frontmatter

Frontmatter information (written in YAML) can be used to add metadata and extra information for your notes

Only the title field is required, the rest are optional.

title: Note metadata
emoji: 😃
  - metadata
  - info


The link item is used to display a link that is related to the note itself. It will appear below the title if.


The emoji frontmatter item will add an emoji beside the title on listing views and above the title on individual note pages


The tags array frontmatter item allows you to add as many tags to a note as you'd like.

Advanced usage


Turn your code notes into a PWA using this extra config. This requires gatsby-plugin-manifest and gatsby-plugin-offline.

// gatsby-config.js
  resolve: `gatsby-plugin-manifest`,
  options: {
    name: `Zander's Code Notes`,
    short_name: `CodeNotes`,
    description: `Notes on code. My memory bank.`,
    start_url: `/`,
    background_color: `hsl(210, 38%, 95%)`,
    theme_color: `hsl(345, 100%, 69%)`,
    display: `standalone`,
    icon: `static/logo.png`,
  resolve: `gatsby-plugin-offline`,
  options: {
    precachePages: [`/*`, `/tag/*`],

For more information visit the Theme repository


MIT © Zander Martineau

Made by Zander • zander.wtfGitHubTwitter


No description, website, or topics provided.






No releases published


No packages published