highlightDiff / highlightResult / mountDiff

highlightDiff

function highlightDiff(text: string, options?: HighlightOptions): string

Takes a diff text string in any of the 4 supported formats and returns an HTML string with syntax-highlighting CSS classes.

Parameters:

Parameter	Type	Description
text	string	Diff output text — semantic, rows, JSON, or XML format
options.format	DiffFormat	Format override. Defaults to 'auto' (auto-detect).
options.className	string	Additional CSS class appended to the root <pre> element.

Returns: string — HTML string: <pre class="dmn-dh [custom]"><code>...</code></pre>

Example:

const html = highlightDiff(diffText);
// auto-detect format

const html = highlightDiff(xmlDiff, { format: 'xml', className: 'my-theme' });

---

highlightResult

function highlightResult(result: DiffResult, options?: HighlightResultOptions): string

Renders a DiffResult from @veridtools/dmn-diff as semantic-format HTML with syntax-highlighting CSS classes. Always produces semantic output — use highlightDiff with rendered text if you need rows or JSON HTML.

Parameters:

Parameter	Type	Description
result	DiffResult	Result from diff()
options.className	string	Additional CSS class on the root <pre>.

Returns: string — Highlighted HTML string (semantic format).

Example:

import { diff } from '@veridtools/dmn-diff';
import { highlightResult } from '@veridtools/dmn-diff-highlight';

const result = diff(fromXml, toXml, { fromFile: 'before.dmn', toFile: 'after.dmn' });

const html = highlightResult(result);
const html = highlightResult(result, { className: 'dark-theme' });

---

mountDiff

function mountDiff(
  element: HTMLElement,
  text: string,
  options?: Omit<HighlightOptions, 'className'>,
): void

Convenience function that sets element.innerHTML = highlightDiff(text, options). Useful for plain DOM manipulation.

Parameters:

Parameter	Type	Description
element	HTMLElement	Target DOM element
text	string	Diff text to highlight
options.format	DiffFormat	Format override. Defaults to 'auto'.

Example:

const container = document.getElementById('diff-output')!;
mountDiff(container, diffText);
mountDiff(container, xmlDiff, { format: 'xml' });

---

detectFormat

function detectFormat(text: string): Exclude<DiffFormat, 'auto'>

Inspects a diff string and returns the detected format. Used internally by highlightDiff.

Returns: 'semantic' | 'rows' | 'json' | 'xml'

Detection rules (in order, delegated to @veridtools/dmn-diff):

1. Text starts with { → 'json'
2. Text contains <?xml → 'xml'
3. Lines starting with +/- match ^[+-]\s*\[ → 'rows'
4. Otherwise → 'semantic'