forked from prettydiff/prettydiff
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprettydiff.com.xhtml
536 lines (536 loc) · 47.3 KB
/
prettydiff.com.xhtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>
<html xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Pretty Diff - The difference tool</title>
<meta content="index, follow" name="robots"/>
<meta content="Pretty Diff - The difference tool" name="DC.title"/>
<link href='http://prettydiff.com' rel='canonical' type='application/xhtml+xml'/>
<link href="http://prettydiff.com/images/favicon.ico" rel="icon" type="image/x-icon"/>
<link href="http://prettydiff.com/labels.rdf" rel="meta" title="ICRA labels" type="application/rdf+xml"/>
<meta content='(pics-1.1 "http://www.icra.org/pics/vocabularyv03/" l gen true for "http://prettydiff.com" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 1) gen true for "http://www.prettydiff.com" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 1))' http-equiv="pics-Label"/>
<meta content="Austin Cheney" name="author"/>
<meta content="Pretty Diff tool can minify, beautify (pretty-print), or diff between minified and beautified code. This tool can even beautify and minify HTML." name="description"/>
<meta content="Global" name="distribution"/>
<meta content="en" http-equiv="Content-Language"/>
<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type"/>
<meta content="blendTrans(Duration=0)" http-equiv="Page-Enter"/>
<meta content="blendTrans(Duration=0)" http-equiv="Page-Exit"/>
<meta content="text/css" http-equiv="content-style-type"/>
<meta content="application/javascript" http-equiv="content-script-type"/>
<meta content="qL8AV9yjL2-ZFGV9ey6wU3t7pTZdpD4lIetUSiNen7E" name="google-site-verification"/>
<meta content="#bbbbff" name="msapplication-TileColor"/>
<meta content="images/pdlogo.svg" name="msapplication-TileImage"/>
<link href="humans.txt" rel="author" type="text/plain"/>
<link href="diffview.css" media="all" rel="stylesheet" type="text/css"/>
</head>
<body class="shadow" id="webtool">
<ul class="default" id="displayOps">
<li><button id="resetOptions" title="Clicking this button will clear all stored data and reset all options to the default configuration. I recommend refreshing the page after clicking this button." type="button">Reset
Options</button></li>
<li><button id="hideOptions" title="Clicking this button will visually hide everything except for textarea elements and one 'Execute' button." type="button">Maximize
Inputs</button></li>
</ul>
<div id="top">
<h1 title="Pretty Diff is a language aware code comparison tool featuring automatic language detection. Some of the supported languages include: XML, SGML, JSTL, HTML, CSS, SCSS, CSV, JavaScript, and JSON">
<svg height="2000.000000pt" preserveAspectRatio="xMidYMid meet" version="1.0" viewBox="0 0 2000.000000 2000.000000" width="2000.000000pt" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0.000000,2000.000000) scale(0.100000,-0.100000)" fill="#999" stroke="none"><path d="M14871 18523 c-16 -64 -611 -2317 -946 -3588 -175 -660 -319 -1202 -320 -1204 -2 -2 -50 39 -107 91 -961 876 -2202 1358 -3498 1358 -1255 0 -2456 -451 -3409 -1279 -161 -140 -424 -408 -560 -571 -507 -607 -870 -1320 -1062 -2090 -58 -232 -386 -1479 -2309 -8759 -148 -563 -270 -1028 -270 -1033 0 -4 614 -8 1365 -8 l1364 0 10 38 c16 63 611 2316 946 3587 175 660 319 1202 320 1204 2 2 50 -39 107 -91 543 -495 1169 -862 1863 -1093 1707 -568 3581 -211 4965 946 252 210 554 524 767 796 111 143 312 445 408 613 229 406 408 854 525 1320 57 225 380 1451 2310 8759 148 563 270 1028 270 1033 0 4 -614 8 -1365 8 l-1364 0 -10 -37z m-4498 -5957 c477 -77 889 -256 1245 -542 523 -419 850 -998 954 -1689 18 -121 18 -549 0 -670 -80 -529 -279 -972 -612 -1359 -412 -480 -967 -779 -1625 -878 -121 -18 -549 -18 -670 0 -494 74 -918 255 -1283 548 -523 419 -850 998 -954 1689 -18 121 -18 549 0 670 104 691 431 1270 954 1689 365 293 828 490 1283 545 50 6 104 13 120 15 72 10 495 -3 588 -18z"/></g></svg>
<span id="title_text">Pretty Diff - The difference tool</span></h1>
<div id="introduction"><h2>Introduction</h2>
<p class="information">Use this free open-source file comparison tool to
accurately diff between file versions
<em>regardless of comments or minification</em>
to the whitespace. This tool is written entirely in JavaScript and it can
also beautify (pretty-print) and minify HTML. Since this tool is
client-side JavaScript only, meaning that the execution occurs on the
local computer only and the resulting output is not transmitted or
stored, it is safe for processing classified information. Please note
that this tool is not a validation service.</p>
<p><strong>Confidential:</strong>
This tool executes entirely on the client computer without leaking any
submitted data over the internet.</p>
<ul>
<li><a href="documentation.xhtml">English documentation</a></li>
<li><a href="http://www.webhostinghub.com/support/es/misc/diff-documentacion">Español documentación</a></li>
</ul>
<ul>
<li><a href="samples.xhtml">samples</a></li>
<li><a href="https://groups.google.com/d/forum/pretty-diff">mailing list</a></li>
<li><a href="https://github.com/austincheney/Pretty-Diff">GitHub</a></li>
<li><a href="api/node-local.js">Node.js</a></li>
<li><a href="api/prettydiff.wsf">WSH</a></li>
<li><a href="jspretty.xhtml">JSPretty</a></li>
<li><a href="http://g6auc.me.uk/widgets.html">JSPretty Widget</a></li>
</ul>
<p id="announcement">To stay informed of critical updates and new features join the <a href="https://groups.google.com/d/forum/pretty-diff">mailing list</a>.</p>
<p id="update">Updated:
</p>
<span class="clear"></span>
</div>
</div>
<div id="reports"><h2>Reporting data which updates with each use of the
tool</h2>
<div class="box" id="diffreport">
<p style="display:none" class="buttons">
<a href="#" onclick="pd.save(this);"><button class="save" title="Convert diff report to text that can be saved.">S</button></a>
<button class="minimize" onclick="pd.minimize(this);" title="Minimize this dialogue ">↑</button>
<button class="maximize" onclick="pd.maximize(this);" title="Maximize this dialogue to the browser window.">↑</button>
<button class="resize" onmousedown="pd.resize(event, this);" title="Resize this dialogue.">↔</button></p>
<h3 class="heading" title="Grab this title element to open this dialogue or move it around around the screen."><span>Diff
Report</span></h3>
<div class="body" id="diffreportbody" onclick="pd.top(this.parentNode);" style="display:none"></div>
</div>
<div class="box" id="beaureport">
<p style="display:none" class="buttons">
<button class="minimize" onclick="pd.minimize(this);" title="Minimize this dialogue ">↑</button>
<button class="maximize" onclick="pd.maximize(this);" title="Maximize this dialogue to the browser window.">↑</button>
<button class="resize" onmousedown="pd.resize(event, this);" title="Resize this dialogue.">↔</button></p>
<h3 class="heading" title="Grab this title element to open this dialogue or move it around the screen."><span>Beautify
Report</span></h3>
<div class="body" id="beaureportbody" onclick="pd.top(this.parentNode);" style="display:none"></div>
</div>
<div class="box" id="minreport">
<p style="display:none" class="buttons">
<button class="minimize" onclick="pd.minimize(this);" title="Minimize this dialogue ">↑</button>
<button class="maximize" onclick="pd.maximize(this);" title="Maximize this dialogue to the browser window.">↑</button>
<button class="resize" onmousedown="pd.resize(event, this);" title="Resize this dialogue.">↔</button></p>
<h3 class="heading" title="Grab this title element to open this dialogue or move it around the screen."><span>Minify
Report</span></h3>
<div class="body" id="minreportbody" onclick="pd.top(this.parentNode);" style="display:none"></div>
</div>
<div class="box" id="statreport">
<p style="display:none" class="buttons">
<button class="minimize" onclick="pd.minimize(this);" title="Minimize this dialogue ">↑</button>
<button class="maximize" onclick="pd.maximize(this);" title="Maximize this dialogue to the browser window.">↑</button>
<button class="resize" onmousedown="pd.resize(event, this);" title="Resize this dialogue.">↔</button></p>
<h3 class="heading" title="Grab this title element to open this dialogue or move it around the screen."><span>Usage
Statistics</span></h3>
<div class="body" id="statreportbody" onclick="pd.top(this.parentNode);" style="display:none">
<div><h3>General statistics</h3>
<ul><li>Total number of visits:
<strong id="stvisit">0</strong></li>
<li>Total usage count:
<strong id="stusage">0</strong></li>
<li>Start date of logging:
<strong id="stfdate"></strong>
</li>
<li>Average visits per day:
<strong id="stavday">0</strong></li>
<li>Largest code source:
<strong id="stlarge">0</strong>
characters</li>
</ul>
</div>
<div><h3>Usage statistics</h3>
<ul><li>Diff:
<strong id="stdiff">0</strong></li>
<li>Beautification:
<strong id="stbeau">0</strong></li>
<li>Minification:
<strong id="stminn">0</strong></li>
</ul>
</div>
<div><h3>Language statistics</h3>
<ul><li>Markup:
<strong id="stmarkup">0</strong></li>
<li>JavaScript:
<strong id="stjs">0</strong></li>
<li>CSS:
<strong id="stcss">0</strong></li>
<li>CSV:
<strong id="stcsv">0</strong></li>
<li>Plain text:
<strong id="sttext">0</strong></li>
</ul>
</div>
</div>
</div>
</div>
<div class="options" id="options"><h2>Main Options</h2>
<p><label class="label" for="colorScheme">Color Scheme</label>
<select id="colorScheme"><option>Default</option><option>Coffee</option><option>Dark</option><option>Canvas</option><option selected="selected">Shadow</option><option>White</option></select>
</p>
<p><strong>Function</strong>
<span>
<input checked="checked" id="modediff" name="mode" title="This option tells the tool to generate a diff (code comparison) report." type="radio"/>
<label for="modediff">Compare Code</label></span>
<span>
<input id="modebeautify" name="mode" title="This option tells the tool to return well formatted code." type="radio"/>
<label for="modebeautify">Beautify Code</label></span>
<span>
<input id="modeminify" name="mode" title="This option tells thetool to return white space compressed code." type="radio"/>
<label for="modeminify">Minify Code</label></span>
</p>
<p><label class="label" for="language">Code type</label>
<select id="language"><option selected="selected" value="auto">Auto
Detect</option><option value="css">CSS</option><option value="csv">CSV</option><option value="html">HTML</option><option value="javascript">JavaScript</option><option value="javascript">JSON</option><option value="markup">JSTL</option><option value="markup">markup
(non-specific)</option><option value="text">Plain
Text</option><option value="css">SCSS
(SASS)</option><option value="markup">SGML</option><option value="markup">XML</option></select>
</p>
<p id="csvcharp" style="display:none;"><label class="label" for="csvchar">Character
Separator</label>
<input id="csvchar" onkeyup="pd.options(this);" title="If the language type is set to CSV this field will allow definition of the separating character. Please read the documentation for advanced usage." type="text" value=","/></p>
<p><strong>Input display</strong>
<span>
<input checked="checked" id="difftall" name="diffdisplay" title="This option visually orients the base text field to the left of the new text field, or for beautify and minify modes orients the input field to the left of the output field." type="radio"/>
<label for="difftall">Orient Vertically</label></span>
<span>
<input id="diffwide" name="diffdisplay" title="This option visually orients the base text field above the new text field, or for beautify and minify modes orients the input field vertically above the output field." type="radio"/>
<label for="diffwide">Orient Horizontally</label></span>
</p>
<p><strong>Additional options</strong>
<span>
<input checked="checked" id="additional_no" name="additional" title="Click me to hide extra options and controls." type="radio"/>
<label for="additional_no">Hide additional options</label></span>
<span>
<input id="additional_yes" name="additional" title="Click me to show extra options and controls." type="radio"/>
<label for="additional_yes">Show additional options</label></span>
</p>
<p><label class="label" for="option_comment">Pretty Diff Comment</label><textarea cols="30" id="option_comment" readonly="readonly" rows="2" title="This area contains a configuration string as a code comment. This string can be applied to the top of JavaScript and CSS code to supply instructions to the Pretty Diff tool without need to set options in the user interface.">/*prettydiff.com
*/</textarea></p>
</div>
<div id="codeInput">
<div class="difftall" id="diffBase"><h2>Base Text</h2>
<p class="labeltext"><input id="baselabel" type="text" value="base"/>
<label for="baselabel">Base label (optional)</label></p>
<p class="file"><input id="diffbasefile" multiple="multiple" type="file"/>
<label for="diffbasefile">Base source file</label></p>
<p class="input"><label class="difflabel" for="baseText">Base code for
diff</label>
<textarea cols="80" id="baseText" rows="10" wrap="off"></textarea>
</p>
</div>
<div class="difftall" id="diffNew"><h2>New Text</h2>
<p class="labeltext"><input id="newlabel" type="text" value="new"/>
<label for="newlabel">New label (optional)</label></p>
<p class="file"><input id="diffnewfile" multiple="multiple" type="file"/>
<label for="diffnewfile">New source file</label></p>
<p class="input"><label class="difflabel" for="newText">New code for
diff</label>
<textarea cols="80" id="newText" rows="10" wrap="off"></textarea>
</p>
</div>
<div class="tall" id="Beautify" style="display:none;"><h2 title="The term pretty-print is synonymous with code beautification.">Beautify
Code</h2>
<p class="file"><input id="beautyfile" multiple="multiple" onchange="pd.file(this.files, this)" type="file"/>
<label for="beautyfile">Beautify local file</label></p>
<p class="input"><label for="beautyinput">Beautification input</label>
<textarea cols="80" id="beautyinput" onkeyup="pd.recycle(event);" rows="10" wrap="off"></textarea>
</p>
<p class="output"><label class="outputlabel" for="beautyoutput">Beautification
output</label>
<textarea cols="40" id="beautyoutput" name="paste_code" readonly="readonly" rows="10" wrap="off"></textarea>
</p>
<span class="clear"></span>
</div>
<div class="tall" id="Minify" style="display:none;"><h2>Minify Code</h2>
<p class="file"><input id="minifyfile" multiple="multiple" onchange="pd.file(this.files, this)" type="file"/>
<label for="minifyfile">Minify local file</label></p>
<p class="input"><label for="minifyinput">Minification input</label>
<textarea cols="80" id="minifyinput" onkeyup="pd.recycle(event);" rows="10" wrap="off"></textarea>
</p>
<p class="output"><label class="outputlabel" for="minifyoutput">Minification
output</label>
<textarea cols="40" id="minifyoutput" readonly="readonly" rows="10" wrap="off"></textarea>
</p>
<span class="clear"></span>
</div>
</div>
<p id="button-primary" class="button"><button type="button" value="Execute">Execute</button></p>
<div id="addOptions" style="display:none">
<div class="options" id="diffops"><h2>Diff Options</h2>
<fieldset><legend>Diff Report Options</legend>
<p><strong>Print or Save Output</strong>
<span>
<input id="diff-save" onclick="pd.options(this);" title="A diff report formatting option. Checking this option returns plain text code of the diff report instead of parsed HTML. The intention here is to allow users to copy the text and paste it into a text editor in order to save down the diff report." type="checkbox"/>
<label for="diff-save">— Generates HTML report as raw text inside
a text area.</label></span>
</p>
<p><label class="label" for="contextSize">Context size
(optional)</label>
<span>
<input id="contextSize" onkeyup="pd.options(this);" title="A diff report formatting option. If the value is empty or, not 0, or not a positive integer then a diff is generated showing the entirety of the code samples. If the value is 0 or a positive integer then this value dictates how many 'equal' lines of code will display in the report between lines with differences." type="text" value=""/>
<label for="contextSize">— This sets number of lines of code to
pad the differences.</label></span>
</p>
<p><strong>Diff View Type</strong>
<span>
<input checked="checked" id="sidebyside" name="_viewtype" onclick="pd.options(this);" title="This diff report option determines whether the diff report will show a table with columns for each code sample for a left and right comparison." type="radio"/>
<label for="sidebyside">Side by Side View</label></span>
<span>
<input id="inline" name="_viewtype" onclick="pd.options(this);" title="This diff option will generate a diff report with only one column and two rows dedicated to each different line of code." type="radio"/>
<label for="inline">Inline View</label></span>
</p>
</fieldset>
<fieldset><legend>Difference Reduction Options</legend>
<p><strong>Diff Quotes</strong>
<span><input checked="checked" id="diffquotey" name="diffquote" onclick="pd.options(this);" title="This option will report single quote characters and double quote characters as differences." type="radio"/><label for="diffquotey">Diff
Quotes Literally</label></span>
<span><input id="diffquoten" name="diffquote" onclick="pd.options(this);" title="This option will convert all single quote characters to double quote characters so as to reduce the number of total code differences from the diff report." type="radio"/><label for="diffquoten">Normalize
Single Quote Characters to Double Quote Characters</label></span>
</p>
<p><strong>Trailing Semicolons</strong>
<span><input checked="checked" id="diffscolony" name="diffscolon" onclick="pd.options(this);" title="This option will prevent the tool from removing semicolons at the end of lines of code so as to preserve the integrity of the code samples in the diff report." type="radio"/><label for="diffscolony">Diff
Semicolons</label></span>
<span><input id="diffscolonn" name="diffscolon" onclick="pd.options(this);" title="This option will remove all trailing semicolons so as to reduce the number of potential differences from the diff report." type="radio"/><label for="diffscolonn">Remove
Trailing Semicolons</label></span>
</p>
<p><strong>Code Comments</strong>
<span><input checked="checked" id="diffcommentsn" name="diffcomments" onclick="pd.options(this);" title="This option will remove all code comments from the diff analysis. This effect of this option can be partially overridden when selecting the option 'Preserve HTML conditional comments' for HTML." type="radio"/><label for="diffcommentsn">Remove
Code Comments</label></span>
<span><input id="diffcommentsy" name="diffcomments" onclick="pd.options(this);" title="This option will allow comparison of all comments and code." type="radio"/><label for="diffcommentsy">Compare
Code and Comments</label></span>
</p>
<p><strong>Ignore Content (Markup / JavaScript)</strong>
<span>
<input checked="checked" id="diffcontenty" name="diffcontent" onclick="pd.options(this);" title="This option maintains document integrity with regard to markup content and JavaScript string contents." type="radio"/>
<label for="diffcontenty">Diff Content Literally</label></span>
<span>
<input id="diffcontentn" name="diffcontent" onclick="pd.options(this);" title="This option removes content from markup or string contents from JavaScript so as to allow comparison of syntax only." type="radio"/>
<label for="diffcontentn">Normalize Content and String Literals</label></span>
</p>
</fieldset>
<fieldset id="diffbeautify"><legend>Beautification Options</legend>
<p id="diffquanp"><label class="label" for="diff-quan">Indentation
Size</label>
<span>
<input id="diff-quan" onkeyup="pd.options(this);" title="This text field expects a value of 0 or a positive integer. The number provided dictates how many characters constitute a single indentation of formatted code." type="text" value="4"/>
</span>
</p>
<p id="difftypep"><label class="label" for="diff-char">Indentation
Character</label>
<span>
<input class="unchecked" id="diff-char" onclick="pd.indentchar(this);" onkeyup="pd.options(this);" title="Accessibility Note:In order for this field to be accepted by the application the radio button labeled 'Indent with Other Characters' must be checked. This text field allows entry of any text characters to constitute indentation." type="text" value="Click me for custom input"/>
</span>
<span id="diff-other-span">
<input id="diff-other" name="diffchar" onclick="pd.indentchar(this);" title="This option is only provided for functional reasons so as to enable the 'diff-char' text field and ignore its peer radio buttons from the application." type="radio"/>
<label for="diff-other">Indent with Other Characters</label></span>
<span>
<input checked="checked" id="diff-space" name="diffchar" onclick="pd.indentchar(this);" title="This option indicates a space character will be the character of indentation." type="radio"/>
<label for="diff-space">Indent Space</label></span>
<span>
<input id="diff-tab" name="diffchar" onclick="pd.indentchar(this);" title="This option makes a tab character the character of indentation." type="radio"/>
<label for="diff-tab">Indent Tab</label></span>
<span>
<input id="diff-line" name="diffchar" onclick="pd.indentchar(this);" title="This option makes a new line character the character of indentation." type="radio"/>
<label for="diff-line">Indent New Line</label></span>
</p>
<p><label class="label" for="diff-wrap">Wrap Text (Markup Only)</label>
<span><input id="diff-wrap" onkeyup="pd.options(this);" title="Determines how long text can be before wrapping. Use a value of 0 to eliminate wrapping." type="text" value="72"/></span></p>
<p><strong>Style of Indent (JavaScript Only)</strong>
<span>
<input checked="checked" id="jsindentd-knr" name="jsindentdiff" onclick="pd.options(this);" title="This JavaScript only option sets opening curly braces at the end of the current line of code." type="radio"/>
<label for="jsindentd-knr">K&R Style</label></span>
<span>
<input id="jsindentd-all" name="jsindentdiff" onclick="pd.options(this);" title="This JavaScript only option moves opening curly braces onto a new line for visibility of brace contents apart from other code." type="radio"/>
<label for="jsindentd-all">Allman (ANSI) Style — Sets opening
curly braces on a new line.</label></span>
</p>
<p><strong>Indent Style/Script (Markup Only)</strong>
<span>
<input checked="checked" id="inscriptd-yes" name="inscriptd" onclick="pd.options(this);" title="This markup only option sets the baseline for script and style definition from the identation point of the opening markup tag plus one indentation step." type="radio"/>
<label for="inscriptd-yes">Indent to Markup</label></span>
<span>
<input id="inscriptd-no" name="inscriptd" onclick="pd.options(this);" title="This option sets the indentation baseline for script and style code to 0 regardless of surrounding markup." type="radio"/>
<label for="inscriptd-no">Indent Style/Script Independently</label></span>
</p>
<p><strong>Presume HTML (Markup Only)</strong>
<span>
<input checked="checked" id="htmld-no" name="presumehtmld" onclick="pd.options(this);" title="Use this option to ignore HTML specific vocabulary and instead focus purely on syntax." type="radio"/>
<label for="htmld-no">Not SGML type HTML</label></span>
<span>
<input id="htmld-yes" name="presumehtmld" onclick="pd.options(this);" title="This option determines whether HTML tags like <br> and lt;hr> should be evaluated as singletons, such as <br/> and lt;hr/>." type="radio"/>
<label for="htmld-yes">Presume SGML type HTML</label></span>
</p>
<p><strong>IE Comments (HTML Only)</strong>
<span>
<input checked="checked" id="conditionald-no" name="conditionald" onclick="pd.options(this);" title="Use this option to remove HTML contitional comments used by Internet Explorer." type="radio"/>
<label for="conditionald-no">Remove all comments</label></span>
<span>
<input id="conditionald-yes" name="conditionald" onclick="pd.options(this);" title="Use this option to keep HTML contitional comments used by Internet Explorer." type="radio"/>
<label for="conditionald-yes">Preserve HTML conditional comments</label></span>
</p>
<p><strong>Force Indentation (Markup Only)</strong>
<span>
<input checked="checked" id="dforce_indent-no" name="dforce_indent" onclick="pd.options(this);" title="This markup only option maintains document integrity with regard to indentation that would create text nodes adjacent to content that did not exist before." type="radio"/>
<label for="dforce_indent-no">Maintain code integrity</label></span>
<span>
<input id="dforce_indent-yes" name="dforce_indent" onclick="pd.options(this);" title="This markup only option forces indentation for all content and elements without regard for integrity of document structure or content." type="radio"/><label for="dforce_indent-yes">Always
force indentation</label></span>
</p>
<p><strong>Function Space (JavaScript Only)</strong>
<span>
<input checked="checked" id="jsspaced-yes" onclick="pd.options(this);" title="This JavaScript only option retains a single space between the 'function' keyword and the opening parenthesis character of anonymous functions." type="radio"/>
<label for="jsspaced-yes">Retain Function Space</label></span>
<span>
<input id="jsspaced-no" onclick="pd.options(this);" title="This JavaScript only option removes a single space between the 'function' keyword and the opening parenthesis character of anonymous functions." type="radio"/>
<label for="jsspace-no">Remove Space Following Function</label></span>
</p>
<p><strong>Empty Lines (JavaScript Only)</strong>
<span>
<input checked="checked" id="jslinesd-yes" onclick="pd.options(this);" title="This JavaScript only option retains a single empty line for each series of empty lines of code input." type="radio"/>
<label for="jslinesd-yes">Remove Empty Lines</label></span>
<span>
<input id="jslinesd-no" onclick="pd.options(this);" title="This JavaScript only option removes all empty lines." type="radio"/>
<label for="jslinesd-no">Remove Empty Lines</label></span>
</p>
</fieldset>
</div>
<div class="options" id="beauops" style="display:none;"><h2 title="The term pretty-print is synonymous with code beautification.">Beautify
Options</h2>
<fieldset><legend>Basic Options</legend>
<p><label class="label" for="beau-quan">Indentation Size</label>
<span>
<input id="beau-quan" title="This text field expects a value of 0 or a positive integer. The number provided dictates how many characters constitute a single indentation of formatted code." type="text" value="4"/>
</span>
</p>
<p><label class="label" for="jsinlevel">Indentation Offset (JavaScript Only)</label>
<span>
<input id="jsinlevel" title="This text field expects a value of 0 or a positive integer. This value supplies addition indentation, or padding, as an offset." type="text" value="0"/>
</span>
</p>
<p><label class="label" for="beau-char">Indentation Character</label>
<span>
<input class="unchecked" id="beau-char" title="Accessibility Note:In order for this field to be accepted by the application the radio button labeled 'Indent with Other Characters' must be checked. This text field allows entry of any text characters to constitute indentation." type="text" value="Click me for custom input"/>
</span>
<span id="beau-other-span">
<input id="beau-other" name="beauchar" onclick="pd.indentchar(this);" title="This option is only provided for functional reasons so as to enable the 'beau-char' text field and ignore its peer radio buttons from the application." type="radio"/>
<label for="beau-other">Indent with Other Characters</label></span>
<span>
<input checked="checked" id="beau-space" name="beauchar" title="This option indicates a space character will be the character of indentation." type="radio"/>
<label for="beau-space">Indent Space</label></span>
<span>
<input id="beau-tab" name="beauchar" title="This option makes a tab character the character of indentation." type="radio"/>
<label for="beau-tab">Indent Tab</label></span>
<span>
<input id="beau-line" name="beauchar" title="This option makes a new line character the character of indentation." type="radio"/>
<label for="beau-line">Indent New Line</label></span>
</p>
</fieldset>
<fieldset><legend>Advanced Options</legend>
<p><label class="label" for="beau-wrap">Wrap Text (Markup Only)</label>
<span><input id="beau-wrap" onkeyup="pd.options(this);" title="Determines how long text can be before wrapping. Use a value of 0 to eliminate wrapping." type="text" value="72"/></span></p>
<p><strong>Scope Analysis (JavaScript Only)</strong>
<span>
<input checked="checked" id="jsscope-no" name="jsscope" onclick="pd.options(this);" title="This option will causes standard text beautification for JavaScript" type="radio"/>
<label for="jsscope-no">Standard Beautification</label></span>
<span>
<input id="jsscope-yes" name="jsscope" title="This option will display a colorful HTML output of the code that color codes variables to the scope they are declared so as to illustrate the nature of closure and inheritance." type="radio"/>
<label for="jsscope-yes">Scope Analysis Output</label></span>
</p>
<p><strong>Indent Comments</strong>
<span>
<input checked="checked" id="incomment-yes" name="incomment" onclick="pd.options(this);" title="This option will cause comments to be indented." type="radio"/>
<label for="incomment-yes">Indent Comments</label></span>
<span>
<input id="incomment-no" name="incomment" title="This option will force comments to the start of the line without the benefit of indentation." type="radio"/>
<label for="incomment-no">No Comment Indentation</label></span>
</p>
<p><strong>Style of Indent (JavaScript Only)</strong>
<span>
<input checked="checked" id="jsindent-knr" name="jsindent" onclick="pd.options(this);" title="This JavaScript only option sets opening curly braces at the end of the current line of code." type="radio"/>
<label for="jsindent-knr">K&R Style</label></span>
<span>
<input id="jsindent-all" name="jsindent" title="This JavaScript only option moves opening curly braces onto a new line for visibility of brace contents apart from other code." type="radio"/>
<label for="jsindent-all">Allman (ANSI) Style — Sets opening curly
braces on a new line.</label></span>
</p>
<p><strong>Indent Style/Script (Markup Only)</strong>
<span>
<input checked="checked" id="inscript-yes" name="inscript" onclick="pd.options(this);" title="This markup only option sets the baseline for script and style definition from the identation point of the opening markup tag plus one indentation step." type="radio"/>
<label for="inscript-yes">Indent to Markup</label></span>
<span>
<input id="inscript-no" name="inscript" onclick="pd.options(this);" title="This option sets the indentation baseline for script and style code to 0 regardless of surrounding markup." type="radio"/>
<label for="inscript-no">Indent Script/Style Independently</label></span>
</p>
<p><strong>Presume HTML (Markup Only)</strong>
<span>
<input checked="checked" id="html-no" name="presumehtml" onclick="pd.options(this);" title="Use this option to ignore HTML specific vocabulary and instead focus purely on syntax." type="radio"/>
<label for="html-no">Not SGML type HTML</label></span>
<span>
<input id="html-yes" name="presumehtml" onclick="pd.options(this);" title="This option determines whether HTML tags like <br> and lt;hr> should be evaluated as singletons, such as <br/> and lt;hr/>." type="radio"/>
<label for="html-yes">Presume SGML type HTML</label></span>
</p>
<p><strong>Force Indentation (Markup Only)</strong>
<span>
<input checked="checked" id="bforce_indent-no" name="bforce_indent" onclick="pd.options(this);" title="This markup only option maintains document integrity with regard to indentation that would create text nodes adjacent to content that did not exist before." type="radio"/>
<label for="bforce_indent-no">Maintain code integrity</label></span>
<span>
<input id="bforce_indent-yes" name="bforce_indent" onclick="pd.options(this);" title="This markup only option forces indentation for all content and elements without regard for integrity of document structure or content." type="radio"/><label for="bforce_indent-yes">Always
force indentation</label></span>
</p>
<p><strong>Function Space (JavaScript Only)</strong>
<span>
<input checked="checked" id="jsspace-yes" onclick="pd.options(this);" title="This JavaScript only option retains a single space between the 'function' keyword and the opening parenthesis character of anonymous functions." type="radio"/>
<label for="jsspace-yes">Retain Function Space</label></span>
<span>
<input id="jsspace-no" title="This JavaScript only option removes a single space between the 'function' keyword and the opening parenthesis character of anonymous functions." type="radio"/>
<label for="jsspace-no">Remove Space Following Function</label></span>
</p>
<p><strong>Empty Lines (JavaScript Only)</strong>
<span>
<input checked="checked" id="jslines-yes" onclick="pd.options(this);" title="This JavaScript only option retains a single empty line for each series of empty lines of code input." type="radio"/>
<label for="jslines-yes">Remove Empty Lines</label></span>
<span>
<input id="jslines-no" title="This JavaScript only option removes all empty lines." type="radio"/>
<label for="jslines-no">Remove Empty Lines</label></span>
</p>
</fieldset>
</div>
<div class="options" id="miniops" style="display:none;"><h2>Minify
Options</h2>
<p><strong>Presume HTML (Markup Only)</strong>
<span>
<input checked="checked" id="htmlm-no" name="presumehtmlm" onclick="pd.options(this);" title="Use this option to ignore HTML specific vocabulary and instead focus purely on syntax." type="radio"/>
<label for="htmlm-no">Not SGML type HTML</label></span>
<span>
<input id="htmlm-yes" name="presumehtmlm" onclick="pd.options(this);" title="This option determines whether HTML tags like <br> and lt;hr> should be evaluated as singletons, such as <br/> and lt;hr/>." type="radio"/>
<label for="htmlm-yes">Presume SGML type HTML</label></span>
</p>
<p><strong>IE Comments (HTML Only)</strong>
<span>
<input checked="checked" id="conditionalm-no" name="conditionalm" onclick="pd.options(this);" title="Use this option to remove HTML contitional comments used by Internet Explorer." type="radio"/>
<label for="conditionalm-no">Remove all comments</label></span>
<span>
<input id="conditionalm-yes" name="conditionalm" onclick="pd.options(this);" title="Use this option to keep HTML contitional comments used by Internet Explorer." type="radio"/>
<label for="conditionalm-yes">Preserve HTML conditional comments</label></span>
</p>
<p><strong>Top Comments (JavaScript / CSS)</strong>
<span>
<input checked="checked" id="topcoms-no" name="topcoms" onclick="pd.options(this);" title="Use this remove all comments in JavaScript and CSS including comments above the first line of code." type="radio"/>
<label for="topcoms-no">Minify all comments</label></span>
<span>
<input id="topcoms-yes" name="topcoms" onclick="pd.options(this);" title="Use this option retain comments comments above the first line of JavaScript and CSS code." type="radio"/>
<label for="topcoms-yes">Preserve comments before any code</label></span>
</p>
</div>
<p class="button"><button onclick="pd.recycle();" type="button" value="Execute">Execute</button></p>
</div>
<div id="diffoutput"><p id="emailme">Please post comments, feedback, and
requests on the
<a href="https://groups.google.com/d/forum/pretty-diff">Pretty Diff
mailing list</a>.</p>
<p>If you get bored go check out my other projects:
<strong><a href="http://mailmarkup.org/">Mail Markup Language</a></strong>,
<a href="http://prettydiff.com/slideshow/">Slideshow</a>, and
<a href="http://prettydiff.com/jsgui/">JSGUI (Incomplete)</a>.</p>
<p>Created by
<a href="http://mailmarkup.org/">Austin Cheney</a>
on 3 Mar 2009. This is a heavy modification of JavaScript tools:
<a href="http://snowtide.com/files/media/jsdifflib/jsdifflibtest.html">jsdifflib</a>,
<a href="http://www.crockford.com/javascript/jsmin.html">jsmin</a>
in
<a href="http://fmarcia.info/jsmin/">JavaScript</a>,
<a href="http://tools.arantius.com/tabifier">cleanCSS</a>
and other custom written libraries.</p>
<p>Pretty Diff is used by these great organizations:</p>
<ul id="thirdparties">
<li><a href="http://www.w3.org/" onclick="window.open(this.href, 'thirdparty');return false;"><img alt="World Wide Web Consortium" src="images/logo_w3c.gif"/></a></li>
<li><a href="http://www.travelocity.com/" onclick="window.open(this.href, 'thirdparty');return false;"><img alt="Travelocity" src="images/logo_travelocity.gif"/></a></li>
<li><a href="http://www.iPredikt.com/" onclick="window.open(this.href, 'thirdparty');return false;"><img alt="iPredikt" src="images/logo_ipredikt.png"/></a></li>
</ul>
</div>
<script type="application/javascript" src="prettydiff.js"></script>
<script type="application/javascript" src="api/dom.js"></script>
</body>
</html>