A worked example, rendered from real sample data. Sign in to run the tool on your own input.
diff --git a/src/app.ts b/src/app.ts
index abc1234..def5678 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -1,5 +1,7 @@
import express from 'express';
+import cors from 'cors';
const app = express();
+app.use(cors());
app.use(express.json());
-app.listen(3000);
+app.listen(process.env.PORT || 3000);<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Diff — 1 file changed</title>
<style>
:root{--bg:#ffffff;--fg:#1f2328;--muted:#656d76;--line:#d8dee4;--panel:#f6f8fa;--add:#e6ffec;--addb:#abf2bc;--del:#ffebe9;--delb:#ffc1c0;--meta:#ddf4ff;--metafg:#0550ae;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#0d1117;--fg:#e6edf3;--muted:#8b949e;--line:#30363d;--panel:#161b22;--add:#12261e;--addb:#1f6f3f;--del:#25171c;--delb:#8b2c31;--meta:#121d2f;--metafg:#4493f8}}
*{box-sizing:border-box}
body{margin:0;padding:24px;background:var(--bg);color:var(--fg);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
h1{font-size:18px;margin:0 0 4px}
.sum{color:var(--muted);font-size:13px;margin-bottom:16px}
.sum b.a{color:#1a7f37}.sum b.d{color:#cf222e}
.stat{border:1px solid var(--line);border-radius:6px;margin-bottom:16px;width:100%;border-collapse:collapse;font-size:12px}
.stat td{padding:4px 10px;border-bottom:1px solid var(--line)}
.stat tr:last-child td{border-bottom:0}
.stat .bar{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-1px}
.stat .bar i{font-style:normal;color:#1a7f37}.stat .bar u{text-decoration:none;color:#cf222e}
section{border:1px solid var(--line);border-radius:6px;margin-bottom:16px;overflow:hidden}
section>header{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--panel);border-bottom:1px solid var(--line);padding:8px 12px}
header .path{font-family:ui-m
…
Convert unified git diff output to syntax-highlighted HTML. Part of the DevTools Surf developer suite. Browse more tools in the Developer Utilities collection.