Skip to main content

Posts

Showing posts with the label Highlighting

Syntax Highlighting (and More!) With Prism on a Static Site

Syntax Highlighting (and More!) With Prism on a Static Site So, you’ve decided to build a blog with  Next.js . Like any dev blogger, you’d like to have code snippets in your posts that are formatted nicely with syntax highlighting. Perhaps you also want to display line numbers in the snippets, and maybe even have the ability to call out certain lines of code. This post will show you how to get that set up, as well as some tips and tricks for getting these other features working. Some of it is tricker than you might expect. Prerequisites We’re using the  Next.js blog starter  as the base for our project, but the same principles should apply to other frameworks. That repo has clear (and simple) getting started instructions. Scaffold the blog, and let’s go! Another thing we’re using here is  Prism.js , a popular syntax highlighting library that’s even used right here on CSS-Tricks. The Next.js blog starter uses  Remark  to convert Markdown into markup, so we’ll use the  remark