Comments (2)
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).
from json-diff-kit.
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:
The usage in your code is simple:
- Add
syntaxHighlight={{ theme: 'monokai' }}
to the<Viewer>
component is enough (othertheme
values are ok, it will enable the syntax highlight feature and add a classNamejson-diff-viewer-theme-monokai
to the DOM). - 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.
from json-diff-kit.
Related Issues (20)
- Error [ERR_MODULE_NOT_FOUND]: Cannot find package HOT 1
- Performance issue when large jsons are diff HOT 3
- SyntaxError: Cannot use import statement outside a module HOT 4
- Comparing a non object with a object produces a non beautified object. HOT 1
- Add "ignoreCaseForKey" for Differ HOT 1
- Type Error : Object is being assigned to a read-only property HOT 1
- Possible configuration for changing the highlighter color in Viewer HOT 1
- Comparing array from the end in some cases HOT 2
- Null problem HOT 2
- Comparing array with the same array with added object produces a non beautified object HOT 3
- Key order wasn't respected HOT 8
- `undefined` results in error HOT 6
- 'Show lines before' button is not working properly when there is no difference HOT 2
- When json contains more than the maximum integer allowed by js, precision is lost HOT 2
- Output html HOT 6
- Plans to split into packages?
- Request for Vue HOT 2
- With large JSON data, the buttons "Show line after/before" not working HOT 2
- Error `Unexpected token 'export'` when using with Remix/Vite
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from json-diff-kit.