Code Highlighter

Highlight your code to improve readability

This is a post for all tech bloggers out there who wants to blog about programming.

This example is achieved using highlight.js, let's first install it:

npm install highlight.js

Example, if we want to use javascript highlighting, we import as such:

// import Highlight.js and the languages you need
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);

Then in the case for NextJs, we can apply this to every post:

[id].tsx

// add a useEffect in the component
import React, { useEffect } from 'react';
 
const Post = ({ content }) => {
  useEffect(() => {
    hljs.highlightAll();
  }, []);
 
  return (
    <div>
      <div
        dangerouslySetInnerHTML={{
          __html: content,
        }}
      />
    </div>
  );
};