forked from prettydiff/prettydiff
-
Notifications
You must be signed in to change notification settings - Fork 0
/
prettydiff.com.xhtml
1823 lines (1823 loc) · 112 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
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<?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>
<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"/>
<link href="humans.txt" rel="author" type="text/plain"/>
<link href="diffview.css" media="all" rel="stylesheet" type="text/css"/>
<link href="images/apple-touch-icon-57.png" rel="apple-touch-icon" sizes="57x57"/>
<link href="images/apple-touch-icon-72.png" rel="apple-touch-icon" sizes="72x72"/>
<link href="images/apple-touch-icon-114.png" rel="apple-touch-icon" sizes="114x114"/>
<link href="images/apple-touch-icon-144.png" rel="apple-touch-icon" sizes="144x144"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="index, follow" name="robots"/>
<meta content="Pretty Diff - The difference tool" name="DC.title"/>
<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"/>
</head>
<body class="white" id="webtool">
<h1>Pretty Diff, a language aware file comparison tool, beautifier, minifier and
parser.</h1>
<p aria-atomic="true" aria-live="assertive" id="arialive" role="alert"
style="display:none"></p>
<div id="headline" style="display:block">
<h2>Announcement —</h2>
<p>
<a href="https://github.com/prettydiff/prettydiff/issues/71">Submit any wish list items for Pretty Diff version 2!</a>
</p>
<span class="clear"></span>
</div>
<ul id="infolinks">
<!--li><a href="news.xhtml">News</a></li-->
<li>
<a href="https://github.com/prettydiff/prettydiff/">GitHub</a>
</li>
<li>
<a href="overview.xhtml">Overview</a>
</li>
<li>
<a href="samples.xhtml">Samples</a>
</li>
<li>
<a href="documentation.xhtml">Documentation</a>
</li>
</ul>
<p id="functionGroup" role="menu">
<strong>Function</strong>
<span>
<input checked="checked" id="modediff" name="mode"
title="This option tells the tool to generate a diff (code comparison) report. Force this display by default with the address parameter 'm=diff'."
type="radio"/>
<label for="modediff"
title="This option tells the tool to generate a diff (code comparison) report. Force this display by default with the address parameter 'm=diff'.">Compare</label>
</span>
<span>
<input id="modebeautify" name="mode"
title="This option tells the tool to return well formatted code. Force this display by default with the address parameter 'm=beautify'."
type="radio"/>
<label for="modebeautify"
title="This option tells the tool to return well formatted code. Force this display by default with the address parameter 'm=beautify'.">Beautify</label>
</span>
<span>
<input id="modeminify" name="mode"
title="This option tells thetool to return white space compressed code. Force this display by default with the address parameter 'm=minify'."
type="radio"/>
<label for="modeminify"
title="This option tells thetool to return white space compressed code. Force this display by default with the address parameter 'm=minify'.">Minify</label>
</span>
<span>
<input id="modeparse" name="mode"
title="Display an array of parsed tokens. Force this display by default with the address parameter 'm=parse'."
type="radio"/>
<label for="modeparse"
title="Display an array of parsed tokens. Force this display by default with the address parameter 'm=parse'.">Parsed Only</label>
</span>
</p>
<div class="metainfo">
<p id="announcement" role="alert"></p>
<p id="update">Updated:
</p>
</div>
<div id="codeInput" role="main">
<p id="textareaTabKey" style="display:none">
<strong>Accessibility note:</strong>
Hold
<em>shift</em>
and press
<em>control</em>
key twice to focus on the previous element or press
<em>control</em>
twice to focus away from this textarea.</p>
<div 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 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 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" type="file"/>
<label for="beautyfile">Beautify local file</label>
</p>
<p class="input">
<label for="beautyinput">Beautification input</label>
<textarea cols="80" id="beautyinput" 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 id="Minify" style="display:none;">
<h2>Minify Code</h2>
<p class="file"><input id="minifyfile" multiple="multiple" type="file"/>
<label for="minifyfile">Minify local file</label>
</p>
<p class="input">
<label for="minifyinput">Minification input</label>
<textarea cols="80" id="minifyinput" 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 id="Parse" style="display:none;">
<h2>Parse Code</h2>
<p class="file"><input id="parsefile" multiple="multiple" type="file"/>
<label for="parsefile">Parse local file</label>
</p>
<p class="input">
<label for="parseinput">Parse input</label>
<textarea cols="80" id="parseinput" rows="10" wrap="off"></textarea>
</p>
<p class="output">
<label class="outputlabel" for="parseoutput">Parse output</label>
<textarea cols="40" id="parseoutput" name="paste_code" readonly="readonly"
rows="10" wrap="off"></textarea>
</p>
<span class="clear"></span>
</div>
<span class="clear"></span>
</div>
<p class="button" id="button-primary">
<button type="button" value="Execute">Execute</button>
</p>
<div id="reports">
<h2>Reporting data which updates with each use of the tool</h2>
<div class="box" id="feedreport" role="dialog_nonmodal">
<h3 class="heading"
title="Grab this title element to open this dialogue or move it around around the screen.">
<button>Feedback</button>
</h3>
<p class="buttons" style="display:none">
<button class="minimize" title="Minimize this dialogue ">↑</button>
<button class="maximize" title="Maximize this dialogue to the browser window.">↑</button>
<button class="resize" title="Resize this dialogue.">↔</button>
</p>
<div class="body" id="feedreportbody" style="display:none" xml:space="preserve">
<p id="feedintro">Please feel free to submit feedback about Pretty Diff at any
time by answering the following questions.</p>
<p class="radiogroup">
<span class="feedlabel">How likely are you to recommend Pretty Diff to a friend or coworker?</span>
<span>
<label class="feedradio1" for="feedradio1">1</label><input id="feedradio1" name="feedradio" type="radio" value="1"/>
<span>Never</span>
</span>
<span>
<label class="feedradio2" for="feedradio2">2</label><input id="feedradio2" name="feedradio" type="radio" value="2"/>
<span>Not Likely</span>
</span>
<span>
<label class="feedradio3" for="feedradio3">3</label><input id="feedradio3" name="feedradio" type="radio" value="3"/>
<span>Rarely</span>
</span>
<span>
<label class="feedradio4" for="feedradio4">4</label><input id="feedradio4" name="feedradio" type="radio" value="4"/>
<span>Maybe</span>
</span>
<span>
<label class="feedradio5" for="feedradio5">5</label><input id="feedradio5" name="feedradio" type="radio" value="5"/>
<span>Probably</span>
</span>
<span>
<label class="feedradio6" for="feedradio6">6</label><input id="feedradio6" name="feedradio" type="radio" value="6"/>
<span>Frequently</span>
</span>
<span>
<label class="feedradio7" for="feedradio7">7</label><input id="feedradio7" name="feedradio" type="radio" value="7"/>
<span>Always</span>
</span>
</p>
<p>
<label for="feedtextarea">What is your primary reason for the above answer?</label>
<textarea id="feedtextarea"></textarea>
</p>
<p>
<label for="feedemail">Email address (optional)</label>
<input id="feedemail" type="text"/></p>
<p>
<button id="feedsubmit" type="button">Submit feedback</button>
</p>
</div>
</div>
<div class="box" id="codereport" role="dialog_nonmodal">
<h3 class="heading"
title="Grab this title element to open this dialogue or move it around the screen.">
<button>Code Report</button>
</h3>
<p class="buttons" style="display:none">
<a href="#">
<button class="save" tabindex="-1"
title="Convert diff report to text that can be saved.">S</button>
</a>
<button class="minimize" title="Minimize this dialogue">↑</button>
<button class="maximize" title="Maximize this dialogue to the browser window.">↑</button>
<button class="resize" title="Resize this dialogue.">↔</button>
</p>
<div class="body" id="codereportbody" style="display:none" xml:space="preserve"></div>
</div>
<div class="box" id="statreport" role="dialog_nonmodal">
<h3 class="heading"
title="Grab this title element to open this dialogue or move it around the screen.">
<button>Usage Statistics</button>
</h3>
<p class="buttons" style="display:none">
<button class="minimize" title="Minimize this dialogue">↑</button>
<button class="maximize" title="Maximize this dialogue to the browser window.">↑</button>
<button class="resize" title="Resize this dialogue.">↔</button>
</p>
<div class="body" id="statreportbody" style="display:none" xml:space="preserve">
<div>
<h3>General statistics</h3>
<ul>
<li>Total number of page loads:
<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 page loads per day:
<strong id="stavday">0</strong>
</li>
<li>Average uses per day:
<strong id="stuseday">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>
<li>Parse Only:
<strong id="stpars">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" role="toolbar">
<h2>Main Options</h2>
<p class="apiname">(API name in parenthesis)</p>
<p class="resetbutton">
<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>
</p>
<p>
<strong>Ace Code Editor</strong>
<span>
<input checked="checked" id="ace-yes" name="ace-radio"
title="This radio button will restore the Ace Code Editor functionality and refresh the page."
type="radio"/>
<label for="ace-yes">Enable Ace Code Editor</label>
</span>
<span>
<input id="ace-no" name="ace-radio"
title="This radio button will remove the Ace Code Editor functionality and refresh the page."
type="radio"/>
<label for="ace-no">Disable Ace Code Editor (Faster and more accessible)</label>
</span>
</p>
<p>
<strong>Save Preference</strong>
<span>
<input checked="checked" id="savepref-document" name="savepref"
title="When saving diff output prepare a complete document." type="radio"/>
<label for="savepref-document">Complete Document</label>
</span>
<span>
<input id="savepref-report" name="savepref"
title="When saving diff output provide only the diff report." type="radio"/>
<label for="savepref-report">Report Only</label>
</span>
</p>
<p>
<label class="label" for="colorScheme"
title="Pick a color theme with this list of options. Force a theme by default with the address parameter 'c', for example 'c=shadow'.">Color Scheme
<a class="apiname" href="documentation.xhtml#color">(color)</a>
</label>
<select id="colorScheme"
title="Pick a color theme with this list of options. Force a theme by default with the address parameter 'c', for example 'c=shadow'.">
<option>Canvas</option>
<option>Shadow</option>
<option selected="selected">White</option>
</select>
</p>
<p>
<label class="label" for="language"
title="Choose a specific language with this list or force a language selection using the 'l' (as in letter) address parameter, for example 'l=html'.">Code type
<a class="apiname" href="documentation.xhtml#lang">(lang)</a>
</label>
<select id="language"
title="Choose a specific language with this list or force a language selection using the 'l' (as in letter) address parameter, for example 'l=html'.">
<option selected="selected" value="auto">Auto Detect</option>
<option value="css">CSS</option>
<option value="csv">CSV</option>
<option value="dustjs">Dust.js</option>
<option value="ejs">EJS Template</option>
<option value="html_ruby">ERB Template</option>
<option value="handlebars">Handlebars Template</option>
<option value="html">HTML</option>
<option value="json">JSON</option>
<option value="jsx">JSX</option>
<option value="javascript">JavaScript</option>
<option value="less">LESS</option>
<option value="jsp">JSTL</option>
<option value="xml">markup (non-specific)</option>
<option value="handlebars">Mustache Template</option>
<option value="text">Plain Text</option>
<option value="jsx">React JSX</option>
<option value="scss">SCSS (SASS)</option>
<option value="xml">SGML</option>
<option value="handlebars">Spacebars Template</option>
<option value="tss">TSS</option>
<option value="twig">Twig Template</option>
<option value="xml">XML</option>
</select>
</p>
<p>
<label class="label" for="lang-default"
title="Force a language choice when auto-detect cannot make a decision">Auto detect default
<a class="apiname" href="documentation.xhtml#langdefault">(langdefault)</a>
</label>
<select id="lang-default"
title="Force a language choice when auto-detect cannot make a decision">
<option value="css">CSS</option>
<option value="csv">CSV</option>
<option value="dustjs">Dust.js</option>
<option value="ejs">EJS Template</option>
<option value="html_ruby">ERB Template</option>
<option value="handlebars">Handlebars Template</option>
<option value="html">HTML</option>
<option value="json">JSON</option>
<option value="jsx">JSX</option>
<option value="javascript">JavaScript</option>
<option value="less">LESS</option>
<option value="jsp">JSTL</option>
<option value="xml">markup (non-specific)</option>
<option value="handlebars">Mustache Template</option>
<option value="text">Plain Text</option>
<option value="jsx">React JSX</option>
<option value="scss">SCSS (SASS)</option>
<option value="xml">SGML</option>
<option value="handlebars">Spacebars Template</option>
<option value="tss">TSS</option>
<option value="twig">Twig Template</option>
<option value="xml">XML</option>
</select>
</p>
<p id="csvcharp" style="display:none;">
<label class="label" for="csvchar">Character separator
<a class="apiname" href="documentation.xhtml#csvchar">(csvchar)</a>
</label>
<input id="csvchar"
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>
<button id="option_commentClear">Reset Comment String</button>
<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="addOptions" role="toolbar">
<div class="options" id="diffops">
<h2>Diff Options</h2>
<p class="apiname">(API name in parenthesis)</p>
<fieldset>
<legend>Diff Report Options</legend>
<p>
<strong>Print or Save Output</strong>
<span>
<input id="diff-save"
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
<a class="apiname" href="documentation.xhtml#context">(context)</a>
</label>
<span>
<input id="contextSize"
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 matching lines of code to pad the differences.</label>
</span>
</p>
<p>
<strong>Diff View Type
<a class="apiname" href="documentation.xhtml#diffview">(diffview)</a>
</strong>
<span>
<input checked="checked" id="sidebyside" name="_viewtype"
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"
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>Ignore Content, Markup / JavaScript
<a class="apiname" href="documentation.xhtml#content">(content)</a>
</strong>
<span>
<input checked="checked" id="diffcontenty" name="diffcontent"
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"
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>
<p>
<strong>Code Comments
<a class="apiname" href="documentation.xhtml#diffcomments">(diffcomments)</a>
</strong>
<span>
<input checked="checked" id="diffcommentsn" name="diffcomments"
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"
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>Diff Quotes
<a class="apiname" href="documentation.xhtml#quote">(quote)</a>
</strong>
<span>
<input checked="checked" id="diffquotey" name="diffquote"
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"
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
<a class="apiname" href="documentation.xhtml#semicolon">(semicolon)</a>
</strong>
<span>
<input checked="checked" id="diffscolony" name="diffscolon"
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"
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>
</fieldset>
<fieldset id="diffbeautify">
<legend>Beautification Options</legend>
<fieldset>
<legend>Multiformat Options</legend>
<p id="difftypep">
<label class="label" for="diff-char">Indentation character
<a class="apiname" href="documentation.xhtml#inchar">(inchar)</a>
</label>
<span>
<input class="unchecked" id="diff-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="diff-other-span">
<input id="diff-other" name="diffchar"
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"
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"
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"
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 id="diffquanp">
<label class="label" for="diff-quan">Indentation size
<a class="apiname" href="documentation.xhtml#insize">(insize)</a>
</label>
<span>
<input id="diff-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>
<strong>Property Sorting, CSS / JavaScript
<a class="apiname" href="documentation.xhtml#objsort">(objsort)</a>
</strong>
<span>
<input checked="checked" id="dobjsort-jsonly" name="dobjsort"
title="Sort JavaScript object properties alphabetically by key name."
type="radio"/>
<label for="dobjsort-jsonly">Sort JavaScript objects</label>
</span>
<span>
<input id="dobjsort-cssonly" name="dobjsort"
title="Sort CSS properties alphabetically by property name." type="radio"/>
<label for="dobjsort-cssonly">Sort CSS properties</label>
</span>
<span>
<input id="dobjsort-all" name="dobjsort"
title="Sort CSS properties and JavaScript object properties alphabetically by key/property name."
type="radio"/>
<label for="dobjsort-all">Sort by key/property</label>
</span>
<span>
<input id="dobjsort-none" name="dobjsort"
title="Turn sorting off for CSS and JavaScript." type="radio"/>
<label for="dobjsort-none">Do not sort</label>
</span>
</p>
<p>
<strong>Empty Lines
<a class="apiname" href="documentation.xhtml#preserve">(preserve)</a>
</strong>
<span>
<input checked="checked" id="djslines-all" name="djslines"
title="This option retains a single empty line for each series of empty lines of code input."
type="radio"/>
<label for="djslines-all">Preserve empty lines</label>
</span>
<span>
<input id="djslines-none" name="djslines"
title="This option removes all empty lines." type="radio"/>
<label for="djslines-none">Remove empty lines</label>
</span>
</p>
<p>
<label class="label" for="diff-wrap">Wrap text, Markup / JavaScript
<a class="apiname" href="documentation.xhtml#wrap">(wrap)</a>
</label>
<span>
<input id="diff-wrap"
title="Determines how long text and strings can be before wrapping. Use a value of 0 to eliminate wrapping."
type="text" value="80"/></span>
</p>
</fieldset>
<fieldset>
<legend>Markup Options</legend>
<p>
<strong>IE Comments, HTML Only
<a class="apiname" href="documentation.xhtml#conditional">(conditional)</a>
</strong>
<span>
<input checked="checked" id="conditionald-no" name="conditionald"
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"
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>Dust.js Template <a class="apiname" href="documentation.xhtml#dustjs">(dustjs)</a></strong>
<span>
<input checked="checked" id="ddustno" name="ddust" title="Do not interpret the markup code as a Dust.js template" type="radio"/>
<label for="ddustno">Not a Dust.js template</label>
</span>
<span>
<input id="ddustyes" name="ddust" title="Interpret the markup code as a Dust.js template" type="radio"/>
<label for="ddustyes">Dust.js template</label>
</span>
</p>
<p>
<strong>Force Indentation
<a class="apiname" href="documentation.xhtml#force_indent">(force_indent)</a>
</strong>
<span>
<input checked="checked" id="dforce_indent-no" name="dforce_indent"
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"
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>Presume HTML
<a class="apiname" href="documentation.xhtml#html">(html)</a>
</strong>
<span>
<input checked="checked" id="htmld-yes" name="presumehtmld"
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">Tolerate HTML sillyness</label>
</span>
<span>
<input id="htmld-no" name="presumehtmld"
title="Use this option to ignore HTML specific vocabulary and instead focus purely on syntax."
type="radio"/>
<label for="htmld-no">Strict XML syntax</label>
</span>
</p>
<p>
<strong>Indent Style/Script
<a class="apiname" href="documentation.xhtml#style">(style)</a>
</strong>
<span>
<input checked="checked" id="inscriptd-yes" name="inscriptd"
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"
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>Merge Empty Tag Sets Into A Single Self-Closing Tag
<a class="apiname" href="documentation.xhtml#tagmerge">(tagmerge)</a>
</strong>
<span>
<input checked="checked" id="dtagmerge-no" name="dtagmerge"
title="Do not automatically merge start and end tags of the same name."
type="radio"/>
<label for="dtagmerge-no">Do not merge tags</label>
</span>
<span>
<input id="dtagmerge-yes" name="dtagmerge"
title="Automatically merge immediately adjacent start and end tags of the same name."
type="radio"/>
<label for="dtagmerge-yes">Merge tags</label>
</span>
</p>
<p>
<strong>Sort Child Items of Each Parent Element
<a class="apiname" href="documentation.xhtml#tagsort">tagsort</a>
</strong>
<span>
<input checked="checked" id="dtagsort-no" name="dtagsort"
title="Do not rearrange markup code." type="radio"/>
<label for="dtagsort-no">Do not sort markup code</label>
</span>
<span>
<input id="dtagsort-yes" name="dtagsort"
title="Sort markup code." type="radio"/>
<label for="dtagsort-yes">Sort markup pieces</label>
</span>
</p>
<p>
<strong>Preserve Text Content <a class="apiname" href="documentation.xhtml#textpreserve">(textpreserve)</a></strong>
<span>
<input checked="checked" id="dtextpreserveno" name="dtextpreserve" title="Do not literally preserve white space in text." type="radio"/>
<label for="dtextpreserveno">Beautify text content</label>
</span>
<span>
<input id="dtextpreserveyes" name="dtextpreserve" title="Preserve all white space in text content exactly as supplied." type="radio"/>
<label for="dtextpreserveyes">Preserve white space in text</label>
</span>
</p>
</fieldset>
<fieldset>
<legend>JavaScript Options</legend>
<p>
<strong>Brace Lines
<a class="apiname" href="documentation.xhtml#braceline">(braceline)</a>
</strong>
<span>
<input checked="checked" id="dbraceline-no" name="dbraceline"
title="In JavaScript do not pad blocks with empty lines." type="radio"/>
<label for="dbraceline-no">Normal blocks</label>
</span>
<span>
<input id="dbraceline-yes" name="dbraceline"
title="In JavaScript pad blocks with empty lines." type="radio"/>
<label for="draceline-yes">Pad JavaScript blocks with empty lines</label>
</span>
</p>
<p>
<strong>Brace Padding
<a class="apiname" href="documentation.xhtml#bracepadding">(bracepadding)</a>
</strong>
<span>
<input checked="checked" id="dbracepadding-no" name="dbracepadding"
title="This option does not pad braces in JavaScript with spaces." type="radio"/>
<label for="dbracepadding-no">No brace padding</label>
</span>
<span>
<input id="dbracepadding-yes" name="dbracepadding"
title="Inserts a space after the start of a contain and before the end of the container in JavaScript if the contents of that container are not indented; such as: conditions, function arguments, and escaped sequences of template strings."
type="radio"/>
<label for="dbracepadding-yes">Pads container characters from their contents.</label>
</span>
</p>
<p>
<strong>Style of Indent
<a class="apiname" href="documentation.xhtml#braces">(braces)</a>
</strong>
<span>
<input checked="checked" id="jsindentd-knr" name="jsindentdiff"
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"
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>Else on New Line
<a class="apiname" href="documentation.xhtml#elseline">(elseline)</a>
</strong>
<span>
<input checked="checked" id="jselselined-no" name="jselselined"
title="This JavaScript only option will precede the 'else' keyword with a space."
type="radio"/>
<label for="jselselined-no">A space precedes 'else'</label>
</span>
<span>
<input id="jselselined-yes" name="jselselined"
title="This JavaScript only option will force the 'else' keyword onto a new line."
type="radio"/>
<label for="jselselined-yes">Force 'else' keyword onto a new line</label>
</span>
</p>
<p>
<strong>Chain Methods
<a class="apiname" href="documentation.xhtml#methodchain">(methodchain)</a>
</strong>
<span>
<input checked="checked" id="dmethodchain-no" name="dmethodchain"
title="Indent a run of methods."
type="radio"/>
<label for="dmethodchain-no">Indent a run of methods</label>
</span>
<span>
<input id="dmethodchain-yes" name="dmethodchain"
title="Chain methods onto a single line."
type="radio"/>
<label for="dmethodchain-yes">Chain methods onto a single line</label>
</span>
</p>
<p>
<strong>Function Space
<a class="apiname" href="documentation.xhtml#space">(space)</a>
</strong>
<span>
<input checked="checked" id="jsspaced-yes" name="jsspaced"
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" name="jsspaced"
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="jsspaced-no">Remove space following function</label>
</span>
</p>
</fieldset>
</fieldset>
</div>
<div class="options" id="beauops" style="display:none;">
<h2 title="The term pretty-print is synonymous with code beautification.">Beautify Options</h2>
<p class="apiname">(API name in parenthesis)</p>
<fieldset>
<legend>Basic Options</legend>
<p>
<label class="label" for="beau-quan">Indentation size
<a class="apiname" href="documentation.xhtml#insize">(insize)</a>
</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="inlevel">Code padding, Markup / JavaScript
<a class="apiname" href="documentation.xhtml#inlevel">(inlevel)</a>
</label>
<span>
<input id="inlevel"
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
<a class="apiname" href="documentation.xhtml#inchar">(inchar)</a>
</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"
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>
<p>
<strong>Indent Comments
<a class="apiname" href="documentation.xhtml#comments">(comments)</a>
</strong>
<span>
<input checked="checked" id="incomment-yes" name="incomment"
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>Empty Lines
<a class="apiname" href="documentation.xhtml#preserve">(preserve)</a>
</strong>
<span>
<input checked="checked" id="bjslines-all" name="bjslines"
title="This option retains a single empty line for each series of empty lines of code input."
type="radio"/>
<label for="bjslines-all">Preserve empty lines</label>
</span>
<span>
<input id="bjslines-none" name="bjslines"
title="This option removes all empty lines." type="radio"/>
<label for="bjslines-none">Remove empty lines</label>
</span>
</p>
</fieldset>
<fieldset>
<legend>Advanced Options</legend>