https://github.com/panglesd/lighthigher
A highlighter that respects your html hierarchy
https://github.com/panglesd/lighthigher
Last synced: about 1 month ago
JSON representation
A highlighter that respects your html hierarchy
- Host: GitHub
- URL: https://github.com/panglesd/lighthigher
- Owner: panglesd
- Created: 2024-05-31T15:24:12.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-10-07T09:05:25.000Z (8 months ago)
- Last Synced: 2025-03-24T07:49:12.172Z (2 months ago)
- Language: OCaml
- Size: 4.37 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# LightHigher
A little helper that takes a "highlighting function", and an element, and use that function to syntax highlight the element, but **without losing the internal HTML structure**! (Element nodes are never removed from the DOM).
This allows you to add links, listen to events, ... in your `` elements while still being able to highlight them.
## Demo
See [this demo](https://choum.net/panglesd/lighthigher.html)!
## Usage:
- Include the Javascript file currently at location `dist/lighthigher.js` (you can use a CDN: ``)
- Call `lighthight(highlight_function, elem)` where:
- `highlight_function` is a function taking a string and returning the string corresponding to the html of the highlighting. You can use any highlighter: `highlightjs`, `prismjs`, ...
- `elem` is the element you want to highlight
Here is an example with `highlightjs`:
```javascript
// highlight all elements that have a class starting with "language-"
// WITHOUT removing the HTML hierarchy
// Assumes highlightjs is available as "hljs"
document.querySelectorAll("[class^='language-']").forEach((elem) => {
lighthigh((s) => { return hljs.highlightAuto(s).value }, elem );
});
```