Syntax Highlighting & Language Detection with Highlight.js

Highlight.js is a lightweight JavaScript library that automatically highlights and detects code syntax on web pages — no need for manual markup.

#Installing Highlight.js

pnpm add highlight.js

#Detect Language & Highlight Code

import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css';

const code = `function sum(a, b) { return a + b; }`;
const { value, language } = hljs.highlightAuto(code);

console.log(language); // e.g. "javascript"
console.log(value);    // highlighted HTML

#Usage in React

Pass the highlighted value to your React component and render it inside a code element with the hljs class for styling:

<code className="hljs" dangerouslySetInnerHTML={{ __html: value }} />

Highlight.js automatically detects the language and highlights it — perfect when your app handles multiple code types dynamically.