Announcing codefence support for Gatsby

codefence is a new code formatting service that allows you to introduce interactive, runnable code within a website. I wrote a plugin for Gatsby.js that allows you to easily transform your code excerpts into codefence-enabled HTML. I’m really jazzed about this because many people within the Gatsby community are creating Markdown-driven blogs filled with code excerpts — but especially if you want to show what your code does, you often have to include long console.log statements. Using prism.js, the styling for comments within code (if you are trying to display the output of a print statement) can be frustrating, and can often lead to a poor experience on mobile.

codefence transforms your code snippets into interactive, runnable code sections (feel free to play around!):

// An anti-prime number has more factors // than any number preceding it function getAntiPrimes(upToNumber) { let potentialAntiPrime = 1; let divisorCount = 0; const antiPrimes = []; while(potentialAntiPrime <= upToNumber) { let localDivisorCount = 0; for(let potentialDivisor = 1; potentialDivisor <= potentialAntiPrime; potentialDivisor++) { if(potentialAntiPrime % potentialDivisor == 0) { localDivisorCount++; } } if(localDivisorCount > divisorCount) { divisorCount = localDivisorCount antiPrimes.push(potentialAntiPrime); } potentialAntiPrime++; } return antiPrimes; } console.log(getAntiPrimes(100));

---

Sick!

This is a game-changer for being able to demonstrate and let people play with example code. I hope that people with Gatsby code blogs check out gatsby-remark-codefence when investigating options for syntax highlighting and interactivity in their code examples!