Code highlighting with prism.js in nextjs project

Updated on: Sun Feb 07 2021

Tags:

Hey! Here is a some tips on how to add code highlighting to your nextjs.
First of all here are couple of examples on what we want to achieve here.

Example for Bash:

copied bash

cat somefile | grep '^$' | wc -l


This is example with javascript:

copied javascript

const fetchData = async () => {
  return await fetch('http://example-api.com').then(resp => resp.json());
}

This is example with html:

copied html

<html>
  <head>
    <title>This is title</title>
  </head>
  <body>
    <div>This is div in body</div>
  </body>
</html>

And css:

copied css

html,
body {
  margin: 0;
  font-size: 16px;
}
#root {
  height: 100vh;
}
.container {
  box-sizing: border-box;
}

First of all - this blog built on nextjs and content coming from pretty cool headless cms called Sanity.io. It has quite extensible text editor. It provides possibility to add code snippets via code-input plugin.

Useful links: