RexSkz/json-diff-kit

Sytax highligting with prism

TipicultBiomassa opened this issue · 2 comments

TipicultBiomassa commented

How can i do sytax highligting? For example with prism. Is it possible with default viewer?

RexSkz commented

Good idea! It's not supported now, but I will implement it in Viewer.

Prism is a good syntax-highlighting library (I use it in many projects), but it's too wasteful to highlight JSON, and I need to take some extra steps to align the unchanged lines.

I'll add a new prop to Differ:

interface DifferOptions {
  outputTokens?: boolean;
}

It will add a field tokens to each DiffResult item. The Viewer will automatically enable the syntax highlight feature if the field exists.

There will also be a new prop to Viewer:

interface ViewerProps {
  syntaxHighlightTheme?: string;
}

It will add a class json-diff-viewer-theme-${syntaxHighlightTheme} to the viewer for CSS to take effect.

I'll provide a theme "monokai" first (which is my favourite theme). Other themes may be added in future (by me or by others).

RexSkz commented

Sorry for being late; I've finished the syntax highlight feature, but the usage is different from the beginning since there're inline diff and I need to handle the two segment array (inline diff result & syntax highlight result) in <Viewer> component.

The playground has been updated, just check the "syntax highlight" checkbox on the left to enable it:

image

The usage in your code is simple:

  1. Add syntaxHighlight={{ theme: 'monokai' }} to the <Viewer> component is enough (other theme values are ok, it will enable the syntax highlight feature and add a className json-diff-viewer-theme-monokai to the DOM).
  2. Import the CSS which has the corresponding theme. For now I only support the monokai theme, which is at 'json-diff-kit/dist/viewer-monokai.css', you can write your own theme according to this file.