fix css for big lines
This commit is contained in:
Rodrigo Fernandes
parent
3449568fc4
commit
12f82cdf67
6 changed files with 86 additions and 43 deletions
22
README.md
22
README.md
|
|
@ -4,7 +4,7 @@ Diff to Html generates pretty HTML diffs from git word diff output.
|
|||
|
||||
## Features
|
||||
|
||||
* line-by-line diff (not side-by-side)
|
||||
* line-by-line` diff
|
||||
|
||||
* char-by-char highlight
|
||||
|
||||
|
|
@ -14,11 +14,21 @@ Diff to Html generates pretty HTML diffs from git word diff output.
|
|||
|
||||
* GitHub like style
|
||||
|
||||
## Setup
|
||||
## Real Example
|
||||
|
||||
Import the diff2html.js in your html.
|
||||
> Go to [Diff2HTML](http://rtfpessoa.github.io/diff2html/)
|
||||
|
||||
> Pretty Html From Git Word Diff Output
|
||||
## Distributions
|
||||
|
||||
* [WebJar](http://www.webjars.org/)
|
||||
|
||||
* [Node Module](https://www.npmjs.org/package/diff2html)
|
||||
|
||||
* Manually download and import `diff2html.js` into your page
|
||||
|
||||
## How to use
|
||||
|
||||
> Pretty Line-by-Line Html From Git Word Diff Output
|
||||
|
||||
Diff2Html.getPrettyHtmlFromDiff(exInput);
|
||||
|
||||
|
|
@ -26,11 +36,11 @@ Import the diff2html.js in your html.
|
|||
|
||||
Diff2Html.getJsonFromDiff(exInput);
|
||||
|
||||
> Pretty Html From Json
|
||||
> Pretty Line-by-Line Html From Json
|
||||
|
||||
Diff2Html.getPrettyHtmlFromJson(exInput);
|
||||
|
||||
> Check out the `template.html` for a complete example.
|
||||
> Check out the `index.html` for a complete example.
|
||||
|
||||
## Contributions
|
||||
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@
|
|||
*
|
||||
*/
|
||||
|
||||
#d2h-wrapper {
|
||||
.d2h-wrapper {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
width: 900px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.d2h-file-wrapper {
|
||||
|
|
@ -28,14 +28,13 @@
|
|||
}
|
||||
|
||||
.d2h-file-stats {
|
||||
display: inline-block;
|
||||
display: inline;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
width: 70px;
|
||||
max-width: 15%;
|
||||
}
|
||||
|
||||
.d2h-lines-added {
|
||||
display: inline-block;
|
||||
background-color: #ceffce;
|
||||
border: 1px solid #b4e2b4;
|
||||
color: #399839;
|
||||
|
|
@ -45,7 +44,6 @@
|
|||
}
|
||||
|
||||
.d2h-lines-deleted {
|
||||
display: inline-block;
|
||||
background-color: #f7c8c8;
|
||||
border: 1px solid #e9aeae;
|
||||
color: #c33;
|
||||
|
|
@ -55,14 +53,13 @@
|
|||
}
|
||||
|
||||
.d2h-file-name {
|
||||
display: inline-block;
|
||||
display: inline;
|
||||
height: 33px;
|
||||
line-height: 33px;
|
||||
width: 750px;
|
||||
}
|
||||
|
||||
.d2h-file-diff > div {
|
||||
width: 100%;
|
||||
max-width: 80%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.d2h-diff-table {
|
||||
|
|
@ -71,6 +68,11 @@
|
|||
font-size: 12px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.d2h-file-diff {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.d2h-code-line {
|
||||
|
|
@ -79,9 +81,7 @@
|
|||
padding-right: 10px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
|
||||
width: 776px;
|
||||
overflow: hidden;
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.d2h-code-line del {
|
||||
|
|
@ -102,13 +102,27 @@
|
|||
border-radius: 0.2em;
|
||||
}
|
||||
|
||||
.line-num1 {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.line-num2 {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.d2h-code-linenumber {
|
||||
width: 1%;
|
||||
min-width: 30px;
|
||||
position: absolute;
|
||||
width: 2%;
|
||||
min-width: 65px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
background-color: #fff;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
text-align: right;
|
||||
border: solid #eeeeee;
|
||||
|
|
@ -116,6 +130,10 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.d2h-code-linenumber:not(:first-child) {
|
||||
border-width: 0 1px 0 1px;
|
||||
}
|
||||
|
||||
.d2h-del {
|
||||
background-color: #f7c8c8;
|
||||
border-color: #e9aeae;
|
||||
|
|
|
|||
33
diff2html.js
33
diff2html.js
|
|
@ -35,7 +35,7 @@
|
|||
*/
|
||||
Diff2Html.prototype.getPrettyHtmlFromDiff = function (diffInput) {
|
||||
var diffJson = generateDiffJson(diffInput);
|
||||
return generateJsonHtml(diffJson);
|
||||
return generateJsonHtml(diffJson, generateFileHtml);
|
||||
};
|
||||
|
||||
/*
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
* Generates pretty html from a json object
|
||||
*/
|
||||
Diff2Html.prototype.getPrettyHtmlFromJson = function (diffJson) {
|
||||
return generateJsonHtml(diffJson);
|
||||
return generateJsonHtml(diffJson, generateFileHtml);
|
||||
};
|
||||
|
||||
var generateDiffJson = function (diffInput) {
|
||||
|
|
@ -94,13 +94,20 @@
|
|||
var startBlock = function (line) {
|
||||
saveBlock();
|
||||
|
||||
var values = /^(@@ -(\d+),(\d+) \+(\d+),(\d+) @@).*/.exec(line);
|
||||
var values;
|
||||
if (values = /^(@@ -(\d+),(\d+) \+(\d+),(\d+) @@).*/.exec(line)) {
|
||||
oldLine = values[2];
|
||||
newLine = values[4];
|
||||
} else {
|
||||
oldLine = 0;
|
||||
newLine = 0;
|
||||
}
|
||||
|
||||
/* create block metadata */
|
||||
currentBlock = {};
|
||||
currentBlock.lines = [];
|
||||
currentBlock.oldStartLine = oldLine = values[2];
|
||||
currentBlock.newStartLine = newLine = values[4];
|
||||
currentBlock.oldStartLine = oldLine;
|
||||
currentBlock.newStartLine = newLine;
|
||||
currentBlock.header = line;
|
||||
};
|
||||
|
||||
|
|
@ -206,8 +213,8 @@
|
|||
* Line By Line HTML
|
||||
*/
|
||||
|
||||
var generateJsonHtml = function (diffFiles) {
|
||||
return "<div id=\"d2h-wrapper\">\n" +
|
||||
var generateJsonHtml = function (diffFiles, htmlTypeFunction) {
|
||||
return "<div class=\"d2h-wrapper\">\n" +
|
||||
diffFiles.map(function (file) {
|
||||
return "<div class=\"d2h-file-wrapper\">\n" +
|
||||
" <div class=\"d2h-file-header\">\n" +
|
||||
|
|
@ -221,7 +228,7 @@
|
|||
" <div class=\"d2h-code-wrapper\">\n" +
|
||||
" <table class=\"d2h-diff-table\">\n" +
|
||||
" <tbody class=\"d2h-diff-tbody\">\n" +
|
||||
" " + generateFileHtml(file) +
|
||||
" " + htmlTypeFunction(file) +
|
||||
" </tbody>\n" +
|
||||
" </table>\n" +
|
||||
" </div>\n" +
|
||||
|
|
@ -297,18 +304,16 @@
|
|||
|
||||
var generateLineHtml = function (line) {
|
||||
return "<tr>\n" +
|
||||
" <td class=\"d2h-code-linenumber " + line.type + "\">" + line.oldLine + "</td>\n" +
|
||||
" <td class=\"d2h-code-linenumber " + line.type + "\">" + line.newLine + "</td>\n" +
|
||||
" <td class=\"d2h-code-linenumber " + line.type + "\">" +
|
||||
" <div class=\"line-num1\">" + line.oldLine + "</div>" +
|
||||
" <div class=\"line-num2\">" + line.newLine + "</div>" +
|
||||
" </td>\n" +
|
||||
" <td class=\"" + line.type + "\">" +
|
||||
" <div class=\"d2h-code-line " + line.type + "\">" + line.content + "</div>" +
|
||||
" </td>\n" +
|
||||
"</tr>\n";
|
||||
};
|
||||
|
||||
/*
|
||||
* Side By Side HTML (work in progress)
|
||||
*/
|
||||
|
||||
/*
|
||||
* HTML Helpers
|
||||
*/
|
||||
|
|
|
|||
1
diff2html.min.css
vendored
Normal file
1
diff2html.min.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.d2h-wrapper{display:block;margin:0 auto;text-align:left;width:100%}.d2h-file-wrapper{border:1px solid #ddd;border-radius:3px;margin-bottom:1em}.d2h-file-header{padding:5px 10px;border-bottom:1px solid #d8d8d8;background-color:#f7f7f7;font:13px Helvetica,arial,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"}.d2h-file-stats{display:inline;font-size:12px;text-align:center;max-width:15%}.d2h-lines-added{background-color:#ceffce;border:1px solid #b4e2b4;color:#399839;border-radius:5px 0 0 5px;padding:2px;width:25px}.d2h-lines-deleted{background-color:#f7c8c8;border:1px solid #e9aeae;color:#c33;border-radius:0 5px 5px 0;padding:2px;width:25px}.d2h-file-name{display:inline;height:33px;line-height:33px;max-width:80%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.d2h-diff-table{border-collapse:collapse;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:12px;height:18px;line-height:18px;width:100%}.d2h-file-diff{overflow-x:scroll}.d2h-code-line{white-space:pre;padding-left:10px;padding-right:10px;height:18px;line-height:18px;margin-left:80px}.d2h-code-line del{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#f99;font-weight:700;border-radius:.2em}.d2h-code-line ins{display:inline-block;margin-top:-1px;text-decoration:none;background-color:#6f7;font-weight:700;border-radius:.2em}.line-num1{display:inline-block;float:left;width:30px}.line-num2{display:inline-block;float:right;width:30px}.d2h-code-linenumber{position:absolute;width:2%;min-width:65px;padding-left:10px;padding-right:10px;height:18px;line-height:18px;background-color:#fff;color:rgba(0,0,0,.3);text-align:right;border:solid #eee;border-width:0 1px 0 0;cursor:pointer}.d2h-code-linenumber:not(:first-child){border-width:0 1px}.d2h-del{background-color:#f7c8c8;border-color:#e9aeae}.d2h-ins{background-color:#ceffce;border-color:#b4e2b4}.d2h-info{background-color:#f8fafd;color:rgba(0,0,0,.3);border-color:#d5e4f2}
|
||||
2
diff2html.min.js
vendored
2
diff2html.min.js
vendored
File diff suppressed because one or more lines are too long
19
index.html
19
index.html
|
|
@ -11,9 +11,11 @@
|
|||
Last Update: Saturday 6 September 2014
|
||||
-->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="diff2html.css">
|
||||
<!--<link rel="stylesheet" type="text/css" href="diff2html.css">-->
|
||||
<link rel="stylesheet" type="text/css" href="diff2html.min.css">
|
||||
|
||||
<script type="text/javascript" src="diff2html.js"></script>
|
||||
<!--<script type="text/javascript" src="diff2html.js"></script>-->
|
||||
<script type="text/javascript" src="diff2html.min.js"></script>
|
||||
<script>
|
||||
var exInput = 'diff --git a/src/app/language/en.json b/src/app/language/en.json\n' +
|
||||
'index ccf92c9..68b8345 100644\n' +
|
||||
|
|
@ -58,12 +60,19 @@
|
|||
' }\n';
|
||||
|
||||
document.onreadystatechange = function () {
|
||||
var diffHtml = Diff2Html.getPrettyHtmlFromDiff(exInput);
|
||||
document.getElementsByTagName('body')[0].innerHTML = diffHtml;
|
||||
var diffJson = Diff2Html.getJsonFromDiff(exInput);
|
||||
var lineByLineDiffHtml = Diff2Html.getPrettyHtmlFromJson(diffJson);
|
||||
document.getElementById('line-by-line').innerHTML = lineByLineDiffHtml;
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<body style="text-align: center; font-family: 'Source Sans Pro',sans-serif;">
|
||||
<h1>Diff to HTML by <a href="https://github.com/rtfpessoa">rtfpessoa</a></h1>
|
||||
|
||||
<h2>Line by Line</h2>
|
||||
|
||||
<div id="line-by-line" style="margin: 0 auto; width: 900px;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue