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

Syntax Highlighting (and More!) with Prism on a Static Site css-tricks.com3 months ago in #Dev Love48

So, you’ve determined to construct a weblog with Next.js. Like any dev blogger, you’d love to have code snippets to your posts which can be formatted well with syntax highlighting. Perhaps you additionally need to show line numbers within the snippets, and perhaps even be capable to name out positive strains of code. This publish will display you the way to get that arrange, in addition to some pointers and methods for buying those different options operating. Some of it’s tricker than it’s possible you’ll be expecting. Prerequisites We’re the usage of the Next.js weblog starter as the bottom for our mission, however the similar rules will have to follow to different frameworks. That repo has transparent (and easy) getting began directions. Scaffold the weblog, and let’s move! Another factor we’re the usage of this is Prism.js, a common syntax highlighting library that’s even used proper right here on CSS-Tricks. The Next.js weblog starter makes use of Remark to transform Markdown into markup, so we’ll use the remark-Prism.js plugin for formatting our code snippets. Basic Prism.js integration Let’s get started by way of integrating Prism.js into our Next.js starter. Since we already know we’re the usage of the remark-prism plugin, the very first thing to do is set up it with your favourite package deal supervisor: npm i remark-prism Now move into the markdownToHtml record, within the /lib folder, and turn on remark-prism: import commentPrism from “remark-prism”; // later … .use(commentPrism, { plugins: [“line-numbers”] }) Depending on which model of the remark-html you’re the usage of, you may also wish to trade its utilization to .use(html, { sanitize: false }). The complete module will have to now seem like this: import { comment } from “comment”; import html from “remark-html”; import commentPrism from “remark-prism”; export default async serve as markdownToHtml(markdown) { const end result = anticipate comment() .use(html, { sanitize: false }) .use(commentPrism, { plugins: [“line-numbers”] }) .procedure(markdown); go back end result.toString(); } Adding Prism.js types and theme Now let’s import the CSS that Prism.js must taste the code snippets. In the pages/_app.js record, import the primary Prism.js stylesheet, and the stylesheet for whichever theme you’d like to make use of. I’m the usage of Prism.js’s “Tomorrow Night” theme, so my imports seem like this: import “prismjs/issues/prism-tomorrow.css”; import “prismjs/plugins/line-numbers/prism-line-numbers.css”; import “../types/prism-overrides.css”; Notice I’ve additionally began a prism-overrides.css stylesheet the place we will tweak some defaults. This will turn out to be helpful later. For now, it will probably stay empty. And with that, now we have some fundamental types. The following code in Markdown: “`js elegance Shape { draw() { console.log(“Uhhh perhaps override me”); } } elegance Circle { draw() { console.log(“I’m a circle! :D”); } } “` …will have to structure well: Adding line numbers You would possibly have spotted that the code snippet we generated does no longer show line numbers despite the fact that we imported the plugin that helps it after we imported remark-prism. The answer is hidden in undeniable sight within the remark-prism README: Don’t disregard to incorporate the right css to your stylesheets. In different phrases, we wish to drive a .line-numbers CSS elegance onto the generated   tag, which we will do like this: And with that, now we have line numbers! Note that, based totally on the model of Prism.js I’ve and the “Tomorrow Night” theme I selected, I wanted so as to add this to the prism-overrides.css record we began above: .line-numbers span.line-numbers-rows { margin-top: -1px; } You would possibly not want that, however there you’ve it.  » Read More

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply