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