Light-HL

A Lightweight HightLight Library

Demo

Usage

npm install light-hl

highlight

import {highlight} from 'light-hl';
const html = highlight('console.log("Hello World!");');
document.body.innerHTML = html;

HighLight

import {HighLight} from 'light-hl';

document.body.appendChild(HighLight({
    code: 'function main(){\n  console.log("Hello World!");\n}',
    highlights: [{
        match: /main/g,
    }]
}));

OverFlow Scroll

If you want OverFlow scroll on your container, just add lhl-container class to you container element;

HightLight Options

interface IHighLightBase {
	color?: string;
	opacity?: number;
}
interface IHighLightPosition extends IHighLightBase {
	row: number;
	column: number;
	range?: number;
}
interface IHighLightMatch extends IHighLightBase {
	match: string | RegExp;
}
type IHighLight = IHighLightPosition | IHighLightMatch;
declare function HighLight(options?: {
	code?: string;
	borderRight?: boolean;
	startIndex?: number;
	highlights?: IHighLight[];
	style?: IStyle;
	codeStyle?: IStyle;
	lineHeight?: number;
	lineCount?: number;
}): HTMLElement;

CDN

<script src="https://cdn.jsdelivr.net/npm/light-hl"></script>
<script>console.log(window.LightHl) </script>