Skip to content

Commit 8431603

Browse files
Enabled syntax highlighting
1 parent 7a60104 commit 8431603

File tree

1 file changed

+15
-15
lines changed

1 file changed

+15
-15
lines changed

README.md

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,27 +17,27 @@ Check http://fiduswriter.github.io/diffDOM for demo and tests.
1717
## Usage
1818

1919
Include the diffDOM.js file in your HTML like this:
20-
```
20+
```html
2121
<script src="diffDOM.js">
2222
```
2323
2424
Or like this in node/browserify:
25-
```
25+
```js
2626
var diffDOM = require("diff-dom");
2727
```
2828
2929
Then create an instance of diffDOM within the javascript code:
30-
```
30+
```js
3131
dd = new diffDOM();
3232
```
3333
3434
Now you can create a diff to get from dom elementA to dom elementB like this:
35-
```
35+
```js
3636
diff = dd.diff(elementA, elementB);
3737
```
3838
3939
You can now apply this diff like this:
40-
```
40+
```js
4141
dd.apply(elementA, diff);
4242
```
4343
Now elementA will have been changed to be structurally equal to elementB.
@@ -47,7 +47,7 @@ Now elementA will have been changed to be structurally equal to elementB.
4747
#### Undo
4848
4949
Continuing on from the previous example, you can also undo a diff, like this:
50-
```
50+
```js
5151
dd.undo(elementA, diff);
5252
```
5353
Now elementA will be what it was like before applying the diff.
@@ -57,19 +57,19 @@ Now elementA will be what it was like before applying the diff.
5757
If you need to move diffs from one machine to another one, you will likely want to send the diffs through a websocket connection or as part of a form submit. In both cases you need to convert the diff to a json string.
5858
5959
To convert a diff to a json string which you can send over the network, do:
60-
```
60+
```js
6161
diffJson = JSON.stringify(diff);
6262
```
6363
6464
On the receiving end you then need to unpack it like this:
65-
```
65+
```js
6666
diff = JSON.parse(diffJson);
6767
```
6868
6969
#### Error handling when patching/applying
7070
7171
Sometimes one may try to patch an elment without knowing whether the patch actually will apply cleanly. This should not be a problem. If diffDOM determines that a patch cannot be executed, it will simple return false. Else it will return true:
72-
```
72+
```js
7373
result = dd.apply(element, diff);
7474
7575
if (result) {
@@ -81,7 +81,7 @@ if (result) {
8181
#### Advanced merging of text node changes
8282
8383
diffDOM does not include merging for changes to text nodes. However, it includes hooks so that you can add more advanced handling. Simple overwrite the textDiff function of the diffDOM instance. The functions TEXTDIFF and TEXTPATCH need to be defined in the code:
84-
```
84+
```js
8585
dd = new diffDOM({
8686
textDiff: function (node, currentValue, expectedValue, newValue) {
8787
if (currentValue===expectedValue) {
@@ -101,7 +101,7 @@ dd = new diffDOM({
101101
102102
diffDOM provides extension points before and after virtual and actual diffs, exposing some of the internals of the diff algorithm, and allowing you to make additional decisions based on that information.
103103
104-
```
104+
```js
105105
dd = new diffDOM({
106106
preVirtualDiffApply: function (info) {
107107
console.log(info);
@@ -120,7 +120,7 @@ dd = new diffDOM({
120120
121121
Additionally, the _pre_ hooks allow you to shortcircuit the standard behaviour of the diff by returning 'true' from this callback. This will cause the diffApply functions to return prematurely, skipping their standard behaviour.
122122
123-
```
123+
```js
124124
dd = new diffDOM({
125125
// prevent removal of attributes
126126
preDiffApply: function (info) {
@@ -136,7 +136,7 @@ dd = new diffDOM({
136136
137137
diffDOM also provides a way to filter outer diff
138138
139-
```
139+
```js
140140
dd = new diffDOM({
141141
filterOuterDiff: function(t1, t2, diffs) {
142142
// can change current outer diffs by returning a new array,
@@ -152,7 +152,7 @@ dd = new diffDOM({
152152
#### Debugging
153153
154154
For debugging you might want to set a max number of diff changes between two elements before diffDOM gives up. To allow for a maximum of 500 differences between elements when diffing, initialize diffDOM like this:
155-
```
155+
```js
156156
dd = new diffDOM({
157157
debug: true,
158158
diffcap: 500
@@ -163,7 +163,7 @@ dd = new diffDOM({
163163
164164
For forms that have been filled out by a user in ways that have changed which value is associated with an input field or which options are checked/selected without
165165
the DOM having been updated, the values are diffed. For use cases in which no changes have been made to any of the form values, one may choose to skip diffing the values. To do this, hand `false` as a third configuration option to diffDOM:
166-
```
166+
```js
167167
dd = new diffDOM({
168168
valueDiffing: false
169169
});

0 commit comments

Comments
 (0)