Add Custom Code Block/highlighter to nextJs

Developing with Prismic
1

Seriously, guys, I need your help!

I was going through Prismic's blog a while ago, and I noticed they have code samples well highlighted on their blog posts. For example, this post https://prismic.io/blog/svelte-sveltekit-tutorial is well highlighted with code samples. I have been looking for ways to add code highlighter to my newly created blog but not really working.

I need a way to get that done ASAP so that I can start writing really good articles. Please!

3

Hi @chadereiroro134,

I believe that the Prismic blog uses the Shikiji library for its code formatting. Beyond that, I don't know how it's implemented.

That said, I work on Primsic's documentation website, and can show you how we've set up our code snippet formatting using the highlight.js library. It's pretty simple to use. Here's a very basic example of a react component:

import React from 'react'
import * as prismic from '@prismicio/client'
import hljs from 'highlight.js'

export default function CodeBlock({ snippetField }) {
  const unhighlightedCode = prismic.asText(snippetField)
  const highlightedCode = hljs.highlightAuto(unhighlightedCode)

  return (
    <pre>
      <code dangerouslySetInnerHTML={{ __html: highlightedCode }} />
    </pre>
  )
}

You'll also have to add the highlight.css file to your website, but you can follow the library's instructions to get all the pieces in place.

In this case, snippetField is a rich text field in Prismic. I usually set the configuration for this to only allow "preformatted" and "allow multiple lines".

From here, there are more customizations you can do with highlight.js, but hopefully, this gets you going on the right path.

Cheers,
Levi

1 Like
5

Thank you Levi for the response.

I will definitely try to implement this! I'm currently not at home now, when I get home I'd give this a shot!!!

Thank you once again!

1 Like
6

This is how I am currently displaying articles using Prismic Rich Text. How can I add syntax highlighting here using highlight.js.
Thanks!!

Screenshot (188)
Screenshot (188)1920×1080 268 KB

9

Hey Rahul,

I would suggest following Levi's suggestion above: create a dedicated CodeBlock slice. This will offer a better experience for editors and it will be easier to manage.

If you want to allow code blocks within a text block, you can use the components prop of the PrismicRichText component to manipulate the component's output. I think you should be able ot transform the content of the block with HLJS that way.

Sam