Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


gatsby-remark-music adds math equation support to gatsby using remark-music and abc notation.


npm install --save gatsby-transformer-remark gatsby-remark-music abcjs

How to use

// In your gatsby-config.js
plugins: [
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
          resolve: 'gatsby-remark-music',
          options: {
            // Add any abcjs options from https://github.com/paulrosen/abcjs here
            // plus a custom "color" option that allows you to set the color of the music sheet.
            // e.g. to use CSS variables:
            color: 'var(--text-color)',

Writing music sheets

Surround your abc music sheet with §§ and new-lines to generate a music sheet.

Example markdown:

X: 24
T:Clouds Thicken
C:Paul Rosen
S:Copyright 2005, Paul Rosen
R:Creepy Jig
|:"Em"EEE E2G|"C7"_B2A G2F|"Em"EEE E2G|\
"C7"_B2A "B7"=B3|"Em"EEE E2G|
"C7"_B2A G2F|"Em"GFE "D (Bm7)"F2D|\
1"Em"E3-E3:|2"Em"E3-E2B|:"Em"e2e gfe|
"G"g2ab3|"Em"gfeg2e|"D"fedB2A|"Em"e2e gfe|\
© 2023 Gatsby, Inc.