git diff --with-colors to HTML

git-diff-with-colors.html

<?php

/**
 * git diff --with-colors A B > colors.diff
 */

function escape_meta ($string) {
    $string = htmlspecialchars($string);
    
    $string = str_replace(
        array(
            "\033[1m",
            "\033[22m",
            
            "\033[4m",
            "\033[24m",
            
            "\033[36m",
            "\033[34m",
            "\033[31m",
            "\033[35m",
            "\033[32m",
            
            "\033[39m",
            "\033[m",
        ),
        array(
            "<span class=\"strong\">",
            "</span>",
            
            "<span class=\"underline\">",
            "</span>",
            
            "<span class=\"cyan\">",
            "<span class=\"blue\">",
            "<span class=\"red\">",
            "<span class=\"magenta\">",
            "<span class=\"green\">",
            
            "</span>",
            "</span>",
        ),
        $string
    );
    
    $string = "<pre>" . str_replace("<span class=\"strong\">diff --git","</pre><pre><span class=\"strong\">diff --git",$string) . "</pre>";
    $string = preg_replace("@<pre><span class=\"strong\">diff --git a/(.*?) b/.*?</span>@","<h2>$1</h2><pre><span class=\"strong\">diff --git a/$1 b/$1</span>",$string);
    
    return $string;
}

?>
<style type="text/css">
body
{margin:8px;}

body, pre
{font-family:"Courier New",Courier,monospace;}

h2
{-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
-border-radius:5px 0 0 5px;
border-radius:5px 0 0 5px;
border:1px solid #ddd;
border-bottom-color:#ccc;
border-right:none;
background-color:#f6f6f6;
font-size:.9em;
margin:2px 0;
padding:.6em;
cursor:pointer;}

h2:before
{content:"+ ";}

pre
{-moz-border-radius:5px;
-webkit-border-radius:5px;
-border-radius:5px;
border-radius:5px;
border:1px solid #ddd;
background-color:#f6f6f6;
font-size:.9em;
margin-top:0;
padding:1em;
overflow:auto;}

.strong
{color:#333;
font-weight:bold;
font-style:italic;}

.underline
{text-decoration:underline;}

.cyan
{color:#6cc;
font-weight:bold;
font-style:italic;
display:block;
line-height:1em;}

.blue
{color:#66f;
font-weight:bold;}

.red
{color:#f66;
font-weight:bold;}

.magenta
{color:#c6c;
font-weight:bold;}

.green
{color:#3c3;
font-weight:bold;}

#top-panel
{font-size:small;
line-height:auto!important;
position:relative;}

#top-panel ul
{position:absolute;
top:0;
right:0;}

#top-panel li
{list-style:none;
float:right;
border:1px solid #ddd;
background-color:#f6f6f6;
padding:3px;
margin:2px;}

#left-panel
{float:left;
height:100%;
overflow-y:scroll;
margin-right:8px;}

#right-panel
{float-right;}

.clear
{clear:both;}

.selected
{border-color:#999;
background-color:#fff;}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
document.write("<style type=\"text/css\">pre{display:none;}</style>");
</script>
<script type="text/javascript">
$(function(){
    var pre = $("pre"),
    h2 = $("h2");
    
    h2.each(function(){
        var $this = $(this);
        $this.data("pre",$this.next("pre"));
    })
    .bind("click",function(){
        var $this = $(this),
        mem = $this.data("pre");
        
        h2.removeClass("selected");
        pre.filter(":visible").not(mem).slideUp();
        $this.addClass("selected").data("pre").not(":visible").slideToggle();
    });
    
    $(".strong").attr("title","Git details");
    $(".cyan").attr("title","Edited lines");
    
    $("#top-panel ul").append("<li>" + h2.length + " files edited</li>");
    $("#left-panel").append(h2);
});
</script>
<div id="top-panel">
    <h1>Git diff</h1>
    <ul>
        <li><span class="strong">Git diff</span></li>
        <li><span class="cyan">Edited lines</span></li>
        <li><span class="red">Original content</span></li>
        <li><span class="green">New content</span></li>
    </ul>
    <div class="clear"></div>
</div>
<div id="left-panel"></div>
<div id="right-panel">
    <?php echo escape_meta(file_get_contents("colors.diff")) ?>
</div>
<div class="clear"></div>