prismjs-syntax-highlighting.mdx

title	summary	date	published	icon	tags
Adding Syntax Highlighting in Nextjs	If you want to show example code on a page in Nextjs you will help your readers by implemeting some form of syntax highlighting. Here's how.	2021-12-03	false	js	Javascript

Adding highlighting in a markdown-based blog

If you are using something like Remark you can simply add remark-prism to your markdown processing as follows.

import { remark } from 'remark';
import html from 'remark-html';
import gfm from 'remark-gfm';
import prism from 'remark-prism';
import emoji from 'remark-emoji';

/*
Using remark to convert markdown to HTML:
  - prism for code syntax highlighting
  - gfm for tables
  - emoji
*/

export async function markdownToHTML(markdown) {
  const result = await remark()
    .use(html, { sanitize: false })
    .use(gfm)
    .use(prism)
    .use(emoji)
    .process(markdown);
  return result.toString();
}

Then, make sure you load a prism css theme to actually colorize your code.

import 'prismjs/themes/prism-tomorrow.css';
import '../styles/index.css';

export default function MyApp({ Component, pageProps }) {
  return (
    <Component {...pageProps} />
  );
}

Adding highlighting to HTML directly

In this case we will be moving some of the work from the server to the client

npm i prismjs
yarn add prismjs

Prismjs also provides TypeScript support, npm i @types/prismjs or yarn add @types/prismjs

Import prismjs into your blog page and highlight all. The next step is just import prismjs into your codes and call the highlightAll function in your useEffect / componentDidMount.

import Prism from 'prismjs';
import "prismjs/components/prism-java"; // if you need a specific language
import 'prismjs/themes/prism-tomorrow.css'; // css theme

export default function Index() {

  useEffect(() => {
    if (typeof window !== 'undefined') { // don't run on server
        Prism.highlightAll();
    }
  }, []);

  return (
    <pre class="language-javascript" >
      <code>
        function getFullName (user) {
          const fullName = user.firstName + user.lastName;

          return fullName;
        }
      </code>
    </pre>
  );
}

It will automatically select the code blocks and will highlight them all. Note, you must have your code in the format above.

References

• Prismjs