7 Redesigning my portfolio app

Upgrading tioye.dev from HTML, CSS, JS to Next.JS and GraphQL

How to Use PrismJS with NextJS

This is a summary of how I got syntax highlighting to work on my NextJS blog

Install Prism

First I installed Prism.JS from NPM. You can use Yarn

npm i prismjs

or

yarn add prismjs

Import Prism into the Next.JS Component

Next, I imported Prism and the React useEffect hook into the blog details page.

The Okaidia theme looks good so, I imported its CSS styles.

Then, I called the Prism.highlightAll function inside the useEffect hook. This will turn on syntax highlighting after the component is mounted

Finally, I added a className specifying the programming language e.g. className="language-css" or className="language-js"

import React, { useEffect } from "react";
import Prism from "prismjs";
import "prismjs/themes/prism-okaidia.css";
import styles from "styles/Details.module.scss"

const SingleProject = ({ project }) => {

  useEffect(() => {
    Prism.highlightAll()
  }, [])

  if (!project) return

  return (
    <>
      <div className={styles.Container}>
          <div
            dangerouslySetInnerHTML={{ __html: project.description }}
            className={`${styles.formatter} language-js`}
          >
          </div>
      </div>
    </>
  )
}

export default SingleProject

Make it your way

Prism provides several customization options. You can download a custom minified CSS from https://prismjs.com/download.html and import it inside your _app.js

// SingleProject.js
import React, { useEffect } from "react";
import Prism from "prismjs";
import styles from "styles/Details.module.scss"

const SingleProject = ({ project }) => {

  useEffect(() => {
    Prism.highlightAll()
  }, [])

  if (!project) return

  return (
    <>
      <div className={styles.Container}>
          <div
            dangerouslySetInnerHTML={{ __html: project.description }}
            className={`${styles.formatter} language-js`}
          >
          </div>
      </div>
    </>
  )
}

export default SingleProject

My _app.js file looks like this

// _app.js
import Head from "next/head"
import Layout from "../components/Layout"
import "../styles/globals.scss"
import "../styles/prism.css"

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Head>
        <link rel="shortcut icon" href="/assets/favicon.ico" />
      </Head>
      <Component {...pageProps} />
    </Layout>
  )
}

export default MyApp

We're done! You may need to refresh your page to activate Prism.

The result