421 lines
22 KiB
HTML
421 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="js">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<!--[if IE]>
|
|
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/>
|
|
<![endif]-->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<meta name="description" content="Diff parser and pretty html generator">
|
|
<meta name="keywords" content="diff2html,git,diff,unified,pretty,html,css,javaccript">
|
|
<meta name="author" content="Rodrigo Fernandes (rtfpessoa)">
|
|
|
|
<title>diff2html</title>
|
|
|
|
<!-- search engine -->
|
|
<link rel="canonical" href="https://diff2html.xyz">
|
|
|
|
<!-- open graph -->
|
|
<meta property="og:title" content="diff2html">
|
|
<meta property="og:type" content="website">
|
|
|
|
<meta property="og:description"
|
|
content="Diff parser and pretty html generator.">
|
|
|
|
<meta property="og:url" content="https://diff2html.xyz">
|
|
<meta property="og:site_name" content="diff2html">
|
|
|
|
<!-- Bootstrap -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
|
|
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="main.min.css" rel="stylesheet">
|
|
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-78351861-2', 'auto');
|
|
ga('send', 'pageview');
|
|
|
|
</script>
|
|
</head>
|
|
<body class="template-index ">
|
|
<div class="swag-line">
|
|
|
|
<div class="container">
|
|
<nav class="navbar navbar-default navbar-tall navbar-full" role="navigation">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#global-nav">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand" href="index.html">diff2html</a>
|
|
</div>
|
|
|
|
<div class="collapse navbar-collapse" id="global-nav">
|
|
<div class="navbar-right">
|
|
<ul class="nav navbar-nav">
|
|
|
|
<li>
|
|
<a href="index.html#install">Getting Started</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="index.html#cli">CLI</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="url.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">Demo</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank">Docs</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="https://github.com/rtfpessoa/diff2html/issues/new" target="_blank">Support</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="hero hero-homepage">
|
|
<span class="hero-booticon">
|
|
<span class="hero-green">diff</span><span class="hero-black">2</span><span
|
|
class="hero-red">html</span>
|
|
</span>
|
|
<h1 class="hero-header">Diff parser and pretty html generator</h1>
|
|
<h4 class="text-muted">Better diffs, unmatched reviews.</h4>
|
|
<h2><a class="btn btn-lg" href="url.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">Demo</a></h2>
|
|
|
|
<div class="screenshots screenshots-fan clearfix">
|
|
|
|
<img class="screenshot hidden-xs" src="img/snapshot-2.png">
|
|
|
|
<a class="screenshot" href="url.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">
|
|
<img src="img/snapshot-3.png">
|
|
</a>
|
|
|
|
<a class="screenshot hidden-xs" href="url.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">
|
|
<img src="img/snapshot-1.png">
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="row row-padded-small row-bordered">
|
|
<div class="col-sm-8 col-sm-offset-2 text-center">
|
|
<h2 class="m-b-md">Each diff provides a comprehensive visualization of the code changes,
|
|
helping developpers identify problems and better understand the changes.</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row row-padded-small homepage-grid row-bordered p-t text-center">
|
|
<div class="col-sm-4">
|
|
<span class="svg-icon-large">
|
|
<svg aria-hidden="true" class="octicon octicon-diff" height="16" version="1.1"
|
|
viewBox="0 0 14 16" width="14"><path
|
|
d="M6 7h2v1H6v2h-1V8H3v-1h2V5h1v2zM3 13h5v-1H3v1z m4.5-11l3.5 3.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V3c0-0.55 0.45-1 1-1h6.5z m2.5 4L7 3H1v12h9V6zM8.5 0S3 0 3 0v1h5l4 4v8h1V4.5L8.5 0z"></path></svg>
|
|
</span>
|
|
<h5><strong>Line by Line and Side by Side changes</strong></h5>
|
|
<p class="text-muted">Each diff features a line by line and side by side preview of your
|
|
changes.</p>
|
|
</div>
|
|
|
|
<div class="col-sm-4">
|
|
<span class="svg-icon-large">
|
|
<svg aria-hidden="true" class="octicon octicon-tasklist" height="16" version="1.1"
|
|
viewBox="0 0 16 16" width="16"><path
|
|
d="M15.41 9H7.59c-0.59 0-0.59-0.41-0.59-1s0-1 0.59-1h7.81c0.59 0 0.59 0.41 0.59 1s0 1-0.59 1zM9.59 4c-0.59 0-0.59-0.41-0.59-1s0-1 0.59-1h5.81c0.59 0 0.59 0.41 0.59 1s0 1-0.59 1H9.59zM0 3.91l1.41-1.3 1.59 1.59L7.09 0l1.41 1.41-5.5 5.5L0 3.91z m7.59 8.09h7.81c0.59 0 0.59 0.41 0.59 1s0 1-0.59 1H7.59c-0.59 0-0.59-0.41-0.59-1s0-1 0.59-1z"></path></svg>
|
|
</span>
|
|
<h5><strong>Code syntax highlight</strong></h5>
|
|
<p class="text-muted">All the code changes are syntax highlighted using <a
|
|
href="https://highlightjs.org/">highlight.js</a>,
|
|
providing more readability.</p>
|
|
</div>
|
|
|
|
<div class="col-sm-4">
|
|
<span class="svg-icon-large">
|
|
<svg aria-hidden="true" class="octicon octicon-clippy" height="16" version="1.1"
|
|
viewBox="0 0 14 16"
|
|
width="14">
|
|
<path d="M2 12h4v1H2v-1z m5-6H2v1h5v-1z m2 3V7L6 10l3 3V11h5V9H9z m-4.5-1H2v1h2.5v-1zM2 11h2.5v-1H2v1z m9 1h1v2c-0.02 0.28-0.11 0.52-0.3 0.7s-0.42 0.28-0.7 0.3H1c-0.55 0-1-0.45-1-1V3c0-0.55 0.45-1 1-1h3C4 0.89 4.89 0 6 0s2 0.89 2 2h3c0.55 0 1 0.45 1 1v5h-1V5H1v9h10V12zM2 4h8c0-0.55-0.45-1-1-1h-1c-0.55 0-1-0.45-1-1s-0.45-1-1-1-1 0.45-1 1-0.45 1-1 1h-1c-0.55 0-1 0.45-1 1z"></path>
|
|
</svg>
|
|
</span>
|
|
<h5><strong>Line similarity matching</strong></h5>
|
|
<p class="text-muted">Similar lines are paired, allowing for easier change tracking.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="install" class="row-padded-small row-centered row-bordered">
|
|
<div class="col-md-12">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h3><strong>Install with Bower</strong></h3>
|
|
<p>You can install and manage diff2html's CSS and JS using Bower:</p>
|
|
<div class="homepage-code-example">
|
|
<p><span class="unselectable">> $ </span><span class="text-muted">bower install diff2html</span></p>
|
|
<span class="btn-clipboard" data-clipboard-text="bower install diff2html" title="Copy">Copy</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h3><strong>Install with npm</strong></h3>
|
|
<p>You can also install diff2html using npm:</p>
|
|
<div class="homepage-code-example">
|
|
<p><span class="unselectable">> $ </span><span class="text-muted">npm install diff2html</span></p>
|
|
<span class="btn-clipboard" data-clipboard-text="npm install diff2html" title="Copy">Copy</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row row-padded-small">
|
|
<div class="col-md-12">
|
|
<a href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank">
|
|
Find usage examples in the Docs
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="cli" class="row row-padded-small row-centered row-bordered">
|
|
<div class="col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-0">
|
|
<h3><strong>With command line integration</strong></h3>
|
|
<h4 class="m-b-md">We work hard to make sure you can have your diffs in a simple and flexible
|
|
way. Go <a href="https://github.com/rtfpessoa/diff2html-cli" target="_blank">here full
|
|
documentation</a>.</h4>
|
|
</div>
|
|
<div class="col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-0">
|
|
<div class="homepage-terminal-example">
|
|
<p class="m-b-md">
|
|
<span class="unselectable">> $ </span><span class="text-muted">npm install -g diff2html-cli</span><br>
|
|
<span class="unselectable">diff2html cli installed!</span>
|
|
</p>
|
|
<p class="m-b-md">
|
|
<span class="unselectable">> $ </span><span class="text-muted">diff2html</span><br>
|
|
<span class="unselectable">Previous commit changes on your browser</span>
|
|
</p>
|
|
<p>
|
|
<span class="unselectable">> $ <span class="text-muted">is that it?</span><br>
|
|
Yup, it's that simple.</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="users" class="row row-padded-small row-centered row-bordered">
|
|
<div class="col-md-12">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h3><strong>Projects using diff2html</strong></h3>
|
|
</div>
|
|
</div>
|
|
<div class="row row-eq-height">
|
|
<div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
|
|
<div class="panel panel-default panel-profile m-b-0">
|
|
<div class="panel-body text-center">
|
|
<h5 class="panel-title">diff2html-cli</h5>
|
|
<p class="m-b">diff2html from your terminal to the browser.</p>
|
|
<a href="https://github.com/rtfpessoa/diff2html-cli" target="_blank"
|
|
class="btn btn-primary-outline btn-sm m-b">
|
|
<span class="icon icon-add-user"></span> View GitHub
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
|
|
<div class="panel panel-default panel-profile m-b-0">
|
|
<div class="panel-body text-center">
|
|
<h5 class="panel-title">Codacy</h5>
|
|
<p class="m-b">Check code style, security, duplication, complexity and coverage on every change.</p>
|
|
<a href="https://www.codacy.com" target="_blank"
|
|
class="btn btn-primary-outline btn-sm m-b">
|
|
<span class="icon icon-add-user"></span> Website
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
|
|
<div class="panel panel-default panel-profile m-b-0">
|
|
<div class="panel-body text-center">
|
|
<h5 class="panel-title">Ungit</h5>
|
|
<p class="m-b">The easiest way to use git. On any platform. Anywhere.</p>
|
|
<a href="https://github.com/FredrikNoren/ungit" target="_blank"
|
|
class="btn btn-primary-outline btn-sm m-b">
|
|
<span class="icon icon-add-user"></span> View GitHub
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
|
|
<div class="panel panel-default panel-profile m-b-0">
|
|
<div class="panel-body text-center">
|
|
<h5 class="panel-title">Diffy</h5>
|
|
<p class="m-b">Share your diffs and explain your ideas without committing.</p>
|
|
<a href="https://diffy.org/" target="_blank"
|
|
class="btn btn-primary-outline btn-sm m-b">
|
|
<span class="icon icon-add-user"></span> Website
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
|
|
<div class="panel panel-default panel-profile m-b-0">
|
|
<div class="panel-body text-center">
|
|
<h5 class="panel-title">diff-pane</h5>
|
|
<p class="m-b">Atom - Diff two panes.</p>
|
|
<a href="https://github.com/t-ari/diff-pane" target="_blank"
|
|
class="btn btn-primary-outline btn-sm m-b">
|
|
<span class="icon icon-add-user"></span> View GitHub
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
|
|
<div class="panel panel-default panel-profile m-b-0">
|
|
<div class="panel-body text-center">
|
|
<h5 class="panel-title">node-giff</h5>
|
|
<p class="m-b">Display git diff on browser.</p>
|
|
<a href="https://github.com/do7be/node-giff" target="_blank"
|
|
class="btn btn-primary-outline btn-sm m-b">
|
|
<span class="icon icon-add-user"></span> View GitHub
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
|
|
<div class="panel panel-default panel-profile m-b-0">
|
|
<div class="panel-body text-center">
|
|
<h5 class="panel-title">edgar-monitor</h5>
|
|
<p class="m-b">A module that processes new Edgar filings and sends out
|
|
notifications.</p>
|
|
<a href="https://github.com/buzzfeed-openlab/edgar-monitor" target="_blank"
|
|
class="btn btn-primary-outline btn-sm m-b">
|
|
<span class="icon icon-add-user"></span> View GitHub
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
|
|
<div class="panel panel-default panel-profile m-b-0">
|
|
<div class="panel-body text-center">
|
|
<h5 class="panel-title">node-git</h5>
|
|
<p class="m-b">Execute Git Command by Node.js.</p>
|
|
<a href="https://github.com/liangshuai/node-git" target="_blank"
|
|
class="btn btn-primary-outline btn-sm m-b">
|
|
<span class="icon icon-add-user"></span> View GitHub
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
|
|
<div class="panel panel-default panel-profile m-b-0">
|
|
<div class="panel-body text-center">
|
|
<h5 class="panel-title">Jenkins</h5>
|
|
<p class="m-b">Show diffs between builds</p>
|
|
<a href="https://wiki.jenkins-ci.org/display/JENKINS/Last+Changes+Plugin" target="_blank"
|
|
class="btn btn-primary-outline btn-sm m-b">
|
|
<span class="icon icon-add-user"></span> Website
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
|
|
<div class="panel panel-default panel-profile m-b-0">
|
|
<div class="panel-body text-center">
|
|
<h5 class="panel-title">Light Review</h5>
|
|
<p class="m-b">Code Reviews with maximum control for the leading developers</p>
|
|
<a href="http://light-review.com/" target="_blank"
|
|
class="btn btn-primary-outline btn-sm m-b">
|
|
<span class="icon icon-add-user"></span> Website
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row row-padded-small text-center">
|
|
<div class="col-sm-8 col-sm-offset-2 text-center">
|
|
<h3><strong>Open Source</strong></h3>
|
|
<h4 class="m-b-md">diff2html is open source.
|
|
If you'd like to be part of the diff2html community or help us improve,
|
|
find us on <a href="https://github.com/rtfpessoa/diff2html" target="_blank">GitHub</a> and
|
|
<a href="https://gitter.im/rtfpessoa/diff2html" target="_blank">Gitter</a>. Need any help?
|
|
</h4>
|
|
<a class="btn btn-md" href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank">
|
|
Read more in the Docs
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<footer class="footer clearfix">
|
|
<p class="col-xs-10 col-xs-offset-1">
|
|
Website originally designed and built by
|
|
<a href="https://twitter.com/mdo" target="_blank">@mdo</a>,
|
|
<a href="https://twitter.com/fat" target="_blank">@fat</a>, and
|
|
<a href="https://twitter.com/dhg" target="_blank">@dhg</a>,
|
|
adapted with <span class="hero-red">❤</span> by
|
|
<a href="https://twitter.com/rtfpessoa" target="_blank">@rtfpessoa</a>.
|
|
</p>
|
|
<ul class="footer-list col-xs-10 col-xs-offset-1">
|
|
|
|
<li class="footer-list-item">
|
|
<a class="footer-list-link" href="https://github.com/rtfpessoa/diff2html#how-to-use"
|
|
target="_blank">FAQ</a>
|
|
</li>
|
|
|
|
<li class="footer-list-item">
|
|
<a class="footer-list-link" href="https://diff2html.xyz">diff2html</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<!-- General JavaScript -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
|
|
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
|
|
crossorigin="anonymous"></script>
|
|
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "http://schema.org/",
|
|
"@type": "SoftwareSourceCode",
|
|
"name": "diff2html",
|
|
"author": "Rodrigo Fernandes",
|
|
"image": "https://diff2html.xyz/img/snapshot-3.png",
|
|
"description": "Diff parser and pretty html generator.",
|
|
"codeRepository": "https://github.com/rtfpessoa/diff2html",
|
|
"programmingLanguage": "JavaScript",
|
|
"runtimePlatform": "Node >= 0.12",
|
|
"mainEntityOfPage": "https://diff2html.xyz/"
|
|
}
|
|
</script>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
|
|
|
|
<script>
|
|
new Clipboard(document.getElementsByClassName("btn-clipboard"));
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|