markdownremarkjs

highlight.js is not working with markdown in Next.js App

I'm creating a next.js blog. Using the remark library, we converted markdown into html language and applied markdown styling. The problem is that I want to use highlight.js to put a theme on the code. I've checked to load the desired css file, but it's not applicable. Usage specified as appropriate.

react: 17.0.2

next: 11.1.0,

node.js: 16.5.0,

remark: 13.0.0,

remark-html: 13.0.1

Image 

<pre>
 <code class="javascript">
   const temp = [1, 2];
 </code>
</pre>
Solution

  • Not exactly sure for your issue, but I did solve mine by importing import 'highlight.js/styles/default.css' in app.js files. (I am using markdown-it)

    credit to https://dev.to/kentico-kontent/how-to-use-highlight-js-on-a-next-js-site-f9