Experimenting with gatsby-remark-music

gatsby-remark-music is a Gatsby plugin that allows to easily add music sheets to your Gatsby site by using the abc notation. More specifically, it uses the abcjs library to render the abc notation to an SVG.

Here’s a little example:

The rendered SVG is configurable by passing to the plugin the abcjs configuration options. There is also an additional option - the color option - that allows to customize the color of the output SVG. Since the SVG is styled with CSS, you can also use CSS variables to make the color dynamic.

For example, this blog automatically switches between dark and light themes based on your system theme. The gatsby-remark-music plugin has been configured to use a CSS variable that changes when the system theme changes, so you will be able to see these music sheets in any case.

Note that the abcjs library is still far from being perfect, especially when the responsive mode is enabled. For example, this is what happens when trying to write a more complicated music sheet:

Cover by Marius Masalar on Unsplash