template.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Pretty Diff</title>
	<style>
	body {
		text-align: center;
		margin: 0 1rem 1rem;
	}
	#wrapper {
		display: inline-block;
		margin-top: 1em;
		text-align: left;
		width: 100%;
	}
	h2 {
		align-items: center;
		background: linear-gradient(#fafafa, #eaeaea);
		border: 1px solid #d8d8d8;
		border-bottom: 0;
		color: #555;
		display: flex;
		font: 14px sans-serif;
		justify-content: space-between;
		overflow: hidden;
		padding: 10px 6px;
		text-shadow: 0 1px 0 white;
		margin: 1rem 0 0 0;
	}
	h2:first-child {
		margin-top: 0;
	}
	.title {
		margin-left: 0.5rem;
	}
	.copy {
		float: right;
	}
	.file-diff {
		border: 1px solid #d8d8d8;
		overflow: auto;
		padding: 0.5em 0;
	}
	pre {
		margin: 0;
		font-family: "Bitstream Vera Sans Mono", Courier, monospace;
		font-size: 12px;
		line-height: 1.4em;
		text-indent: 0.5em;
	}
	.file {
		color: #aaa;
	}
	.delete {
		background-color: #fdd;
	}
	.insert {
		background-color: #dfd;
	}
	.info {
		color: #a0b;
	}
	.hidden {
		display: none;
	}
	</style>
</head>
<body>
<div id="wrapper">
{{diff}}
</div>
</body>
</html>