highlight-it

Highlight-It

A lightweight syntax highlighting library with themes, line numbers, and copy functionality.

Example:

<code class="highlight-it">
def greet(name):
	"""Return a personalized greeting."""
	return f"Hello, {name}!"

# Example usage
if __name__ == "__main__":
	print(greet("World"))
</code>

Add highlight-it using this script:

<script src="https://cdn.jsdelivr.net/npm/highlight-it@0.2.7/dist/highlight-it-min.js"></script>
<script>
	window.addEventListener('load', () => {
		HighlightIt.init();
	});
</script>

Slim Version

The slim version is a lightweight alternative that excludes highlight.js from the bundle. This provides several benefits:

• Significantly reduced file size for faster page loads
• Freedom to use your preferred version of highlight.js
• Ability to share a single highlight.js instance across multiple features
• Better control over highlight.js configuration and customization
• Reduced redundancy when highlight.js is already part of your project

To use the slim version, you'll need to include highlight.js separately before loading highlight-it.

<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highlight-it@latest/dist/highlight-it.slim.js"></script>
<script>
	window.addEventListener('load', () => {
		HighlightIt.init();
	});
</script>

Themes and Styling

Highlight-It provides comprehensive theming support by integrating all themes from highlight.js. The library intelligently bundles related theme files (e.g. theme-dark.css and theme-light.css) into a single theme.css file that automatically handles both light and dark modes.

Adding Themes

Include your preferred theme by adding a stylesheet link:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight-it@latest/dist/styles/a11y.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight-it@latest/dist/styles/github.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight-it@latest/dist/styles/vs2015.min.css">

Data Attributes

HighlightIt supports the following data attributes to customize the appearance and behavior of code blocks:

Attribute	Description	Example
data-language	Specifies the programming language for syntax highlighting	<div class="highlight-it" data-language="javascript">const foo = 'bar';</div>
data-filename	Displays a filename in the header and auto-detects language from file extension	<div class="highlight-it" data-filename="example.js">const foo = 'bar';</div>
data-theme	Sets the theme to 'light', 'dark', or 'auto' for the specific code block	<div class="highlight-it" data-theme="dark">const foo = 'bar';</div>
data-with-lines	Adds line numbers to the code block	<div class="highlight-it" data-with-lines>const foo = 'bar';</div>
data-line-start	Sets the starting line number for the code block and enables line numbers	<div class="highlight-it" data-line-start="10">const foo = 'bar';</div>
data-with-share	Adds a share button to the code block and individual lines	<div class="highlight-it" data-with-share>const foo = 'bar';</div>
data-with-download	Adds a download button to the code block	<div class="highlight-it" data-with-download>const foo = 'bar';</div>
data-no-header	Removes the header (hides language label but keeps copy button as floating)	<div class="highlight-it" data-no-header>const foo = 'bar';</div>
data-no-copy	Hides the copy button	<div class="highlight-it" data-no-copy>const foo = 'bar';</div>
data-with-reload	Enables live updates - code will be rehighlighted when content changes	<div class="highlight-it" data-with-reload data-language="javascript"></div>

Usage Example

<!-- Auto-detect language -->
<div class="highlight-it">
const greeting = 'Hello, world!';
console.log(greeting);
</div>

<!-- Basic usage with language -->
<div class="highlight-it" data-language="javascript">
const greeting = 'Hello, world!';
console.log(greeting);
</div>

<!-- With filename and line numbers -->
<div class="highlight-it" data-filename="app.js" data-with-lines>
function calculateTotal(items) {
    return items
        .map((item) => item.price)
        .reduce((total, price) => total + price, 0);
}
</div>

<!-- With filename and line numbers starting from line 10 -->
<div class="highlight-it" data-filename="app.js" data-line-start="10">
function calculateTotal(items) {
	return items
		.map((item) => item.price)
		.reduce((total, price) => total + price, 0);
}
</div>

<!-- With share button -->
<div class="highlight-it" data-language="javascript" data-with-share>
const greeting = 'Hello, world!';
console.log(greeting);
</div>

<!-- With download button -->
<div class="highlight-it" data-language="javascript" data-with-download>
const greeting = 'Hello, world!';
console.log(greeting);
</div>

<!-- With download button and specific filename -->
<div class="highlight-it" data-language="javascript" data-with-download data-filename="app.js">
const greeting = 'Hello, world!';
console.log(greeting);
</div>

