https://github.com/tn3w/highlight-it
A lightweight syntax highlighting library with themes, line numbers, and copy functionality.
https://github.com/tn3w/highlight-it
code highlight highlightjs javascript javascript-library
Last synced: about 1 month ago
JSON representation
A lightweight syntax highlighting library with themes, line numbers, and copy functionality.
- Host: GitHub
- URL: https://github.com/tn3w/highlight-it
- Owner: tn3w
- License: apache-2.0
- Created: 2025-03-15T20:07:45.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2026-02-10T17:43:58.000Z (about 1 month ago)
- Last Synced: 2026-02-10T21:15:24.344Z (about 1 month ago)
- Topics: code, highlight, highlightjs, javascript, javascript-library
- Language: JavaScript
- Homepage: https://www.tn3w.dev/highlight-it
- Size: 183 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
Highlight-It
A lightweight syntax highlighting library with themes, line numbers, and copy functionality.
Example:
```html
def greet(name):
"""Return a personalized greeting."""
return f"Hello, {name}!"
# Example usage
if __name__ == "__main__":
print(greet("World"))
```
Add highlight-it using this script:
```html
window.addEventListener('load', () => {
HighlightIt.init();
});
```
## 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.
```html
window.addEventListener('load', () => {
HighlightIt.init();
});
```
## Themes and Styling
Highlight-It provides comprehensive theming support by integrating all themes from [highlight.js](https://github.com/highlightjs/highlight.js/tree/main/src/styles). 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:
```html
```
## 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 | `
const foo = 'bar';` |
| `data-filename` | Displays a filename in the header and auto-detects language from file extension | `const foo = 'bar';` |
| `data-theme` | Sets the theme to 'light', 'dark', or 'auto' for the specific code block | `const foo = 'bar';` |
| `data-with-lines` | Adds line numbers to the code block | `const foo = 'bar';` |
| `data-line-start` | Sets the starting line number for the code block and enables line numbers | `const foo = 'bar';` |
| `data-with-share` | Adds a share button to the code block and individual lines | `const foo = 'bar';` |
| `data-with-download` | Adds a download button to the code block | `const foo = 'bar';` |
| `data-no-header` | Removes the header (hides language label but keeps copy button as floating) | `const foo = 'bar';` |
| `data-no-copy` | Hides the copy button | `const foo = 'bar';` |
| `data-with-reload` | Enables live updates - code will be rehighlighted when content changes | `` |
## Usage Example
```html
const greeting = 'Hello, world!';
console.log(greeting);
const greeting = 'Hello, world!';
console.log(greeting);
function calculateTotal(items) {
return items
.map((item) => item.price)
.reduce((total, price) => total + price, 0);
}
function calculateTotal(items) {
return items
.map((item) => item.price)
.reduce((total, price) => total + price, 0);
}
const greeting = 'Hello, world!';
console.log(greeting);
const greeting = 'Hello, world!';
console.log(greeting);
const greeting = 'Hello, world!';
console.log(greeting);
.container {
display: flex;
justify-content: center;
}
# This code will be automatically rehighlighted as content changes
```
## Initialization
To initialize HighlightIt with custom options:
```javascript
// 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
```javascript
// 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
1. Clone the repository
```bash
git clone https://github.com/tn3w/highlight-it.git
```
2. Install dependencies
```bash
npm install
```
3. Build the project
```bash
npm run build
```
Open `demo.html` in your browser to see the library in action.
## 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.