How can I use a different highlight.js theme?
You could just replace the default theme name inside <Head> with your desired theme
default
<Head>
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.3.2/build/styles/{ THEME_NAME }.min.css"></link>
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.
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);
Hopefully this helps!
Do I have to import each language that I'm using in my code snippets
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';
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.
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
How can I use a different highlight.js theme?
You could just replace the
defaulttheme name inside<Head>with your desired themeor
import the theme to add the styles locally (as mentioned in the article) and replace the
defaulttheme. On my code below, I switch the theme tonight-owl.Hopefully this helps!
Do I have to import each language that I'm using in my code snippets
The short answer would be yes. However, you could also import common subset of languages predefined by highlight.js using this syntax
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.