Zero Config
Auto-detects languages. Works instantly.
Theme Aware
Respects system preferences automatically.
Live Updates
Stream code with real-time highlighting.
Share Lines
Link to specific code sections.
Installation
1. Add the Script
Include Highlight-It from CDN in your HTML:
<script src="https://cdn.jsdelivr.net/npm/highlight-it@latest/dist/highlight-it-min.js"></script>
2. Initialize
Initialize Highlight-It when the page loads:
document.addEventListener('DOMContentLoaded', () => {
HighlightIt.init({
theme: 'auto',
debounceTime: 40
});
});
3. Add Code Blocks
Use the highlight-it class on your code elements:
<pre class="highlight-it" data-language="javascript">
function hello() {
console.log('Hello, World!');
}
</pre>
Complete Example
Put it all together:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Site</title>
<script src="https://cdn.jsdelivr.net/npm/highlight-it@latest/dist/highlight-it-min.js"></script>
</head>
<body>
<pre class="highlight-it" data-language="python">
def greet(name):
return f"Hello, {name}!"
</pre>
<script>
document.addEventListener('DOMContentLoaded', () => {
HighlightIt.init();
});
</script>
</body>
</html>
NPM Installation
Install via npm for build tools:
npm install highlight-it
Then import in your JavaScript:
import HighlightIt from 'highlight-it';
HighlightIt.init({
theme: 'auto',
debounceTime: 40
});
Custom Styles
Apply custom highlight.js themes by loading additional CSS:
<!-- Add a custom style after the main script -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight-it@latest/dist/styles/monokai.min.css">
Available styles include:
github.min.css
vs2015.min.css
intellij-light.min.css
atom-one.min.css
stackoverflow.min.css
monokai.min.css
nord.min.css
a11y.min.css
night-owl.min.css
Theme Control
Control light/dark themes by adding a class to the html element:
<!-- Auto theme (follows system preference) -->
<html class="highlightit-theme-auto">
<!-- Force light theme -->
<html class="highlightit-theme-light">
<!-- Force dark theme -->
<html class="highlightit-theme-dark">
Or set it programmatically:
document.documentElement.classList.add('highlightit-theme-dark');
Basic Usage
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
const sequence = Array.from({ length: 10 }, (_, i) => fibonacci(i));
console.log(sequence);
With Line Numbers
def quicksort(arr):
if len(arr) <= 1:
return arr
pivot = arr[len(arr) // 2]
left = [x for x in arr if x < pivot]
middle = [x for x in arr if x == pivot]
right = [x for x in arr if x > pivot]
return quicksort(left) + middle + quicksort(right)
Live Streaming
// Code will stream here
Minimal Mode
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
padding: 2rem;
}
With Filename
package main
import (
"fmt"
"net/http"
)
func handler(w http.ResponseWriter, r *http.Request) {
fmt.Fprintf(w, "Hello, %s!", r.URL.Path[1:])
}
func main() {
http.HandleFunc("/", handler)
http.ListenAndServe(":8080", nil)
}
Custom Line Start
Start line numbering from any number, positive or negative.
def calculate_area(radius):
return 3.14159 * radius ** 2
area = calculate_area(5)
print(f"Area: {area}")
Share & Download
Enable sharing and downloading of code blocks.
function fibonacci(n) {
const sequence = [0, 1];
for (let i = 2; i < n; i++) {
sequence.push(sequence[i - 1] + sequence[i - 2]);
}
return sequence;
}
console.log(fibonacci(10));
No Copy Button
Display-only code without copy functionality.
$ sudo rm -rf /
# Don't copy this command!
Per-Element Theme
Override global theme for specific code blocks.
.light-mode {
background: #ffffff;
color: #000000;
}
.dark-mode {
background: #000000;
color: #ffffff;
}
Combined Attributes
Mix multiple features together.
def quicksort(arr):
if len(arr) <= 1:
return arr
pivot = arr[len(arr) // 2]
left = [x for x in arr if x < pivot]
middle = [x for x in arr if x == pivot]
right = [x for x in arr if x > pivot]
return quicksort(left) + middle + quicksort(right)
numbers = [64, 34, 25, 12, 22, 11, 90]
sorted_numbers = quicksort(numbers)
print(sorted_numbers)
Dynamic Highlighting
Add code blocks programmatically with JavaScript.