fixes #430

prettydiff · Apr 6, 2017 · 48da756 · 48da756
1 parent 4497c1f
commit 48da756
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 1 deletion.
diff --git a/barebones.xhtml b/barebones.xhtml
@@ -0,0 +1,50 @@
+<?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>
+    </head>
+    <body>
+        <h1>Pretty Diff, barebones example</h1>
+        <p><a href="documentation.xhtml">documentation</a></p>
+        <p>
+            <label for="input" style="display:block">Input</label>
+            <textarea id="input" style="height:200px;white-space:pre;min-width:400px">var a;function g(){return function y() {return q;};};</textarea>
+        </p>
+        <p>
+            <label for="object" style="display:block">Options object</label>
+            <textarea id="object" style="height:200px;white-space:pre;min-width:400px" data-prettydiff-ignore="true">{
+    "mode": "beautify",
+    "lang": "auto"
+}</textarea>
+        </p>
+        <p>
+            <label for="output" style="display:block">Output</label>
+            <textarea id="output" style="height:200px;white-space:pre;min-width:400px"></textarea>
+        </p>
+        <p><button type="button" id="button">Beautify Code</button></p>
+        <script src="lib/global.js" type="application/javascript"></script>
+        <script src="lib/language.js" type="application/javascript"></script>
+        <script src="lib/options.js" type="application/javascript"></script>
+        <script src="lib/finalFile.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>
+        <script type="application/javascript">
+            <![CDATA[
+            var args = JSON.parse(document.getElementById("object").value),
+                button = document.getElementById("button");
+            button.onclick = function () {
+                if (typeof args.source !== "string" || args.source === "") {
+                    args.source = document.getElementById("input").value;
+                }
+                document.getElementById("output").value = global.prettydiff.prettydiff(args);
+            };
+            ]]>
+        </script>
+    </body>
+</html>
diff --git a/documentation.xhtml b/documentation.xhtml
@@ -1946,7 +1946,7 @@
                             <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>
+                                    style="display:block">https://github.com/prettydiff/prettydiff/issues/291</a></p>
                         </div>
                         <div class="segment" id="runcode">
                             <h3>Run the Code</h3>
@@ -2004,6 +2004,7 @@
                                     </p>
                                 </li>
                             </ul>
+                            <p>To see an example of a bare-bones approach to running this application in custom HTML please start with <a href="barebones.xhtml">barebones.xhtml</a>, but please note this file is for demo purposes only and will not work from the prettydiff.com domain due to the site security policy.  It will work on your local file system.</p>
                         </div>
                     </div>
                 </div>