diff --git a/diff-showdown.js b/diff-showdown.js new file mode 100644 index 0000000..d96b6c8 --- /dev/null +++ b/diff-showdown.js @@ -0,0 +1,61 @@ +/** + * Support for Mermaid in Showdown + */ +(function (extension) { + 'use strict'; + + if (typeof showdown !== 'undefined') { + // global (browser or nodejs global) + extension(showdown); + } else if (typeof define === 'function' && define.amd) { + // AMD + define(['showdown'], extension); + } else if (typeof exports === 'object') { + // Node, CommonJS-like + module.exports = extension(require('showdown')); + } else { + // showdown was not found so we throw + throw Error('Could not find showdown library'); + } + +}(function (showdown) { + 'use strict'; + + var mermaidBlocks = []; + + /** + * + * Support for mermaid.js + */ + showdown.extension('diff', function () { + return [ + { + type: 'lang', + regex: '(?:^|\\n)``` ?diff(.*)\\n([\\s\\S]*?)\\n```', + replace: function (s, match) { + var thing = s.match('(?:^|\\n)``` ?diff(.*)\\n([\\s\\S]*?)\\n```'); + var thing_group = thing.length - 1; + mermaidBlocks.push(thing[thing_group]); + var n = mermaidBlocks.length - 1; + return '%PLACEHOLDER' + n + '%'; + } + }, + + { + type: 'output', + filter: function (text) { + var new_text = ''; + for (var i = 0; i < mermaidBlocks.length; ++i) { + var pat = '%PLACEHOLDER' + i + '%'; + //text = text.replace(new RegExp(pat, 'gi'), '
' + mermaidBlocks[i] + '
'); + } + new_text = mermaidBlocks.join('\n\n') + //reset array + mermaidBlocks = []; + return new_text; + } + } + + ]; + }); +})); \ No newline at end of file diff --git a/diff2html.html b/diff2html.html new file mode 100644 index 0000000..752f16f --- /dev/null +++ b/diff2html.html @@ -0,0 +1,46 @@ + + + + + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/index.html b/index.html index 7e4638d..1bc372c 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,13 @@ + - Gist HTML Preview - - - - - + Diff HTML Preview + + + + + @@ -23,9 +24,48 @@ max-width: 680px; padding: 0 15px; } + + .container2 { + width: auto; + max-width: 90%; + padding: 0 15px; + } + + table.diff { + font-family: Courier; + border: medium; + width: auto; + } + + .diff_header { + background-color: #e0e0e0; + max-width: 50%; + + } + + td.diff_header { + text-align: right + } + + .diff_next { + background-color: #c0c0c0 + } + + .diff_add { + background-color: #aaffaa + } + + .diff_chg { + background-color: #ffff77 + } + + .diff_sub { + background-color: #ffaaaa + } +

@@ -33,11 +73,12 @@
-

Gist HTML Preview

-

If File Name is empty, it will preview index.html or the first file as default.

+

Diff Gist HTML Preview

+

If File Name is empty, it will preview the first file + as default.

- +
@@ -46,14 +87,41 @@

Gist HTML Preview

-
+
- Fork me on GitHub + Fork me on GitHub
+
+
+ + + + + + + + + + + + + + + +
+ + - + + \ No newline at end of file diff --git a/main.js b/main.js index 13e9a1b..94cd170 100644 --- a/main.js +++ b/main.js @@ -1,18 +1,76 @@ (function () { - function showMainPage () { - document.getElementById('main').className = 'container'; // remove class 'hide' + function showMainPage() { + document.getElementById('main').className = 'container'; // remove class 'hide' document.getElementById('loading').className += ' hide'; // add class 'hide' + document.getElementById('files').className = 'container'; // remove class 'hide' + document.getElementById('gist_details').className = 'container'; // remove class 'hide' } - function showError (message) { + function showError(message) { document.getElementById('alert-box').innerHTML += '
' - + '×' - + message - + '
'; + + '×' + + message + + ''; } - function submit () { + // https://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-bytes-to-kb-mb-gb-in-javascript + function formatBytes(bytes, decimals = 2) { + if (!+bytes) return '0 Bytes' + + const k = 1024 + const dm = decimals < 0 ? 0 : decimals + const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] + + const i = Math.floor(Math.log(bytes) / Math.log(k)) + + return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}` + } + + function addGistDetails(info) { + var html = `

Gist Details: