<!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">

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github.min.css">

    <!-- diff2html -->
    <link rel="stylesheet" type="text/css" href="assets/diff2html.min.css">
    <!-- -->


    <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 template-index-min">
<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="demo.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>

        <h1>Diff Prettifier <a href="#help">
          <svg height="32" class="octicon octicon-unverified" viewBox="0 0 16 16" version="1.1" width="64" aria-hidden="true">
            <path
              d="M15.67 7.06l-1.08-1.34c-.17-.22-.28-.48-.31-.77l-.19-1.7a1.51 1.51 0 0 0-1.33-1.33l-1.7-.19c-.3-.03-.56-.16-.78-.33L8.94.32c-.55-.44-1.33-.44-1.88 0L5.72 1.4c-.22.17-.48.28-.77.31l-1.7.19c-.7.08-1.25.63-1.33 1.33l-.19 1.7c-.03.3-.16.56-.33.78L.32 7.05c-.44.55-.44 1.33 0 1.88l1.08 1.34c.17.22.28.48.31.77l.19 1.7c.08.7.63 1.25 1.33 1.33l1.7.19c.3.03.56.16.78.33l1.34 1.08c.55.44 1.33.44 1.88 0l1.34-1.08c.22-.17.48-.28.77-.31l1.7-.19c.7-.08 1.25-.63 1.33-1.33l.19-1.7c.03-.3.16-.56.33-.78l1.08-1.34c.44-.55.44-1.33 0-1.88zM9 11.5c0 .28-.22.5-.5.5h-1c-.27 0-.5-.22-.5-.5v-1c0-.28.23-.5.5-.5h1c.28 0 .5.22.5.5v1zm1.56-4.89c-.06.17-.17.33-.3.47-.13.16-.14.19-.33.38-.16.17-.31.3-.52.45-.11.09-.2.19-.28.27-.08.08-.14.17-.19.27-.05.1-.08.19-.11.3-.03.11-.03.13-.03.25H7.13c0-.22 0-.31.03-.48.03-.19.08-.36.14-.52.06-.14.14-.28.25-.42.11-.13.23-.25.41-.38.27-.19.36-.3.48-.52.12-.22.2-.38.2-.59 0-.27-.06-.45-.2-.58-.13-.13-.31-.19-.58-.19-.09 0-.19.02-.3.05-.11.03-.17.09-.25.16-.08.07-.14.11-.2.2a.41.41 0 0 0-.09.28h-2c0-.38.13-.56.27-.83.16-.27.36-.5.61-.67.25-.17.55-.3.88-.38.33-.08.7-.13 1.09-.13.44 0 .83.05 1.17.13.34.09.63.22.88.39.23.17.41.38.55.63.13.25.19.55.19.88 0 .22 0 .42-.08.59l-.02-.01z"></path>
          </svg>
        </a>
        </h1>
        <p>GitHub, Bitbucket and GitLab commit and pull request compatible</p>
        <p>Just paste the GitHub, Bitbucket or GitLab commit, pull request or merge request url
          or any other git or unified compatible diff and we will render a pretty html representation of it
          with code syntax highlight and line similarity matching for better code reviews.
        </p>
        <h2>Options:</h2>
        <div class="row">
          <div class="col-md-2 col-xs-12 col-15">
            <label title="Output format of the HTML, either line by line or side by side">Output Format
              <select class="options-label-value" id="diff-url-options-output-format" name="outputFormat">
                <option value="line-by-line" selected>Line by Line</option>
                <option value="side-by-side">Side by Side</option>
              </select>
            </label>
          </div>
          <div class=" col-md-2 col-xs-12 col-15">
            <label title="Show the file list summary before the diff">File Summary
              <input class="options-label-value" id="diff-url-options-show-files" type="checkbox" name="showFiles" checked/>
            </label>
          </div>
          <div class=" col-md-2 col-xs-12 col-15">
            <label title="Level of matching for the comparison algorithm">Matching Type
              <select class="options-label-value" id="diff-url-options-matching" name="matching">
                <option value="lines">Lines</option>
                <option value="words" selected>Words</option>
                <option value="none">None</option>
              </select>
            </label>
          </div>
          <div class=" col-md-2 col-xs-12 col-15">
            <label title="Similarity threshold for the matching algorithm">Words Threshold
              <input class="options-label-value" id="diff-url-options-match-words-threshold" type="number"
                     name="matchWordsThreshold" value="0.25" step="0.05"
                     min="0" max="1"/>
            </label>
          </div>
          <div class=" col-md-2 col-xs-12 col-15">
            <label title="Maximum number of comparison performed by the matching algorithm in a block of changes">Max
              Comparisons
              <input class="options-label-value" id="diff-url-options-matching-max-comparisons" type="number"
                     name="matchingMaxComparisons" value="2500"
                     step="100" min="0"/>
            </label>
          </div>
        </div>
        <br>
        <div class="diff-url-wrapper">
          <input id="url" class="diff-url-input" type="text" name="url" placeholder="URL"/>
          <a id="url-btn" class="diff-url-btn btn btn-sm" href="#">Load</a>
        </div>
        <br>
        <div id="url-diff-container" style="margin: 0 auto;">
        </div>
        <br>
        <h3 id="help">Help:</h3>
        <ul>
          <li>
            <b>Why should I use this instead of GitHub, Bitbucket or GitLab?</b>
            <p>Code Syntax Highlight</p>
            <p>Line similarity match (similar lines are together)</p>
            <p>Line by Line and Side by Side diffs</p>
            <p>Supports any git and unified compatible diffs</p>
            <p>Easy code selection</p>
          </li>
          <li>
            <b>What urls are supported?</b>
            <p>Any GitHub, Bitbucket or GitLab Commit, Pull Request or Merge Request urls.</p>
            <p>Any Git or Unified Raw Diff or Patch urls.</p>
          </li>
          <li>
            <b>Can I send a custom url for a friend, colleague or co-worker?</b>
            <p>Just add a url parameter called diff to current url using as value your Commit, Pull Request, Merge Request, Diff
              or Patch url.</p>
            <p>ex: <a href="demo.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">https://diff2html.xyz/demo.html?diff=https://github.com/rtfpessoa/diff2html/pull/106</a>
            </p>
          </li>
          <li>
            <b>Why can't I paste a diff?</b>
            <p><a href="https://diffy.org/">diffy.org</a> is an amazing tool created by <a
              href="https://github.com/pbu88">pbu88</a>
              to share your diffs and uses diff2html under the hood.</p>
            <p>Also, diff2html cli can directly publish diffs to <a href="https://diffy.org/">diffy.org</a></p>
          </li>
        </ul>
        <br>
        <h3>Thank you</h3>
        <p>I want to thank <a href="https://github.com/kevinsimper">kevinsimper</a> for this great idea,
          providing better diff support for existing online services.
        </p>


    </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/highlight.js/9.13.1/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/languages/scala.min.js"></script>

<!-- diff2html -->
<script type="text/javascript" src="assets/diff2html.min.js"></script>
<script type="text/javascript" src="assets/diff2html-ui.min.js"></script>
<!-- -->

<script type="text/javascript" src="demo.min.js"></script>


</body>
</html>