Vanilla JS

Installation

pnpm add @veridtools/dmn-diff-highlight @veridtools/dmn-diff

highlightDiff — highlight raw text

import { highlightDiff } from '@veridtools/dmn-diff-highlight';
import '@veridtools/dmn-diff-highlight/style.css';

const html = highlightDiff(diffText);
// → '<pre class="dmn-dh"><code>...</code></pre>'

// With explicit format
const html = highlightDiff(diffText, { format: 'rows' });

// With custom class for theming
const html = highlightDiff(diffText, { className: 'dark-theme' });

highlightResult — render and highlight a DiffResult

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);
// defaults to semantic format

const html = highlightResult(result, { format: 'rows' });
const html = highlightResult(result, { format: 'json' });

mountDiff — set innerHTML directly

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

const container = document.getElementById('diff-output')!;
mountDiff(container, diffText);

// With format hint
mountDiff(container, xmlDiffText, { format: 'xml' });

detectFormat — inspect the format of a diff string

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

const fmt = detectFormat(diffText);
// → 'semantic' | 'rows' | 'json' | 'xml'

Custom CSS theme

Override CSS custom properties on .dmn-dh or a scoped class:

/* Dark theme matching your design system */
.dmn-dh {
  --dmn-dh-bg: #0d1117;
  --dmn-dh-fg: #e6edf3;
  --dmn-dh-added: #3fb950;
  --dmn-dh-removed: #f85149;
  --dmn-dh-modified: #d2a8ff;
  --dmn-dh-field-breaking: #f85149;
  --dmn-dh-field-change: #ffa657;
  --dmn-dh-field-cosmetic: #484f58;
  --dmn-dh-arrow: #79c0ff;
  --dmn-dh-fname: #79c0ff;
  --dmn-dh-etype: #d2a8ff;
  --dmn-dh-fval-from: #f85149;
  --dmn-dh-fval-to: #3fb950;
}

Then pass the class:

const html = highlightDiff(text, { className: 'github-dark' });

All CSS custom properties

See Types for the full list of custom properties and their defaults.