Luna Dom Highlighter

Highlighter for html elements.

Demo

https://luna.liriliri.io/?path=/story/dom-highlighter

Install

Add the following script and style to your page.

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/luna-dom-highlighter/luna-dom-highlighter.css" />
<script src="//cdn.jsdelivr.net/npm/luna-dom-highlighter/luna-dom-highlighter.js"></script>

You can also get it on npm.

npm install luna-dom-highlighter --save

import 'luna-dom-highlighter/luna-dom-highlighter.css'
import LunaDomHighlighter from 'luna-dom-highlighter'

Usage

const domHighlighter = new LunaDomHighlighter(container, {
  showRulers: true,
  showExtensionLines: true,
  showInfo: true,
})
domHighlighter.highlight(document.getElementById('test'))
domHighlighter.hide()

Configuration

• borderColor(string | IRgb): The border highlight fill color.
• colorFormat('rgb' | 'hsl' | 'hex'): The color format used to format color styles.
• contentColor(string | IRgb): The content box highlight fill color.
• marginColor(string | IRgb): The margin highlight fill color.
• monitorResize(boolean | IRgb): Auto redraw if target element is resized.
• paddingColor(string | IRgb): The padding highlight fill color.
• showAccessibilityInfo(boolean): Whether the a11y info should be shown.
• showExtensionLines(boolean): Whether the extension lines from node to the rulers should be shown.
• showInfo(boolean): Whether the node info tooltip should be shown.
• showRulers(boolean): Whether the rulers should be shown.
• showStyles(boolean): Whether the node styles in the tooltip.

Api

hide(): void

Hide highlight.

highlight(target: HTMLElement | Text,options?: IOptions): void

Highlight element or text node.

Types

IRgb

• a(number): Alpha.
• b(number): Blue.
• g(number): Green.
• r(number): Red.