Build a CSS syntax highlighter with React and Styled Components

Tom Nagle
ITNEXT
Published in
2 min readMar 27, 2019

--

I recently created a style guide with GatsbyJS and needed to provide blocks of CSS as examples. I wanted the blocks to have syntax highlighting, be easy to read and have a quick copy function for those using the guide. I couldn’t find a component that had all the features I needed, so I decedent to make my own with Styled Components.

--

--

Writer for

I am a full stack JavaScript developer, living in Melbourne, Australia. My preferred stack is Mongoose, TypeScript, Node.js, React & GraphQL.