Permalink
Fetching contributors…
Cannot retrieve contributors at this time
2566 lines (2565 sloc) 153 KB
<?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 - Documentation</title>
<link
href="http://prettydiff.com/documentation.xhtml"
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="css/index.css" media="all" rel="stylesheet" type="text/css"/>
<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="prettydiff">
<div class="contentarea" id="documentation">
<section role="heading">
<h1>
<svg
height="2000.000000pt"
id="pdlogo"
preserveAspectRatio="xMidYMid meet"
version="1.0"
viewBox="0 0 2000.000000 2000.000000"
width="2000.000000pt"
xmlns="http://www.w3.org/2000/svg">
<g
fill="#999"
stroke="none"
transform="translate(0.000000,2000.000000) scale(0.100000,-0.100000)">
<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>
<a href="prettydiff.com.xhtml">Pretty Diff</a>
- Documentation</h1>
<p id="dcolorScheme">
<label class="label" for="colorScheme">Color Scheme</label>
<select id="colorScheme">
<option>Canvas</option>
<option>Shadow</option>
<option selected="selected">White</option>
</select>
</p>
<p>Explore some
<a href="samples.xhtml">samples</a>
or browse
<a href="https://github.com/prettydiff/prettydiff">Pretty Diff on GitHub</a>.</p>
</section>
<section id="doc-content" role="main">
<div>
<h2>
<button aria-disabled="true" class="heading" role="presentation">About Pretty Diff
<span aria-hidden="true">Show</span>
</button>
</h2>
<div class="content-hide">
<div class="segment">
<h3>Purpose</h3>
<p>Pretty Diff is a language aware code comparison tool, beautifier, minifier,
and parser for a variety of web oriented languages.</p>
<p>Pretty Diff was created to compare code samples for various web based
languages even if one (or both) code samples were minified. Currently, the
project operates by beautifying code and then comparing that the beautified
product of the code samples. The goal in a
<a href="https://github.com/prettydiff/prettydiff/issues/71">future version</a>
is to introduce the comparison step directly into the beautifiers between the
parse step and the beautification step to become a truely language aware code
comparison and analysis tool.</p>
</div>
<div class="segment" id="goals">
<h3>Goals</h3>
<dl>
<dt>portability</dt>
<dd>The project should be immediately available cross platform, across various
interfaces, and without a build process. All documentation and required
supporting artifacts are included with the project code.</dd>
<dt>productivity</dt>
<dd>The project should save a developer substantial time by make code easier to
read against a varient of settings and opinions and reduce the steps to complete
a given code analysis task.</dd>
<dt>reproducibility</dt>
<dd>Code pushed through the project in any one mode should be equally restorable
to its previous state using a different mode.</dd>
<dt>simplicity</dt>
<dd>The project should do more with less code. The intended audience of this
project are software developers, who may need to modify the project code to fit
custom needs. Less code means custom mode, but also means clearer separation of
concerns, clearer organization, and fewer algorithms.</dd>
</dl>
</div>
<div class="segment" id="modes">
<h3>Supported Operations (modes)</h3>
<p>Pretty Diff currently supports these four operations:</p>
<dl>
<dt>diff</dt>
<dd>The code comparison mode. This is the default mode and the only mode to
require two code samples.</dd>
<dt>beautify</dt>
<dd>Pretty Diff has progressively moved from community driven dependencies to
custom parsers to accomplish code beautification for a diversity of features and
requests.</dd>
<dt>minify</dt>
<dd>Each of Pretty Diff's beautification libraries has a minify feature. The
goal is to reduce code size but only to such an extent that the code can be
restored to its prior state through beautification, excluding code comments.</dd>
<dt>parse</dt>
<dd>Most code parsers generate a final product called an Abstract Syntax Tree
(AST). Pretty Diff, instead, produces parallel arrays for its internal
operations. The parse mode simply makes these data arrays available for
independent analysis.</dd>
<dt>analysis</dt>
<dd>HTML formatted reports evaluating the code. The reports differ in content
and structure by the parser(s) used.</dd>
</dl>
</div>
<div class="segment" id="languages">
<h3>Language Classifications</h3>
<p>The project maintains three primary language libraries and a minor parser for
CSV format. The three major libraries each include a parser, beautifier, and
minifier. All libraries are located at the
<a href="lib">lib</a>
directory.</p>
<dl>
<dt>csspretty</dt>
<dd>This library provides support for Cascading Style Sheets and similar
languages, such as the popular preprocessors: LESS and SCSS (SASS).</dd>
<dt>jspretty</dt>
<dd>This library provides support for JavaScript and several templating
languages that use a JavaScript-like syntax. React JSX format is supplied by
this library with assistance from the markuppretty library.</dd>
<dt>markuppretty</dt>
<dd>The markuppretty library supports XML, HTML, and a wide variety of HTML
templating schemes such as Handlebars and Mustache templates.</dd>
</dl>
</div>
</div>
</div>
<div>
<h2>
<button aria-disabled="true" class="heading" role="presentation">Output Formats and Types
<span aria-hidden="true">Show</span>
</button>
</h2>
<div class="content-hide">
<div class="segment">
<h3>General Output</h3>
<p>New in version 2 is that most opertions will output a single string. This
makes the application more predictable and easier to integrate into other
applications. Brief metadata about the operation is stored in a global object
named
<em>global.prettydiff.meta</em>.</p>
</div>
<div class="segment">
<h3>Exceptions</h3>
<p>For increased speed and convenience there are some features that could not be
delivered as a single string. The list is as follows:</p>
<ul>
<li>Parse mode with
<strong>parseFormat:parallel</strong>
will return an object with a key named definition and a key named data. The data
property will contain an object of arrays by name and the definition object will
contain and object of identify key names to the data object where each value
defines the data type.</li>
<li>Parse mode with
<strong>parseFormat:sequential</strong>
will a nearly identical object to that described by parseFormat:parallel. The
only difference is that the data property contains an array of array children
where each child array is a parsed token and corresponding data fields.</li>
<li>Parse mode with
<strong>parseFormat:htmltable</strong>
will return a string of the parse data arranged in an HTML table.</li>
<li>The option
<strong>nodeasync</strong>
returns an array where all prior described output is the first index and the
second index is an object containing brief metadata, otherwise stored in the
<em>global.prettydiff.meta</em>
object. The reason for this is to allow meta data collection during parallel
operations without collision. If this option is ignored then all prior described
output formats are generated and the meta data is dumped in the global.prettydiff.meta
object, but that meta data is not reliable. An unintended byproduct of this
feature is that Pretty Diff version 2 can accomplish nearly complete backwards
compatibility to Pretty Diff v1 by setting this option to true.</li>
</ul>
</div>
</div>
</div>
<div>
<h2>
<button aria-disabled="true" class="heading" role="presentation">API (Options)
<span aria-hidden="true">Show</span>
</button>
</h2>
<div class="content-hide">
<ol class="segment" id="options">
<li id="apacheVelocity">
<h4>apacheVelocity</h4>
<ul>
<li>
<h5>Description</h5>
Enables Apache Velocity syntax support in the <a href="lib/markuppretty.js">markuppretty.js</a> library. If accessing the markuppretty.js library directly without the Pretty Diff application set the option <em>apacheVelocity</em> to true. Otherwise, this option can be set directly or by providing the value <em>apacheVelocity</em> to option <a href="#lang">lang</a>. Velocity is not supported in minification mode.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
(only available in the language selection)</li>
</ul>
</li>
<li id="api">
<h4>api</h4>
<ul>
<li>
<h5>Description</h5>
Used internally to decide how to format documents and reports.</li>
</ul>
</li>
<li id="attributetoken">
<h4>attributetoken</h4>
<ul>
<li>
<h5>Description</h5>
Attributes in markup languages when in mode
<em>parse</em>
will output attributes as separate tokens in the parse table output instead of a
data property on the parent element.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Parse Attributes</li>
</ul>
</li>
<li id="brace_style">
<h4>brace_style</h4>
<ul>
<li>
<h5>Description</h5>
This option exists to emulate the brace_style option provided by JSBeautify using other existing Pretty Diff options.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Accepted values</h5>
collapse, collapse-preserve-inline, expand, none</li>
<li>
<h5>Default</h5>
none</li>
<li>
<h5>As labeled in the HTML tool</h5>
Brace Style</li>
</ul>
</li>
<li id="braceline">
<h4>braceline</h4>
<ul>
<li>
<h5>Description</h5>
In JavaScript a new line is inserted after opening curly braces and before
closing curly braces.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Brace Lines</li>
</ul>
</li>
<li id="bracepadding">
<h4>bracepadding</h4>
<ul>
<li>
<h5>Description</h5>
Inserts a space after the start of a container 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.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Brace Padding</li>
</ul>
</li>
<li id="braces">
<h4>braces</h4>
<ul>
<li>
<h5>Description</h5>
Sets the style of indentation during CSS and JavaScript beautification. The
default value
<strong>"knr"</strong>
sets a JSLint compliant beautification scheme and the other value
<strong>"allman"</strong>
puts opening curly braces on their own line.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Accepted values</h5>
knr, allman</li>
<li>
<h5>Default</h5>
knr</li>
<li>
<h5>As labeled in the HTML tool</h5>
Style of Indent</li>
</ul>
</li>
<li id="color">
<h4>color
<strong>(node-local.js only)</strong>
</h4>
<ul>
<li>
<h5>Description</h5>
Specifies which color scheme to apply to the output file.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Accepted values</h5>
canvas, shadow, white</li>
<li>
<h5>Default</h5>
white</li>
</ul>
</li>
<li id="comments">
<h4>comments</h4>
<ul>
<li>
<h5>Description</h5>
Determines whether comments should be indented. This property is only used in
beautification mode.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Accepted values</h5>
indent, noindent</li>
<li>
<h5>Default</h5>
indent</li>
<li>
<h5>As labeled in the HTML tool</h5>
Indent Comments</li>
</ul>
</li>
<li id="commline">
<h4>commline</h4>
<ul>
<li>
<h5>Description</h5>
Whether a blank line should be forced above markup comments.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Force an Empty Line Above Comments</li>
</ul>
</li>
<li id="compressedcss">
<h4>compressedcss</h4>
<ul>
<li>
<h5>Description</h5>
In CSS this allows for beautified blocks and selectors but minified properties
and values to allow faster reading of large CSS code from a structured
perspective.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Compressed CSS</li>
</ul>
</li>
<li id="conditional">
<h4>conditional</h4>
<ul>
<li>
<h5>Description</h5>Retain Internet Explorer conditional HTML comments during minification of HTML.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
IE Comments, HTML Only</li>
</ul>
</li>
<li id="content">
<h4>content</h4>
<ul>
<li>
<h5>Description</h5>Determines if string literals in JavaScript and content in
markup should be normalized to a literal value of
<em>text</em>
prior to a diff operation. This property is only used if mode is set to diff.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Ignore Content, Markup / JavaScript</li>
</ul>
</li>
<li id="context">
<h4>context</h4>
<ul>
<li>
<h5>Description</h5>In the diff mode a numeric value sets the number of matching
(equivalent) lines to precede and follow each line containing a difference to
provide code context. An empty or non-numeric value returns a diff report with
all lines of code.</li>
<li>
<h5>Type</h5>
string or number</li>
<li>
<h5>Default</h5>
no value (empty string)</li>
<li>
<h5>As labeled in the HTML tool</h5>
Context size</li>
</ul>
</li>
<li id="correct">
<h4>correct</h4>
<ul>
<li>
<h5>Description</h5>
A limited attempt to automatically correct certain stylistic code problems that
JSLint complains about and missing closing list item tags in HTML. This option
will insert missing semicolons, insert missing curly braces, convert some
instances of "--" and "++" operators to "-=" and "+=" respectively, and convert
"new Object()" and "new Array()" into "{}" and "[]" respectively.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>Informational Guide</h5>
<a href="guide/jscorrect.xhtml">jscorrect option</a>
</li>
<li>
<h5>As labeled in the HTML tool</h5>
Fix Sloppy Code</li>
</ul>
</li>
<li id="crlf">
<h4>crlf</h4>
<ul>
<li>
<h5>Description</h5>
If the line termination of processed output should be Windows CRLF format. Unix
format (LF) is the default. A true value will use the JavaScript "\r\n" which
should equate to CRLF. A false value will use the JavaScript "\n" which should
equate to LF.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Line Termination</li>
</ul>
</li>
<li id="cssinsertlines">
<h4>cssinsertlines</h4>
<ul>
<li>
<h5>Description</h5>
Forces new line characters between blocks of CSS code. This option will override
option
<em>preserve</em>.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Insert Extra Lines</li>
</ul>
</li>
<li id="csvchar">
<h4>csvchar</h4>
<ul>
<li>
<h5>Description</h5>
Stores the string value used as a data separator for the
<em>"csv"</em>
language. Any string is accepted, but if value of lang property is not set to
<em>"csv"</em>
this property is ignored.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Default</h5>
, (comma)</li>
<li>
<h5>As labeled in the HTML tool</h5>
Character separator</li>
</ul>
</li>
<li id="diff">
<h4>diff</h4>
<ul>
<li>
<h5>Description</h5>
Code sample to compare the source code sample against. This property is required
when mode is set to diff, but is otherwise ignored.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Default</h5>
none</li>
<li>
<h5>As labeled in the HTML tool</h5>
New Text</li>
</ul>
</li>
<li id="diffcli">
<h4>diffcli</h4>
<ul>
<li>
<h5>Description</h5>
This option will output a list of differences similar to the Unix <em>diff</em>
command line utility. If more than one file is compared it will indicate which
files are deleted or new. If the
<em>output</em>
If the value of diffcli is true and the context option is omitted the context
option will be provided a value of 2. For additional information please read the
<a href="guide/diffcli.xhtml">diffcli guide</a>.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>Informational Guide</h5>
<a href="guide/diffcli.xhtml">Using diffcli</a>
</li>
<li>
<h5>As labeled in the HTML tool</h5>
Diff format</li>
</ul>
</li>
<li id="diffcomments">
<h4>diffcomments</h4>
<ul>
<li>
<h5>Description</h5>
Retain code comments so that code and comments can be compared by the diff
process.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Code Comments</li>
</ul>
</li>
<li id="difflabel">
<h4>difflabel</h4>
<ul>
<li>
<h5>Description</h5>
Sets a label describing the value of diff code sample.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Default</h5>
new</li>
<li>
<h5>As labeled in the HTML tool</h5>
New label (optional)</li>
</ul>
</li>
<li id="diffspaceignore">
<h4>diffspaceignore</h4>
<ul>
<li>
<h5>Description</h5>
Ignores white space only differences from the diff tool.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Ignore White Space Differences</li>
</ul>
</li>
<li id="diffview">
<h4>diffview</h4>
<ul>
<li>
<h5>Description</h5>
Determines if the diff report should be expressed is a side-by-side comparison
or a single column inline view.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Accepted values</h5>
sidebyside, inline</li>
<li>
<h5>Default</h5>
sidebyside</li>
<li>
<h5>As labeled in the HTML tool</h5>
Diff View Type</li>
</ul>
</li>
<li id="dustjs">
<h4>dustjs</h4>
<ul>
<li>
<h5>Description</h5>
Presume the provided markup code is a Dust.js template. This option is for
internal use only and is automatically enabled if language value is
<em>dustjs</em>
or if the Dust.js language is detected from auto-detection.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Dust.js Template</li>
</ul>
</li>
<li id="elseline">
<h4>elseline</h4>
<ul>
<li>
<h5>Description</h5>
If the "else" keyword should be pushed onto a new line in JavaScript
beautification.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Else on New Line</li>
</ul>
</li>
<li id="endcomma">
<h4>endcomma</h4>
<ul>
<li>
<h5>Description</h5>
If a terminating comma should be inserted into arrays, object literals, and
destructured objects. The <em>multiline</em> value forces terminating commas but only to objects and arrays that are beautified to more than one line. As a result the multiline value is only available to beautify and diff modes and it behaves identically to the <em>never</em> value during parse time.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Accepted values</h5>
always, multiline, never</li>
<li>
<h5>Default</h5>
never</li>
<li>
<h5>As labeled in the HTML tool</h5>
Trailing Commas</li>
</ul>
</li>
<li id="endquietly">
<h4>endquietly
<strong>(node-local.js only)</strong>
</h4>
<ul>
<li>
<h5>Description</h5>
Determines whether terminal logging should be printed to the console.
<em>quite</em>
- Suppresses terminal logging.
<em>log</em>
- Forces terminal logging. The default setting surpresses terminal logging if
readmethod is file or filescreen.
</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Accepted values</h5>
quiet, log, any other string</li>
<li>
<h5>Default</h5>
(empty string)</li>
</ul>
</li>
<li id="force_attribute">
<h4>force_attribute</h4>
<ul>
<li>
<h5>Description</h5>
Forces all markup attributes to be indented each on their own line of code.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Force Attribute Indentation</li>
</ul>
</li>
<li id="force_indent">
<h4>force_indent</h4>
<ul>
<li>
<h5>Description</h5>
Allows every piece of code and content in a markup language to be indented
without regard for the creation of white space tokens or code semantics.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Force Indentation</li>
</ul>
</li>
<li id="formatArray">
<h4>formatArray</h4>
<ul>
<li>
<h5>Description</h5>
Determines whether JavaScript array indexes should always indented, remain on a
single line, or left to the default formatting.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Accepted values</h5>
default, indent, inline</li>
<li>
<h5>Default</h5>
default</li>
<li>
<h5>As labeled in the HTML tool</h5>
Formatting Arrays</li>
</ul>
</li>
<li id="formatObject">
<h4>formatObject</h4>
<ul>
<li>
<h5>Description</h5>
Determines whether JavaScript object properties should always indented, remain
on a single line, or left to the default formatting.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Accepted values</h5>
default, indent, inline</li>
<li>
<h5>Default</h5>
default</li>
<li>
<h5>As labeled in the HTML tool</h5>
Formatting Object Literals</li>
</ul>
</li>
<li id="functionname">
<h4>functionname</h4>
<ul>
<li>
<h5>Description</h5>
Wether a space should occur between a function name and the arguments parenthesis.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Space After Function Name</li>
</ul>
</li>
<li id="help">
<h4>help
<strong>(node-local.js only)</strong>
</h4>
<ul>
<li>
<h5>Description</h5>
Displays documenation to the command line or console.</li>
</ul>
</li>
<li id="html">
<h4>html</h4>
<ul>
<li>
<h5>Description</h5>
Forces markup code to be interpreted as HTML. HTML mode identifies certain tags
as singletons by tag name even if they are no closed with "/>" syntax. It also
ignores beautification on "&lt;pre&gt;" elements and tolerates "&lt;li&gt;"
elements that do not a closing "&lt;/li&gt;" tag. This option will be
automatically assigned a value of true if the lang option is provided a value of
"auto" and the code can be identified as HTML.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Presume HTML</li>
</ul>
</li>
<li id="inchar">
<h4>inchar</h4>
<ul>
<li>
<h5>Description</h5>
Stores the character literal used for an indentation. A single indentation is
the result of this value repeated the number of times specified in the insize
option.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Default</h5>
(a single space)</li>
<li>
<h5>As labeled in the HTML tool</h5>
Indentation character</li>
</ul>
</li>
<li id="inlevel">
<h4>inlevel</h4>
<ul>
<li>
<h5>Description</h5>
Pads JavaScript and markup beautification with additional indentation. Useful in
the case of submitting code to a markdown format that identifies code by a
padding of 4 spaces for each code line.</li>
<li>
<h5>Type</h5>
number</li>
<li>
<h5>Default</h5>
0</li>
<li>
<h5>As labeled in the HTML tool</h5>
Code padding, Markup / JavaScript</li>
</ul>
</li>
<li id="insize">
<h4>insize</h4>
<ul>
<li>
<h5>Description</h5>
Stores the number of times the inchar value must repeat to comprise a single
indentation.</li>
<li>
<h5>Type</h5>
number</li>
<li>
<h5>Default</h5>
4</li>
<li>
<h5>As labeled in the HTML tool</h5>
Indentation size</li>
</ul>
</li>
<li id="jekyll">
<h4>jekyll</h4>
<ul>
<li>
<h5>Description</h5>
If YAML Jekyll HTML template comments should be supported.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
YAML Jekyll Support</li>
</ul>
</li>
<li id="jsscope">
<h4>jsscope</h4>
<ul>
<li>
<h5>Description</h5>
Produce HTML output for JavaScript beautification that colors variables based
upon their scope of declaration. Using colors this feature highlights
inheritance, scope depth, and closure. The value "none" turns this feature off.
The value "html" creates a formatted HTML code sample for displaying HTML code
samples on web pages. The value "report" creates the code for a complete HTML
file. For additional information please read the
<a href="guide/closure_with_jsscope.xhtml">jsscope guide</a>
and the
<a href="guide/jshtml.xhtml">jshtml guide</a>.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Accepted values</h5>
none, html, report</li>
<li>
<h5>Default</h5>
none</li>
<li>
<h5>Informational Guide</h5>
<a href="guide/closure_with_jsscope.xhtml">jsscope features</a>
and
<a href="guide/jshtml.xhtml">saving colorful code as HTML</a>
</li>
<li>
<h5>As labeled in the HTML tool</h5>
Scope Analysis</li>
</ul>
</li>
<li id="lang">
<h4>lang</h4>
<ul>
<li>
<h5>Description</h5>
Tells the diff program which language it is receiving. The value "auto" allows
the application to determine between CSS, JavaScript, and Markup without human
effort. If the auto value cannot determine the language it will default to a
value of text if the mode is diff or it will default to a value of JavaScript
for other modes.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Accepted values</h5>
auto, css, csv, javascript, markup, text</li>
<li>
<h5>Default</h5>
auto</li>
<li>
<h5>As labeled in the HTML tool</h5>
Code type</li>
</ul>
</li>
<li id="langdefault">
<h4>langdefault</h4>
<ul>
<li>
<h5>Description</h5>
If the
<em>lang</em>
option is set to a value of "auto" the value of langdefault determines what the
default language should be in case where a language cannot be detected from the
code sample.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Accepted values</h5>
css, csv, javascript, markup, text</li>
<li>
<h5>Default</h5>
text</li>
<li>
<h5>As labeled in the HTML tool</h5>
Auto detect default</li>
</ul>
</li>
<li id="methodchain">
<h4>methodchain</h4>
<ul>
<li>
<h5>Description</h5>
Whether consecutive methods should be continuously chained onto a single line of
code.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Accepted values</h5>
chain, indent, none</li>
<li>
<h5>Default</h5>
indent</li>
<li>
<h5>As labeled in the HTML tool</h5>
Chain Methods</li>
</ul>
</li>
<li id="miniwrap">
<h4>miniwrap</h4>
<ul>
<li>
<h5>Description</h5>
Whether minified JavaScript code should wrap after a specified character width.
This option requires a value for option
<em>wrap</em>.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Minify Wrapping, for use with wrap</li>
</ul>
</li>
<li id="mode">
<h4>mode</h4>
<ul>
<li>
<h5>Description</h5>
The operation to be performed.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Accepted values</h5>
analysis, beautify, diff, minify, parse</li>
<li>
<h5>Default</h5>
diff</li>
<li>
<h5>As labeled in the HTML tool</h5>
Function</li>
</ul>
</li>
<li id="newline">
<h4>newline</h4>
<ul>
<li>
<h5>Description</h5>
Insert an empty line at the end of output.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Empty new line at end of output</li>
</ul>
</li>
<li id="neverflatten">
<h4>neverflatten</h4>
<ul>
<li>
<h5>Description</h5>
Prevents flattening of destructured lists in JavaScript.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Never Flatten Destructured Lists</li>
</ul>
</li>
<li id="nocaseindent">
<h4>nocaseindent</h4>
<ul>
<li>
<h5>Description</h5>
If the JavaScript keywords
<em>case</em>
and
<em>default</em>
should receive the same indentation as their parent
<em>switch</em>
keyword. This feature is required by certain code validators and style checkers,
such as
<a href="http://jslint.com/">JSLint</a>.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Case Indentation</li>
</ul>
</li>
<li id="nochainindent">
<h4>nochainindent</h4>
<ul>
<li>
<h5>Description</h5>
If indentation should be ignored for chains of JavaScript methods that are
broken onto multiple lines.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Method Chain Indentation</li>
</ul>
</li>
<li id="nodeasync">
<h4>nodeasync
<strong>(node-local.js only)</strong>
</h4>
<ul>
<li>
<h5>Description</h5>
The goal of Pretty Diff version 2 is to have the prettydiff function return a
single string of the desired output and write extranous meta data to a global
object. Unfortunately, with bulk asynchronous operations, such as
<em>readmethod:directory</em>
assignments to a shared global object will result in cross-talk. This means to
capture and communicate the meta data precisely a new object must be passed in
on the options and returned from the function, which returning a Pretty Diff
version 1 styled array of
<em>[data, meta]</em>
where data is the desired string output and meta is the meta data object. If you
are not using the node-local.js file for Node.js interaction and the meta data
is not important then the prettydiff function will simply return a single
desired string.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
</ul>
</li>
<li id="nodeerror">
<h4>nodeerror
<strong>(node-local.js only)</strong>
</h4>
<ul>
<li>
<h5>Description</h5>
Sometimes it is informative to log parse errors to the console. This behavior
can result in excessive noise and break unit tests though.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
</ul>
</li>
<li id="noleadzero">
<h4>noleadzero</h4>
<ul>
<li>
<h5>Description</h5>
If in CSS values leading 0s immediately preceeding a decimal should be removed
or prevented.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Leading 0s</li>
</ul>
</li>
<li id="objsort">
<h4>objsort</h4>
<ul>
<li>
<h5>Description</h5>
Sorts properties of objects in JavaScript and/or CSS and/or attributs in HTML.
The accepted values determine which language this option should be applied.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Accepted values</h5>
all, css, js, markup, none</li>
<li>
<h5>Default</h5>
js</li>
<li>
<h5>As labeled in the HTML tool</h5>
Property Sorting, CSS / JavaScript</li>
</ul>
</li>
<li id="output">
<h4>output
<strong>(node-local.js only)</strong>
</h4>
<ul>
<li>
<h5>Description</h5>
Determines the location of where files should be saved. This is required if the
<a href="#readmethod">readmethod</a>
option has a value of: auto, directory, file, or subdirectory. When the
readmethod option has other values, such as screen or filescreen, this option is
not used. If the readmethod option has a value of
<em>file</em>
the value of this option is used to create or overwrite a file at the specified
location. For all other readmethod values the value of this option designates
the location of a directory.</li>
<li>
<h5>Type</h5>
string</li>
</ul>
</li>
<li id="parseFormat">
<h4>parseFormat</h4>
<ul>
<li>
<h5>Description</h5>
When in parse mode if the output should be arrays of data types (parallel),
arrays of token records (sequential), or an HTML table.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Accepted values</h5>
parallel, sequential, htmltable</li>
<li>
<h5>Default</h5>
parallel</li>
<li>
<h5>As labeled in the HTML tool</h5>
Parsed Output Format</li>
</ul>
</li>
<li id="parseSpace">
<h4>parseSpace</h4>
<ul>
<li>
<h5>Description</h5>
If whitespace tokens should be included in the output parse tree. Including
whitespace tokens in the parse tree is the more standards conformant approach.
Whitespace tokens can be inferred through examination of the
<em>lines</em>
data facet for a given token and tends to make reading the parse tree more
challenging.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Include Whitespace Tokens</li>
</ul>
</li>
<li id="preserve">
<h4>preserve</h4>
<ul>
<li>
<h5>Description</h5>
Determine the number of empty lines to preserve.</li>
<li>
<h5>Type</h5>
number</li>
<li>
<h5>Default</h5>
1</li>
<li>
<h5>As labeled in the HTML tool</h5>
Empty Lines</li>
</ul>
</li>
<li id="preserveComment">
<h4>preserveComment</h4>
<ul>
<li>
<h5>Description</h5>
Preserves coments from reformatting due to option wrap.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
EPreserve Comments From Reformatting Due to Word Wrap</li>
</ul>
</li>
<li id="qml">
<h4>qml</h4>
<ul>
<li>
<h5>Description</h5>
Enables QML syntax support in the <a href="lib/jspretty.js">jspretty.js</a> library. If accessing the jspretty.js library directly without the Pretty Diff application set the option <em>qml</em> to true. Otherwise, this option can be set directly or by providing the value <em>qml</em> to option <a href="#lang">lang</a>. QML is not supported in minification mode.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
(only available in the language selection)</li>
</ul>
</li>
<li id="quoteConvert">
<h4>quoteConvert</h4>
<ul>
<li>
<h5>Description</h5>
Convert the quote characters delimiting strings from either double or single
quotes to the other. Applies to JavaScript and CSS and to attributes in markup.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Accepted values</h5>
double, single, none</li>
<li>
<h5>Default</h5>
none</li>
<li>
<h5>As labeled in the HTML tool</h5>
Quotes, Markup / JavaScript</li>
</ul>
</li>
<li id="readmethod">
<h4>readmethod
<strong>(node-local.js only)</strong>
</h4>
<ul>
<li>
<h5>Description</h5>
Determines how input should be received. The value
<em>auto</em>
changes to directory, file, or screen depending on the source type. The value
<em>directory</em>
will read all files from a single directory. The value
<em>file</em>
reads the contents of a single file. The value
<em>filescreen</em>
reads the contents of a file but outputs the result to the console. The value
<em>screen</em>
will look to the console for code input and outputs to the console. The value
<em>subdirectory</em>
will recursively read files in subdirectories.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Accepted values</h5>
auto, directory, file, filescreen, screen, subdirectory</li>
<li>
<h5>Default</h5>
screen</li>
</ul>
</li>
<li id="selectorlist">
<h4>selectorlist</h4>
<ul>
<li>
<h5>Description</h5>
Retains comma separated CSS selectors on a single line of code.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Comma Separated Selector Lists</li>
</ul>
</li>
<li id="semicolon">
<h4>semicolon</h4>
<ul>
<li>
<h5>Descriptiong</h5>
If semicolon characters at the end of a line should be removed prior to a diff
operation.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Trailing Semicolons</li>
</ul>
</li>
<li id="source">
<h4>source</h4>
<ul>
<li>
<h5>Description</h5>
A code sample to operate upon.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Default</h5>
none</li>
<li>
<h5>As labeled in the HTML tool</h5>
Base Text (diff), Beautification input (beauty), Minification input (minify)</li>
</ul>
</li>
<li id="sourcelabel">
<h4>sourcelabel</h4>
<ul>
<li>
<h5>Descriptiong</h5>
Sets a label describing the value of source property in the diff report.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Default</h5>
Base</li>
<li>
<h5>As labeled in the HTML tool</h5>
Base label (optional)</li>
</ul>
</li>
<li id="space">
<h4>space</h4>
<ul>
<li>
<h5>Description</h5>
Inserts a space following a function keyword for anonymous functions in
JavaScript beautification.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
true</li>
<li>
<h5>As labeled in the HTML tool</h5>
Function Space</li>
</ul>
</li>
<li id="spaceclose">
<h4>spaceclose</h4>
<ul>
<li>
<h5>Description</h5>
Whether markup self-closing tags should terminate with or without a space, for
example "
<strong>
/&gt;</strong>" or "
<strong>/&gt;</strong>". A value of true forces the space and false forces its removal.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
End Self-Closing Tags with a Space</li>
</ul>
</li>
<li id="style">
<h4>style</h4>
<ul>
<li>
<h5>Description</h5>
Whether CSS and JavaScript code should be indented according to the surrounding
markup or if they should be indented starting from 0. This property is only
applied to markup code containing CSS and JavaScript.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
true</li>
<li>
<h5>As labeled in the HTML tool</h5>
Indent Style/Script</li>
</ul>
</li>
<li id="styleguide">
<h4>styleguide</h4>
<ul>
<li>
<h5>Description</h5>
Provides a packaged set of option configurations for JavaScript interpretation
to more closely conform to popular style guides. In the face of a conflict
between something configured to the value of a styleguide option setting and a
separately specified option the styleguide overrides. For additional information
please see the
<a href="guide/styleguide.xhtml">styleguide guide</a>.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Accepted values</h5>
airbnb, crockford, google, grunt, jquery, mediawiki, yandex, none</li>
<li>
<h5>Default</h5>
none</li>
<li>
<h5>Informational Guide</h5>
<a href="guide/styleguide.xhtml">styleguide definitions</a>
</li>
<li>
<h5>As labeled in the HTML tool</h5>
Style Guide
</li>
</ul>
</li>
<li id="summaryonly">
<h4>summaryonly
<strong>(node-local.js only)</strong>
</h4>
<ul>
<li>
<h5>Description</h5>
A Node only option if there should be no files generated and no output to the
screen except for a final summary.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
</ul>
</li>
<li id="tagmerge">
<h4>tagmerge</h4>
<ul>
<li>
<h5>Description</h5>
Combines adjacent start and end tags of the same name into a single self-closing
tag, for example:
<code>&lt;a href="homepage.html"&gt;&lt;/a&gt;</code>
into
<code>&lt;a href="homepage.html"/&gt;</code>.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Merge Empty Tag Sets Into A Single Self-Closing Tag</li>
</ul>
</li>
<li id="tagsort">
<h4>tagsort</h4>
<ul>
<li>
<h5>Description</h5>
Sort child items of each respective markup parent element.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Sort child text/elements of each parent element</li>
</ul>
</li>
<li id="ternaryline">
<h4>ternaryline</h4>
<ul>
<li>
<h5>Description</h5>
By default Pretty Diff will indent on the
<em>?</em>
and
<em>:</em>
operators of ternary statements. Setting this option to true keep these
operators on the same line of code.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Ternary Formatting</li>
</ul>
</li>
<li id="textpreserve">
<h4>textpreserve</h4>
<ul>
<li>
<h5>Description</h5>
Preserve all text exactly as provided. This option eliminates any sort of
beautification or wrapping upon text content in markup type languages.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Preserve text content</li>
</ul>
</li>
<li id="titanium">
<h4>titanium</h4>
<ul>
<li>
<h5>Description</h5>
If the JavaScript parser should parse Titanium Style Sheets instead of
JavaScript. This option may be set explicitly, but is primarily used internally
from language detection or if the value of the
<em>lang</em>
option is "tss".</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
not in the HTML tool</li>
</ul>
</li>
<li id="topcoms">
<h4>topcoms</h4>
<ul>
<li>
<h5>Description</h5>
If minification should include into the output all comments at the top of
JavaScript or CSS input before any code.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Top Comments, CSS / JavaScript</li>
</ul>
</li>
<li id="typescript">
<h4>typescript</h4>
<ul>
<li>
<h5>Description</h5>
If the language is TypeScript this internal option prevents collisions in edge cases that look similar to React JSX format.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
</ul>
</li>
<li id="unformatted">
<h4>unformatted</h4>
<ul>
<li>
<h5>Description</h5>
A markup only option that applies to modes: beautify, diff, minify, and parse.
When set to true this option will preserve the insides of a markup tag.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Default</h5>
false</li>
<li>
<h5>As labeled in the HTML tool</h5>
Do Not Format Inside of Tags</li>
</ul>
</li>
<li id="varword">
<h4>varword</h4>
<ul>
<li>
<h5>Description</h5>
If a single
<em>var</em>
should be used to declare a list of variables or if a var keyword should be used
per variable. A value of
<em>each</em>
will convert comma separated variable lists into separate statements each
starting with a var keyword. The value
<em>list</em>
will convert consecutive variable statements to a comma separated list. The
value
<em>none</em>
omits this option.</li>
<li>
<h5>Type</h5>
string</li>
<li>
<h5>Accepted values</h5>
each, list, none</li>
<li>
<h5>Default</h5>
none</li>
<li>
<h5>As labeled in the HTML tool</h5>
Variable Lists</li>
</ul>
</li>
<li id="vertical">
<h4>vertical</h4>
<ul>
<li>
<h5>Description</h5>
If lists of assignments or properties should be vertically aligned for faster
and easier reading. The accepted values determine to which language this option
should be applied.</li>
<li>
<h5>Type</h5>
boolean</li>
<li>
<h5>Accepted values</h5>
all, css, js, none</li>
<li>
<h5>Default</h5>
js</li>
<li>
<h5>As labeled in the HTML tool</h5>
Vertically Align, CSS / JavaScript</li>
</ul>
</li>
<li id="wrap">
<h4>wrap</h4>
<ul>
<li>
<h5>Description</h5>
In a markup document this option sets how many columns wide text content may be
before wrapping onto a new line. In JavaScript this option determines the
maximum length of a string literal and line comment before being broken in
<em>+</em>
separated fragments. The value 0 disables text wrapping. A negative value
combines
<em>+</em>
separated string literals into a single string.</li>
<li>
<h5>Type</h5>
number</li>
<li>
<h5>Default</h5>
80</li>
<li>
<h5>As labeled in the HTML tool</h5>
Wrap text, JavaScript / Markup</li>
</ul>
</li>
</ol>
</div>
</div>
<div>
<h2>
<button aria-disabled="true" class="heading" role="presentation">Run the Application
<span aria-hidden="true">Show</span>
</button>
</h2>
<div class="content-hide">
<div class="segment" id="getcode">
<h3>Get the Code</h3>
<p>Various options are available for greater portability</p>
<ul>
<li>
<h4><a href="https://github.com/prettydiff/biddle">biddle</a></h4>
<p>
<code>biddle install http://prettydiff.com/downloads/prettydiff/prettydiff_latest.zip</code>
</p>
</li>
<li>
<h4>Bower</h4>
<p>
<code>bower install prettydiff</code>
</p>
</li>
<li>
<h4>Github</h4>
<p>
<code>git clone https://github.com/prettydiff/prettydiff.git</code>
</p>
</li>
<li>
<h4>Manually get the code</h4>
<ul>
<li>Core application file -
<a href="http://prettydiff.com/prettydiff.js">http://prettydiff.com/prettydiff.js</a>
</li>
<li>HTML webtool -
<a href="http://prettydiff.com/index.xhtml">http://prettydiff.com/index.xhtml</a>
</li>
<li>CSS
<ul>
<li>Color Scheme Canvas
<a href="http://prettydiff.com/css/color_canvas.css">http://prettydiff.com/css/color_canvas.css</a>
</li>
<li>Color Scheme Shadow
<a href="http://prettydiff.com/css/color_shadow.css">http://prettydiff.com/css/color_shadow.css</a>
</li>
<li>Color Scheme White
<a href="http://prettydiff.com/css/color_white.css">http://prettydiff.com/css/color_white.css</a>
</li>
<li>Documentation
<a href="http://prettydiff.com/css/documentation.css">http://prettydiff.com/css/documentation.css</a>
</li>
<li>Global
<a href="http://prettydiff.com/css/global.css">http://prettydiff.com/css/global.css</a>
</li>
<li>Index
<a href="http://prettydiff.com/css/index.css">http://prettydiff.com/css/index.css</a>
</li>
<li>Page Specific
<a href="http://prettydiff.com/css/page_specific.css">http://prettydiff.com/css/page_specific.css</a>
</li>
<li>Reports
<a href="http://prettydiff.com/css/reports.css">http://prettydiff.com/css/reports.css</a>
</li>
<li>Webtool Only
<a href="http://prettydiff.com/css/webtool_only.css">http://prettydiff.com/css/webtool_only.css</a>
</li>
</ul>
</li>
<li>Libraries
<ul>
<li>CSS library -
<a href="http://prettydiff.com/lib/csspretty.js">http://prettydiff.com/lib/csspretty.js</a>
</li>
<li>CSV library -
<a href="http://prettydiff.com/lib/csvpretty.js">http://prettydiff.com/lib/csvpretty.js</a>
</li>
<li>diff library -
<a href="http://prettydiff.com/lib/diffview.js">http://prettydiff.com/lib/diffview.js</a>
</li>
<li>finalFile (HTML template) library -
<a href="http://prettydiff.com/lib/finalFile.js">http://prettydiff.com/lib/finalFile.js</a>
</li>
<li>Global Store
<a href="http://prettydiff.com/lib/global.js">http://prettydiff.com/lib/global.js</a>
</li>
<li>JavaScript library -
<a href="http://prettydiff.com/lib/jspretty.js">http://prettydiff.com/lib/jspretty.js</a>
</li>
<li>Language Settings library -
<a href="http://prettydiff.com/lib/language.js">http://prettydiff.com/lib/language.js</a>
</li>
<li>markup library -
<a href="http://prettydiff.com/lib/markuppretty.js">http://prettydiff.com/lib/markuppretty.js</a>
</li>
<li>Options Management library -
<a href="http://prettydiff.com/lib/options.js">http://prettydiff.com/lib/options.js</a>
</li>
<li>custom sort library -
<a href="http://prettydiff.com/lib/safesort.js">http://prettydiff.com/lib/safesort.js</a>
</li>
</ul>
</li>
<li>API utilities
<ul>
<li>DOM (powers the HTML web tool) -
<a href="http://prettydiff.com/api/dom.js">http://prettydiff.com/api/dom.js</a>
</li>
<li>Node (allows execution on command line with Node.js) -
<a href="http://prettydiff.com/api/node-local.js">http://prettydiff.com/api/node-local.js</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>Pretty Diff is no longer published to NPM. For more information please see:
<a
href="https://github.com/prettydiff/prettydiff/issues/291"
style="display:block">https://github.com/prettydiff/prettydiff/issues/291</a></p>
</div>
<div class="segment" id="runcode">
<h3>Run the Code</h3>
<p>There is increased safety if values are always quoted in command line
instructions.</p>
<ul>
<li>
<p>Run it from a web browser by pointing to the address of the project's
index.xhtml file.</p>
</li>
<li>
<p>Run it on the command line with Node.js
<code>cd prettydiff</code>
<code>node api/node-local.js option:value option:value</code>
<code></code>
<code>node api/node-local.js help &nbsp;&nbsp;&nbsp;&nbsp; - prints instructions to the console</code>
<code>node api/node-local.js version &nbsp; - prints only the version string to the console</code>
<code>node api/node-local.js list &nbsp;&nbsp;&nbsp;&nbsp; - displays a list of all current settings on the console</code>
</p>
</li>
<li>
<p>Run it from a biddle installation
<code>biddle global prettydiff</code>
<code>prettydiff option:value option:value</code>
</p>
</li>
<li>
<p>Run it on the command line with Node.js and Bower installation
<code>cd bower_components/prettydiff</code>
<code>node api/node-local.js option:value option:value</code>
</p>
</li>
<li>
<p>Run it from your own Node application
<code>var prettydiff = require("prettydiff"),</code>
<code>&nbsp;&nbsp;&nbsp;&nbsp;args&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= {</code>
<code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: "asdf",</code>
<code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;diff&nbsp;&nbsp;: "asdd",</code>
<code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lang&nbsp;&nbsp;: "text"</code>
<code>&nbsp;&nbsp;&nbsp;&nbsp;},</code>
<code>&nbsp;&nbsp;&nbsp;&nbsp;output&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;=
prettydiff(args);</code>
</p>
</li>
<li>
<p>Run it from your own web application (
<em>ensure the library files are requested into your application</em>)
<code>var global = {},</code>
<code>&nbsp;&nbsp;&nbsp;&nbsp;args&nbsp;&nbsp;&nbsp;= {</code>
<code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source: "asdf",</code>
<code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;diff&nbsp;&nbsp;: "asdd",</code>
<code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lang&nbsp;&nbsp;: "text",</code>
<code>&nbsp;&nbsp;&nbsp;&nbsp;},</code>
<code>&nbsp;&nbsp;&nbsp;&nbsp;output = prettydiff(args);</code>
</p>
</li>
</ul>
<p>To see a browser barebones and barebones RequireJS approach please examine the <a href="test/barebones">barebones code samples</a>.</p>
</div>
</div>
</div>
<div>
<h2>
<button aria-disabled="true" class="heading" role="presentation">License
<span aria-hidden="true">Show</span>
</button>
</h2>
<div class="content-hide">
<div class="segment">
<h3>@source</h3>
<p>
<a href="https://github.com/prettydiff/prettydiff">https://github.com/prettydiff/prettydiff</a>
</p>
</div>
<div class="segment">
<h3>@documentation</h3>
<p>
<a href="http://prettydiff.com/documentation.xhtml">http://prettydiff.com/documentation.xhtml</a>
</p>
</div>
<div class="segment" id="license">
<p>Prettydiff created by Austin Cheney originally on 3 Mar 2009.
http://prettydiff.com/</p>
<p>As of version 2.1.17 Pretty Diff is licensed under CC0. Please see
<a href="license.txt">license.txt</a> for additional information.</p>
</div>
</div>
</div>
<div>
<h2>
<button aria-disabled="true" class="heading" role="presentation">Additional Features
<span aria-hidden="true">Show</span>
</button>
</h2>
<div class="content-hide">
<div class="segment" id="precedence">
<h3>Precedence</h3>
<p>Pretty Diff sets option values according to this order of precedence from
highest priority to lowest:</p>
<ol>
<li>The
<a href="#styleguide">styleguide</a>
option, which is only used in the
<a href="lib/jspretty.js">jspretty</a>
library.</li>
<li>The
<a href="#comment">Pretty Diff comment</a>.</li>
<li>The
<a href="#prettydiffrc">.prettydiffrc</a>
file, which is only available to the
<a href="api/node-local.js">node-local</a>
file (command line Node.js).</li>
<li>User supplied options</li>
<li>Default option values</li>
</ol>
</div>
<div class="segment" id="prettydifrc">
<h3>The
<a href=".prettydiffrc">.prettydiffrc</a>
File</h3>
<p>A configuration file is available for command line execution via the supplied
<a href="api/node-local.js">api/node-local.js</a>
file. Two separate formats are accepted:</p>
<ul>
<li>JSON</li>
<li>JavaScript object</li>
</ul>
<p>The JSON format is easy to write and validate, but it is a static format. If
your desired option and settings never change then this is the ideal format.</p>
<p>A second format is available for advanced configurability. Some users require
certain features for particular languages, modes, or other heuristics. For
example auto-correction might be desired for JavaScript minification, but not
XML beautification. This second format is JavaScript code, which allows a user
to write and supply options against a set of conditions of their choosing. The
code supplied by default in the .prettydiffrc file allows a template by which
users can achieve this format directly without worrying about application and
delivery concerns.</p>
</div>
<div class="segment" id="comment">
<h3>Pretty Diff Comment</h3>
<p>The Pretty Diff option comment is similar in convention to the JSLint option
comment. In the case where multiple Pretty Diff option comments are present in a
document only the first will be processed. If in diff mode and an option comment
is present in the diff code but not the source code then this option comment
will be processed. In order for the option comment to be recognized it must
start with
<strong>/*prettydiff.com</strong>
and end with
<strong>*/</strong>. The options are listed in this comment separated by commas
as a colon separated name value pair. The options match the exact value
definition for the Pretty Diff application properties above and options that
allow abstract values must have their values enclosed in either single or double
quotes. The options can be listed in any order. The option comment should be
separated from other comments to prevent any possibility of corrupted
interpretation. These are examples of appropriate option strings:</p>
<ul>
<li>
<code>/*prettydiff.com mode:beautify, lang:javascript, inchar:"abc"*/</code>
</li>
<li>
<code>&lt;!--/*prettydiff.com mode: beautify, lang: javascript,
inchar: "abc", html: true */--&gt;</code>
</li>
</ul>
</div>
<div class="segment" id="parameters">
<h3>Web Tool URI Parameters</h3>
<dl>
<dt>ace</dt>
<dd>If this parameter is provided with a false value the Ace code editor will be
discarded in favor of regular HTML textarea elements.</dd>
<dt>c</dt>
<dd>A supported color scheme value. Currently supported values: white (default),
shadow, canvas</dd>
<dt>correct</dt>
<dd>When present this parameter forces option
<a href="#correct">correct</a>
to a value of
<em>true</em>. This parameter does not require a value.</dd>
<dt>d</dt>
<dd>The URI of a textual resource to compare to, which becomes the value of option
<a href="#diff">diff</a>. "?", "&amp;", and "#" characters in the URI value must
be URI escaped (percent encoded).</dd>
<dt>jsscope</dt>
<dd>When present this parameter sets the option
<a href="#jsscope">jsscope</a>
to a value of
<em></em>. This parameter does not require a value.</dd>
<dt>l</dt>
<dd>This parameter changes the value for option
<a href="language">language</a>
if provided a supported value.</dd>
<dt>m</dt>
<dd>This parameter changes the value for option
<a href="mode">mode</a>
if provided a supported value.</dd>
<dt>s</dt>
<dd>The URI of a textual resource to process or compare against, which becomes
the value of option
<a href="#source">source</a>. "?", "&amp;", and "#" characters in the URI value
must be URI escaped (percent encoded).</dd>
</dl>
<p>Any defined option name is also supported as a parameter.</p>
<p>Here is an example:
<code>http://prettydiff.com/?s=http://prettydiff.com/prettydiff.js&amp;m=beautify&amp;correct</code>
</p>
</div>
<div class="segment">
<h3>Feature Guides</h3>
<ol>
<li>
<a href="guide/closure_with_jsscope.xhtml">Using jsscope to understand scope, inheritance, and scope chains in JavaScript</a>
</li>
<li>
<a href="guide/tag_ignore.xhtml">Ignoring specified tags from markup beautification</a>
</li>
<li>
<a href="guide/diffcli.xhtml">So its kind of like recursive command line diff, but in JavaScript</a>
</li>
<li>
<a href="guide/react_jsx.xhtml">Processing the JSX format from Facebook's React</a>
</li>
<li>
<a href="guide/jshtml.xhtml">Saving colorful JavaScript code samples</a>
</li>
<li>
<a href="guide/styleguide.xhtml">Conforming to popular style guides with the styleguide option</a>
</li>
<li>
<a href="guide/jscorrect.xhtml">What Pretty Diff can do to auto-correct some sloppiness in JavaScript.</a>
</li>
<li>
<a href="guide/codeArchitecture.xhtml">Brief overview of the prettydiff.js code architecture</a>
</li>
<li>
<a href="guide/nativeModules.xhtml">Native Modules in Pretty Diff</a>
</li>
<li>
<a href="guide/prettydiffrc.xhtml">The .prettydiffrc file</a>
</li>
</ol>
</div>
<div class="segment">
<h3>Additional guides not directly related to the Pretty Diff application</h3>
<ol>
<li>
<a href="guide/unrelated_codeisevil.xhtml">Code is Evil</a>
</li>
<li>
<a href="guide/unrelated_diff.xhtml">An explanation of the diff algorithm in Pretty Diff</a>
</li>
<li>
<a href="guide/unrelated_dom.xhtml">The DOM Explained, Quick and Simple</a>
</li>
<li>
<a href="guide/unrelated_abtest.xhtml">A/B Testing for the Web</a>
</li>
<li>
<a href="guide/unrelated_closureToAChild.xhtml">Explaining Closure To A Child</a>
</li>
<li>
<a href="guide/unrelated_rockstar.xhtml">Becoming a JavaScript Rock Star (In the Real World)</a>
</li>
<li>
<a href="guide/unrelated_parser.xhtml">How to write a parser</a>
</li>
</ol>
</div>
</div>
</div>
<div>
<h2>
<button aria-disabled="true" class="heading" role="presentation">Developer Information
<span aria-hidden="true">Show</span>
</button>
</h2>
<div class="content-hide">
<div class="segment">
<h3>Contribution Guide</h3>
<p>For questions, features, or bug reports please open an issue on
<a href="https://github.com/prettydiff/prettydiff/issues">Github</a>.</p>
<p>If you wish to propose code changes then follow these steps:</p>
<ol>
<li>Fork the repository on Github.</li>
<li>Clone your forked repository to your local machine:
<code>git clone https://github.com/username/prettydiff.git</code>
</li>
<li>Create a new branch for your changes:
<code>git checkout -b branchName</code>
</li>
<li>Run the unit tests to verify if your changes are breaking things:
<code>node test/lint.js</code>
</li>
<li>Open a pull request on Github. Ensure there are comments in the pull request
explaining the what the change does and why it is needed. Including additional
unit tests with the pull request earns extra love.</li>
</ol>
</div>
<div class="segment">
<h3>Unit Tests</h3>
<h4>Running the Tests</h4>
<p>The unit tests require JSLint as a dev dependency. Run the unit tests with
the following commands:
<code>cd prettydiff</code>
<code>git submodule init</code>
<code>git submodule update</code>
<code>node test/lint.js</code>
</p>
<p>The
<a href="test/lint.js">unit test script</a>
checks for the latest version of JSLint once per day that it runs.</p>
<p>The unit tests run in phases, which are different kinds of tests. The name
and order of the test phases are indicated in an array named
<em>order</em>
located at the top of the test script file. Alter that array to run only certain
types of unit tests.</p>
</div>
<div class="segment">
<h3>New Option Guidance</h3>
<h4>Rapid Experimentation</h4>
<p>The easiest way to experiment with adding new options is to arbitrarily add
an option and value to the top of the given library. For example, if you
wish to add a new JavaScript option then just before the
<em>tokenizer</em>
include a line of code like:
<code>options.myNewOptionName = true</code>
A new option reference exists that is avilable through out the application that can
allow or suppress new logic with minimal regression. This line of code will have
to be removed later, but it allows for rapid experimentation.</p>
<h4>Checklist</h4>
<p>The following checklist explains how to expand the documentation and
supported APIs of Pretty Diff for new options.</p>
<ul>
<li>documentation.xhtml - Define the new option in the documentation
<a href="#options">options</a>
section.</li>
<li>Web tool (if not a Node.js only option)
<ul>
<li>index.xhtml - Some options are mode specific while others aren't. Options
should be added to the appropriate language section of each supported mode.</li>
<li>api/dom.js - Add option support to the supported language modes of
<em>pd.event.recycle</em>. The supported language modes are defined as functions:
<em>dom__event_recycle_beautify</em>,
<em>dom__event_recycle_diff</em>,
<em>dom__event_recycle_minify</em>,
<em>dom__event_recycle_parse</em>,
<em>dom__event_recycle_analysis</em>.</li>
</ul>
</li>
<li>api/options.js
<p>Extend the following functions in the api/options.js file to define the option application wide.</p>
<ul>
<li><strong>definitions</strong> - define the option and provide a simple text description</li>
<li><strong>validate</strong> - the logic to assign values against accepted criteria</li>
<li><strong>pdcomment</strong> - only necessary if option is string type with a list of accepted values</li>
<li><strong>domops</strong> - associate ID names (from HTML) to values for populating the pretty diff comment in the web tool</li>
</ul>
</li>
<li>The various libraries are written for independent execution, so each gets
their own default definition for supported options, such as:
<em>jspretty__options</em>. in the lib/jspretty.js file. New options need to be
added in these locations where appropriate.</li>
</ul>
<h4>Additional Guidance</h4>
<p>Keep things alphabetized where possible. Ideal option names are a balance of
uniquely and specifically descriptive but also as short as possible. Options
should ideally support a single data type, though exceptions can be made.
Frequently run the unit tests to determine if the new option causses regression
or understand if regression is necessary. Never be afraid to open a Github issue
or send an email when further guidance is demanded or questions arise.</p>
</div>
</div>
</div>
<div>
<h2>
<button aria-disabled="true" class="heading" role="presentation">Code Status
<span aria-hidden="true">Show</span>
</button>
</h2>
<div class="content-hide" id="status">
<table
class="segment"
id="components"
summary="components, authors, and dates of modification">
<caption>A list of code components, author information, and dates of revision.</caption>
<thead>
<tr>
<th>Component</th>
<th>Author(s)</th>
<th>Summary</th>
<th class="date">Revised</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="ace">ace</a>
</td>
<td>
<a href="http://ace.c9.io">Ace Code Editor</a>
</td>
<td>Ace Code Editor.</td>
<td class="date"></td>
</tr>
<tr>
<td>
<a href="lib/csspretty.js">csspretty.js</a>
</td>
<td>
<a href="http://prettydiff.com/">Austin Cheney</a>
</td>
<td>CSS parser.</td>
<td class="date"></td>
</tr>
<tr>
<td>
<a href="lib/csvbeauty.js">csvpretty.js</a>
</td>
<td>
<a href="http://prettydiff.com/">Austin Cheney</a>
</td>
<td>The function that beautifies character sequence values.</td>
<td class="date"></td>
</tr>
<tr>
<td>
<a href="css">css</a>
</td>
<td>
<a href="http://prettydiff.com/">Austin Cheney</a>
</td>
<td>The CSS that powers everything to do with the form, diff output, and this
documentation.</td>
<td class="date"></td>
</tr>
<tr>
<td>
<a href="lib/diffview.js">diffview.js</a>
</td>
<td>
<span>
<a href="https://github.com/cemerick/jsdifflib">Chas Emerick</a>
- Original</span>
<span>
<a href="http://prettydiff.com/">Austin Cheney</a>
- Major Revision</span>
</td>
<td>Builds the HTML diff output.</td>
<td class="date"></td>
</tr>
<tr>
<td>
<a href="documentation.xhtml">documentation.xhtml</a>
</td>
<td>
<span>
<a href="http://prettydiff.com/">Austin Cheney</a>
</span>
</td>
<td>This documentation page.</td>
<td class="date"></td>
</tr>
<tr>
<td>
<a href="api/dom.js">dom.js</a>
</td>
<td>
<a href="http://prettydiff.com/">Austin Cheney</a>
</td>
<td>A supplemental JavaScript file providing DOM access and interaction with the
web tool.</td>
<td class="date"></td>
</tr>
<tr>
<td>
<a href="lib/finalFile.js">finalFile.js</a>
</td>
<td>
<a href="http://prettydiff.com/">Austin Cheney</a>
</td>
<td>HTML report generator.</td>
<td class="date"></td>
</tr>
<tr>
<td>
<a href="lib/jspretty.js">jspretty.js</a>
</td>
<td>
<span>
<a href="http://prettydiff.com/">Austin Cheney</a>
</span>
<span>
<a href="http://g6auc.me.uk/">Harry Whitfield</a>
- QA support</span>
</td>
<td>Parses JavaScript code.</td>
<td class="date"></td>
</tr>
<tr>
<td>
<a href="lib/language.js">language.js</a>
</td>
<td>
<span>
<a href="http://prettydiff.com/">Austin Cheney</a>
</span>
</td>
<td>Automatic language detection</td>
<td class="date"></td>
</tr>
<tr>
<td>
<a href="test/lint.js">lint.js</a>
</td>
<td>
<span>
<a href="http://prettydiff.com/">Austin Cheney</a>
</span>
</td>
<td>Unit tests, simulations, and lint automation</td>
<td class="date"></td>
</tr>
<tr>
<td>
<a href="lib/markuppretty.js">markuppretty.js</a>
</td>
<td>
<a href="http://prettydiff.com/">Austin Cheney</a>
</td>
<td>Parses markup code.</td>
<td class="date"></td>
</tr>
<tr>
<td>
<a href="lib/options.js">options.js</a>
</td>
<td>
<a href="http://prettydiff.com/">Austin Cheney</a>
</td>
<td>Options management.</td>
<td class="date"></td>
</tr>
<tr>
<td>
<a href="api/node-local.js">node-local.js</a>
</td>
<td>
<a href="http://prettydiff.com/">Austin Cheney</a>
</td>
<td>An API for processing the local command line JavaScript with Node.js</td>
<td class="date"></td>
</tr>
<tr>
<td>
<a href="prettydiff.com.xhtml">prettydiff.com.xhtml</a>
</td>
<td>
<a href="http://prettydiff.com/">Austin Cheney</a>
</td>
<td>Actual Pretty Diff tool HTML file.</td>
<td class="date"></td>
</tr>
<tr>
<td>
<a href="prettydiff.js">prettydiff.js</a>
</td>
<td>
<a href="http://prettydiff.com/">Austin Cheney</a>
</td>
<td>Actual Pretty Diff application code.</td>
<td class="date"></td>
</tr>
<tr>
<td>
<a href="lib/safeSort.js">safeSort.js</a>
</td>
<td>
<a href="http://prettydiff.com/">Austin Cheney</a>
</td>
<td>A small sorting library.</td>
<td class="date"></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Version</th>
<td colspan="2"></td>
</tr>
</tfoot>
</table>
</div>
</div>
</section>
</div>
<script src="lib/global.js" type="application/javascript"></script>
<script src="lib/language.js" type="application/javascript"></script>
<script src="lib/finalFile.js" type="application/javascript"></script>
<script src="api/dom.js" type="application/javascript"></script>
<script src="lib/safeSort.js" type="application/javascript"></script>
<script src="lib/csspretty.js" type="application/javascript"></script>
<script src="lib/csvpretty.js" type="application/javascript"></script>
<script src="lib/diffview.js" type="application/javascript"></script>
<script src="lib/jspretty.js" type="application/javascript"></script>
<script src="lib/markuppretty.js" type="application/javascript"></script>
<script src="prettydiff.js" type="application/javascript"></script>
</body>
</html>