DEV Community

Discussion on: How to use Highlight.js on a Next.js site

View post
Collapse
 
inezabonte profile image
Ineza Bonté Grévy •

How can I use a different highlight.js theme?

Collapse
 
chrysillala profile image
ChrysillaM •

You could just replace the default theme name inside <Head> with your desired theme

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.3.2/build/styles/{ THEME_NAME }.min.css"></link>
Enter fullscreen mode Exit fullscreen mode

or

import the theme to add the styles locally (as mentioned in the article) and replace the default theme. On my code below, I switch the theme to night-owl.

import hljs from 'highlight.js';
import 'highlight.js/styles/night-owl.css';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);
Enter fullscreen mode Exit fullscreen mode

Hopefully this helps!

Collapse
 
inezabonte profile image
Ineza Bonté Grévy •

Do I have to import each language that I'm using in my code snippets

Thread Thread
 
chrysillala profile image
ChrysillaM •

The short answer would be yes. However, you could also import common subset of languages predefined by highlight.js using this syntax

import hljs from 'highlight.js/lib/common';
Enter fullscreen mode Exit fullscreen mode

So you won't need to import each language but this might result in bigger bundle size, compared with importing only the languages you need.