Skip to content

Instantly share code, notes, and snippets.

Created Apr 24, 2022
What would you like to do?
gatsby-remark-sidenotes -- a Gatsby.js plugin to generate markup to style as sidenotes/margin-notes
I like trains.

A steam engine is a heat engine that performs mechanical work using steam as its working fluid. The steam engine uses the force produced by steam pressure to push a piston back and forth inside a cylinder. This pushing force can be transformed, by a connecting rod and crank, into rotational force for work 1.



[data-sidenote-contents] {
float: right;
clear: right;
/* width of our gutter */
width: 220px;
/* 30px gap between content and sidenotes */
margin-right: calc(-30px - 220px);
@media screen and (max-width: 700px) {
float: unset;
position: relative;
const visit = require("unist-util-visit")
// import showdown to convert inside of
// sidenotes from markdown to HTML
const showdown = require("showdown")
const converter = new showdown.Converter()
// generate markup for a sidenote
const getSidenote = note => ({
type: "html",
value: `<aside data-sidenote-contents>
// subroutine for visiting a markdown code block
const visitCodeNode = node => {
const { value, lang } = node
if (lang !== "sidenote") {
// terminate without making changes if
// this codeblock is not a sidenote
const { type, value: html } = getSidenote(value)
node.type = type
node.value = html
const main = ({ markdownAST }) => {
// visit ever code block
visit(markdownAST, "code", visitCodeNode)
return markdownAST
module.exports = main
"name": "gatsby-remark-sidenotes",
"version": "1.0.0",
"main": "index.js",
"dependencies": {
"showdown": "^1.9.1",
"unist-util-visit": "^2.0.3"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment