diff --git a/mercurial/templates/gitweb/changeset.tmpl b/mercurial/templates/gitweb/changeset.tmpl
--- a/mercurial/templates/gitweb/changeset.tmpl
+++ b/mercurial/templates/gitweb/changeset.tmpl
@@ -52,6 +52,6 @@ changeset |
 {files}
 </table></div>
 
-<div class="page_body">{diff}</div>
+<div class="page_body diffblocks">{diff}</div>
 
 {footer}
diff --git a/mercurial/templates/gitweb/filerevision.tmpl b/mercurial/templates/gitweb/filerevision.tmpl
--- a/mercurial/templates/gitweb/filerevision.tmpl
+++ b/mercurial/templates/gitweb/filerevision.tmpl
@@ -64,7 +64,7 @@ file |
 </div>
 
 <div class="page_body">
-{text%fileline}
+<pre class="sourcelines stripes">{text%fileline}</pre>
 </div>
 
 {footer}
diff --git a/mercurial/templates/gitweb/map b/mercurial/templates/gitweb/map
--- a/mercurial/templates/gitweb/map
+++ b/mercurial/templates/gitweb/map
@@ -93,9 +93,7 @@ filediff = filediff.tmpl
 filecomparison = filecomparison.tmpl
 filelog = filelog.tmpl
 fileline = '
-  <div style="font-family:monospace" class="parity{parity}">
-    <pre><a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</pre>
-  </div>'
+  <span id="{lineid}">{strip(line|escape, '\r\n')}</span><a href="#{lineid}"></a>'
 annotateline = '
   <tr style="font-family:monospace" class="parity{parity}">
     <td class="linenr" style="text-align: right;">
@@ -105,10 +103,14 @@ annotateline = '
     <td><pre><a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a></pre></td>
     <td><pre>{line|escape}</pre></td>
   </tr>'
-difflineplus = '<span class="difflineplus"><a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</span>'
-difflineminus = '<span class="difflineminus"><a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</span>'
-difflineat = '<span class="difflineat"><a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</span>'
-diffline = '<a class="linenr" href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}'
+difflineplus = '
+  <span id="{lineid}" class="difflineplus">{strip(line|escape, '\r\n')}</span><a href="#{lineid}"></a>'
+difflineminus = '
+  <span id="{lineid}" class="difflineminus">{strip(line|escape, '\r\n')}</span><a href="#{lineid}"></a>'
+difflineat = '
+  <span id="{lineid}" class="difflineat">{strip(line|escape, '\r\n')}</span><a href="#{lineid}"></a>'
+diffline = '
+  <span id="{lineid}">{strip(line|escape, '\r\n')}</span><a href="#{lineid}"></a>'
 
 comparisonblock ='
   <tbody class="block">
@@ -223,7 +225,7 @@ branchentry = '
       <a href="{url|urlescape}file/{node|short}{sessionvars%urlparameter}">files</a>
     </td>
   </tr>'
-diffblock = '<pre>{lines}</pre>'
+diffblock = '<div class="diffblock"><pre class="sourcelines">{lines}</pre></div>'
 filediffparent = '
   <tr>
     <td>parent {rev}</td>
diff --git a/mercurial/templates/static/style-gitweb.css b/mercurial/templates/static/style-gitweb.css
--- a/mercurial/templates/static/style-gitweb.css
+++ b/mercurial/templates/static/style-gitweb.css
@@ -29,9 +29,9 @@ a.list { text-decoration:none; color:#00
 a.list:hover { text-decoration:underline; color:#880000; }
 table { padding:8px 4px; }
 th { padding:2px 5px; font-size:12px; text-align:left; }
-tr.light:hover, .parity0:hover { background-color:#edece6; }
-tr.dark, .parity1 { background-color:#f6f6f0; }
-tr.dark:hover, .parity1:hover { background-color:#edece6; }
+tr.light:hover, .parity0:hover, pre.sourcelines.stripes > :nth-child(4n+1):hover { background-color:#edece6; }
+tr.dark, .parity1, pre.sourcelines.stripes > :nth-child(4n+3) { background-color:#f6f6f0; }
+tr.dark:hover, .parity1:hover, pre.sourcelines.stripes > :nth-child(4n+3):hover { background-color:#edece6; }
 td { padding:2px 5px; font-size:12px; vertical-align:top; }
 td.closed { background-color: #99f; }
 td.link { padding:2px 5px; font-family:sans-serif; font-size:10px; }
@@ -87,6 +87,37 @@ span.logtags span.bookmarktag {
 span.difflineplus { color:#008800; }
 span.difflineminus { color:#cc0000; }
 span.difflineat { color:#990099; }
+div.diffblocks { counter-reset: lineno; }
+div.diffblock { counter-increment: lineno; }
+pre.sourcelines { position: relative; counter-reset: lineno; }
+pre.sourcelines > span {
+	display: inline-block;
+	box-sizing: border-box;
+	width: 100%;
+	padding: 0 0 0 5em;
+	counter-increment: lineno;
+}
+pre.sourcelines > span:before {
+	-moz-user-select: -moz-none;
+	-khtml-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	display: inline-block;
+	margin-left: -5em;
+	width: 4em;
+	color: #999;
+	text-align: right;
+	content: counters(lineno,".");
+	float: left;
+}
+pre.sourcelines > a {
+	display: inline-block;
+	position: absolute;
+	left: 0px;
+	width: 4em;
+	height: 1em;
+}
 
 /* Graph */
 div#wrapper {
diff --git a/tests/test-hgweb.t b/tests/test-hgweb.t
--- a/tests/test-hgweb.t
+++ b/tests/test-hgweb.t
@@ -340,7 +340,7 @@ static file
 
   $ get-with-headers.py --twice localhost:$HGPORT 'static/style-gitweb.css' - date etag server
   200 Script output follows
-  content-length: 5401
+  content-length: 6242
   content-type: text/css
   
   body { font-family: sans-serif; font-size: 12px; border:solid #d9d8d1; border-width:1px; margin:10px; }
@@ -374,9 +374,9 @@ static file
   a.list:hover { text-decoration:underline; color:#880000; }
   table { padding:8px 4px; }
   th { padding:2px 5px; font-size:12px; text-align:left; }
-  tr.light:hover, .parity0:hover { background-color:#edece6; }
-  tr.dark, .parity1 { background-color:#f6f6f0; }
-  tr.dark:hover, .parity1:hover { background-color:#edece6; }
+  tr.light:hover, .parity0:hover, pre.sourcelines.stripes > :nth-child(4n+1):hover { background-color:#edece6; }
+  tr.dark, .parity1, pre.sourcelines.stripes > :nth-child(4n+3) { background-color:#f6f6f0; }
+  tr.dark:hover, .parity1:hover, pre.sourcelines.stripes > :nth-child(4n+3):hover { background-color:#edece6; }
   td { padding:2px 5px; font-size:12px; vertical-align:top; }
   td.closed { background-color: #99f; }
   td.link { padding:2px 5px; font-family:sans-serif; font-size:10px; }
@@ -432,6 +432,37 @@ static file
   span.difflineplus { color:#008800; }
   span.difflineminus { color:#cc0000; }
   span.difflineat { color:#990099; }
+  div.diffblocks { counter-reset: lineno; }
+  div.diffblock { counter-increment: lineno; }
+  pre.sourcelines { position: relative; counter-reset: lineno; }
+  pre.sourcelines > span {
+  	display: inline-block;
+  	box-sizing: border-box;
+  	width: 100%;
+  	padding: 0 0 0 5em;
+  	counter-increment: lineno;
+  }
+  pre.sourcelines > span:before {
+  	-moz-user-select: -moz-none;
+  	-khtml-user-select: none;
+  	-webkit-user-select: none;
+  	-ms-user-select: none;
+  	user-select: none;
+  	display: inline-block;
+  	margin-left: -5em;
+  	width: 4em;
+  	color: #999;
+  	text-align: right;
+  	content: counters(lineno,".");
+  	float: left;
+  }
+  pre.sourcelines > a {
+  	display: inline-block;
+  	position: absolute;
+  	left: 0px;
+  	width: 4em;
+  	height: 1em;
+  }
   
   /* Graph */
   div#wrapper {