highlight.js

Beautiful Syntax Highlighting

Zero setup. Just add the class hljs to your code blocks and let Highlight.js do the magic.

function highlightSyntax(code) { const highlighted = hljs.highlight( 'javascript', code); return highlighted.value; }

Why Highlight.js?

🔧

Works Everywhere

Supports all modern browsers and frameworks. No dependencies required.

🎨

30+ Themes

Choose from vibrant color schemes that work in both light and dark modes.

🚀

Lightning Fast

Only load language definitions you need. Minified code is under 15KB.

Getting Started

1. Include the Library

<script src="https://cdn.jsdelivr.net/gh/highlightjs/highlightjs@11.3.1/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs%20/highlightjs@11.3.1%20/styles/github.min.css">

2. Add Code Blocks

<code class="hljs">
function hello(code) {
  return hljs.highlight(code).value;
}
</code>

3. Auto-Detect Language

hljs.highlightElement(document.querySelectorAll('code'));

Live Example

function fibonacci(n) { const arr = [0, 1]; for (let i = 2; i < n; i++) { arr.push(arr[i-2] + arr[i-1]); } return arr; } console.log(fibonacci(10));