<!-- Dark theme without header -->
<div class="highlight-it" data-language="css" data-theme="dark" data-no-header>
.container {
	display: flex;
	justify-content: center;
}
</div>

<!-- With live updates for streaming code -->
<div class="highlight-it" data-language="python" data-with-reload>
	# This code will be automatically rehighlighted as content changes
</div>

Initialization

To initialize HighlightIt with custom options:

// Default configuration
HighlightIt.init()

// Custom configuration
HighlightIt.init({
	selector: '.custom-code', // Custom CSS selector
	autoDetect: true, // Auto-detect language if not specified
	addCopyButton: true, // Add copy button to code blocks
	showLanguage: true, // Show language label in header
	addHeader: true, // Add header section to code blocks
	addLines: false, // Add line numbers to code blocks
	addShare: true, // Add share button to code blocks
	addDownload: true, // Add download button to code blocks
	theme: 'auto', // Global theme (light, dark, auto)
	debounceTime: 40 // Debounce time in ms for live updates (lower values = more responsive)
})

Live Updates

The data-with-reload attribute enables automatic rehighlighting when code content changes, which is particularly useful for apps that stream in code responses. This feature ensures that code syntax highlighting is applied in real-time as code is being added to the DOM.

Implementation Example

// Create an empty code block with live updates enabled
const codeBlock = document.createElement('div')
codeBlock.className = 'highlight-it'

// Add it to your container
document.querySelector('.container').appendChild(codeBlock)

// Add it to HighlightIt
HighlightIt.highlight(codeBlock, {
	withReload: true,
	language: 'javascript',
	addHeader: true,
	addCopyButton: true,
	addLines: false,
	addShare: false,
	addDownload: false,
	filename: 'app.js'
})

// HighlightIt will automatically rehighlight the code
function onAiResponseChunk(codeChunk) {
	codeBlock.textContent += codeChunk
	// No need to manually rehighlight - it happens automatically!
}

Benefits

• Real-time syntax highlighting as code streams in
• No need to manually call highlighting functions after content updates
• Ensures users see properly highlighted code even during streaming
• Works with all other HighlightIt features (themes, line numbers, etc.)
• Debounced to optimize performance during rapid updates

Development

• Clone the repository

git clone https://github.com/tn3w/highlight-it.git

• Install dependencies

npm install

• Build the project

npm run build

Open demo.html in your browser to see the library in action.

Coming soon?

🚀 Epic Features Coming Your Way!

• Speak Any Code's Language: Because your obscure programming language deserves some love too! 🗣️
• Show Off Your Code: Turn those beautiful snippets into shareable images. Perfect for Twitter bragging! 📸
• Find That One Line: Lost in your code? Our search feature will be your best friend! 🔍
• Link Like a Pro: Share exact lines of code. No more "it's somewhere in there"! 🔗
• Chat About Code: Leave comments on specific lines, because code reviews should be social! 💬
• Time Travel: Track code versions like a git ninja! ⏰
• Share the Love: Embed your awesome code anywhere and everywhere! 🌐
• Code Playground: Run JavaScript/Python right in the browser. What could go wrong? 🎮
• Spot the Difference: Side-by-side diffs that actually make sense! 👀
• Code for Everyone: Making sure everyone can enjoy your code, no exceptions! ♿
• Spread the Word: Share code snippets faster than you can say "Stack Overflow"! 🚀
• Save for Later: Bookmark those golden code snippets for future inspiration! 🔖

🛠️ Making Things Even More Awesome

• Speed Demon: Making big code blocks load faster than your coffee break ⚡
• Mobile Magic: Code that looks gorgeous even on tiny screens 📱
• Theme Party: Create themes that make your code look like a million bucks 🎨
• Language Detective: We'll figure out what language it is, probably! 🔍
• Oops Handler: Because sometimes things go wrong, and that's okay 🤷
• Show & Tell: More examples than you can shake a stick at! 📚
• Bug Squashing: Testing all the weird edge cases you can think of 🐛
• Browser BFFs: Works everywhere, even on your grandma's browser! 🌐
• Diet Mode: Keeping our bundle size slimmer than a JavaScript framework 🏋️
• API Tales: Documentation so good, you might actually read it! 📖

License

Copyright 2025 TN3W

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.