Repository files navigation

Bring scrollytelling to your mdx. Animate code, images, charts, maps and more as you scroll.

See the live demo

The MDX looks like this:

import { CodeWave } from "gatsby-theme-waves"<CodeWave>```py# some code```#Some markdown```py# more code```More markdown>and more```py# and more```- ok- that's enough</CodeWave>

You need a Gatsby site with MDX. For example, this is how you add gatsby-theme-waves to a site that usesgatsby-theme-blog:

1. Install the theme (anddeepmerge for merging the theme styles)

   npm install --save gatsby-theme-waves deepmerge

2. Add the theme to yourgatsby-config.js (at the end of the plugin list just in case)

   module.exports={plugins:["gatsby-theme-blog","gatsby-theme-waves"// <-- add this]};

3. Merge the styles: create or editsrc/gatsby-plugin-theme-ui/index.js

   importwavesThemefrom"gatsby-theme-waves/src/gatsby-plugin-theme-ui/index";importblogThemefrom"gatsby-theme-blog/src/gatsby-plugin-theme-ui/index";importmergefrom"deepmerge";exportdefaultmerge(blogTheme,wavesTheme);

4. ImportCodeWave and use it in any MDX file

   import { CodeWave } from "gatsby-theme-waves"<CodeWave>```py# some code```#Some markdown```py# more code```More markdown>and more```py# and more```- ok- that's enough</CodeWave>

Your set up should look likethis example.

By default the lines that changed between two consecutive code blocks will be highlighted. You can change it to highlight the line (and columns) you want:

```js 1:3,6// highlights line 1,2,3 and 6``````js 5[1,3:6],8// highlights:// columns 1,3,4,5 and 6 from line 5// and line 8```

• Import code from files
• Better custom code syntax highlighting using theme-ui
• More waves
• More docs