https://diffpreview.github.io/

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <title>Diff HTML Preview</title>
6  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7  <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
8  <meta name="apple-mobile-web-app-capable" content="yes" />
9  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
10  <meta name="google-site-verification" content="8Wp1LLZkcbUY-3pg28dx2VFqTrzdj0wy4c2-QyVPpZ8" />
11
12  <!-- Bootstrap -->
13  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
14  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
15  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
16  <!--[if lt IE 9]>
17    

17<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

17
18    

18<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

18
19  <![endif]-->
20
21  <style type="text/css">
22    .container {
23      width: auto;
24      max-width: 680px;
25      padding: 0 15px;
26    }
27
28    .container2 {
29      width: auto;
30      max-width: 90%;
31      padding: 0 15px;
32    }
33
34    table.diff {
35      font-family: Courier;
36      border: medium;
37      width: auto;
38    }
39
40    .diff_header {
41      background-color: #e0e0e0;
42      max-width: 50%;
43
44    }
45
46    td.diff_header {
47      text-align: right
48    }
49
50    .diff_next {
51      background-color: #c0c0c0
52    }
53
54    .diff_add {
55      background-color: #aaffaa
56    }
57
58    .diff_chg {
59      background-color: #ffff77
60    }
61
62    .diff_sub {
63      background-color: #ffaaaa
64    }
65  </style>
66
67</head>
68
69<body>
70  <div id="loading" class="container text-center">
71    <br>
72    <p class="lead">Loading...</p>
73  </div>
74
75  <div id="main" class="container hide">
76    <h2>Diff Gist HTML Preview</h2>
77    <p class="lead">If <ins>File Name</ins> is empty, it will preview the first file</ins>
78      as default.</p>
79    <div class="form-inline" role="form">
80      <div class="form-group">
81        <label for="gist_id">https://diffpreview.github.io/?</label>
82        <input type="text" class="form-control input-sm" id="gist_id" placeholder="Gist ID">
83      </div>
84      <div class="form-group">
85        <label for="file_name">/</label>
86        <input type="text" class="form-control input-sm" id="file_name" placeholder="File Name (optional)">
87      </div>
88      <button id="submit" class="btn btn-primary">Submit</button>
89    </div>
90    <br />
91    <div id="alert-box"></div>
92    <a href="https://github.com/diffpreview/diffpreview.github.io"><img
93        style="position: absolute; top: 0; right: 0; border: 0;"
94        src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67"
95        alt="Fork me on GitHub"
96        data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
97  </div>
98
99  <div id="gist_details" class="container hide"></div>
100  <div id="files" class="container hide"></div>
101
102  

102<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

102
103  

103<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

103
104  

104<script src="https://cdn.rawgit.com/github/fetch/master/fetch.js"></script>

104
105  

105<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>

105
106  

106<script src="https://unpkg.com/[email protected]/dist/mermaid.min.js"></script>

106
107  

107<script src="mermaid-showdown.js"></script>

107
108  

108<script src="diff-showdown.js"></script>

108
109  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
110  

110<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>

110
111  <!-- CSS -->
112  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
113
114  <!-- Javascripts -->
115  

115<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>

115
116
117
118  

118<script src="./main.js"></script>

118
119
120  <div id="myDiffElement" class="container2"></div>
121
122  <!-- <div>
123    

123<script src="https://gist.github.com/dasf/sadfacab.js"></script>

123
124  </div> -->
125</body>
126
127</html>