diff --git a/HISTORY.md b/HISTORY.md
index 46bdbae..e0a0fd4 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -7,6 +7,9 @@ https://github.com/josdejong/jsoneditor
- Implemented new option `maxVisibleChilds` to customize the maximum number
childs that is rendered by default. Thanks @20goto10.
+- Implemented new option `onClassName`, allowing customized and dynamic
+ styling of nodes. See 20_custom_css_style_for_nodes.html for a demo.
+ Thanks @maestr0.
## 2019-01-16, version 5.27.1
diff --git a/examples/20_custom_css_style_for_nodes.html b/examples/20_custom_css_style_for_nodes.html
index 99a5a90..d833e83 100644
--- a/examples/20_custom_css_style_for_nodes.html
+++ b/examples/20_custom_css_style_for_nodes.html
@@ -11,8 +11,8 @@
font: 10.5pt arial;
color: #4d4d4d;
line-height: 150%;
- width: 500px;
- padding-left: 40px;
+ width: 100%;
+ padding-left: 10px;
}
code {
@@ -20,17 +20,16 @@
}
#containerLeft {
- width: 500px;
- height: 500px;
- float: left;
- }
- #containerRight {
+ display: inline-block;
width: 500px;
height: 500px;
- float: right;
+ margin-right: 10px;
}
- #wrapper {
- width: 1000px;
+
+ #containerRight {
+ display: inline-block;
+ width: 500px;
+ height: 500px;
}
#containerRight .different_element {
background-color: greenyellow !important;
@@ -42,8 +41,10 @@
+JSON Diff
- JSON Diff
+ This example highlights the differences between two JSON objects using the option onClassName.
+ Make a change in the left or right editor to see the changes update accordingly.