diff --git a/swh/web/templates/content.html b/swh/web/templates/content.html
index 32225f1c..193871f1 100644
--- a/swh/web/templates/content.html
+++ b/swh/web/templates/content.html
@@ -1,41 +1,126 @@
 {% extends "browse.html" %}
 {% load static %}
 
 {% block header %}
 <script src="{% static 'js/highlightjs/dist/highlight.pack.js' %}"></script>
 <script src="{% static 'js/highlightjs-line-numbers/dist/highlightjs-line-numbers.min.js' %}"></script>
 <script>
   // empty hljs language definition
   function no_highlight(hljs) {
     return {}
   }
   // just a trick to get line numbers working when no highlight
   // has to be performed
   hljs.registerLanguage('nohighlight-swh', no_highlight);
-  hljs.initHighlightingOnLoad();
-  hljs.initLineNumbersOnLoad();
+
+  // keep track of the first highlighted line
+  var first_hl_line = null;
+  // highlighting color
+  var line_hl_color = 'rgb(193, 255, 193)';
+
+  // function to highlight a line
+  function highlight_line(i) {
+    var line_td = $('div[data-line-number="' + i + '"]').parent().parent();
+    line_td.css('background-color', line_hl_color);
+    return line_td;
+  }
+
+  // function to reset highlighting
+  function reset_highlighted_lines() {
+    first_hl_line = null;
+    $('tr').css('background-color', 'inherit');
+  }
+
+  function scrollToLine(lineDomElt) {
+    $('html, body').animate({
+      scrollTop: $(lineDomElt).offset().top - 70
+    }, 500);
+  }
+
+  // function to highlight lines based on a url fragment
+  // in the form '#Lx' or '#Lx-Ly'
+  function parse_url_fragment_for_lines_to_highlight() {
+    var lines = [];
+    var lines_regexp = new RegExp(/L(\d+)/g);
+    var line = lines_regexp.exec(window.location.hash);
+    while (line) {
+      lines.push(parseInt(line[1]));
+      line = lines_regexp.exec(window.location.hash);
+    }
+    reset_highlighted_lines();
+    if  (lines.length == 1) {
+      first_hl_line = parseInt(lines[0]);
+      scrollToLine(highlight_line(lines[0]));
+    } else if (lines[0] < lines[lines.length - 1]) {
+      first_hl_line = parseInt(lines[0]);
+      scrollToLine(highlight_line(lines[0]));
+      for (var i = lines[0]+1; i <= lines[lines.length - 1]; ++i) {
+        highlight_line(i);
+      }
+    }
+  }
+
+  $(document).ready(function() {
+    // highlight code and add line numbers
+    $('code').each(function(i, block) {
+      hljs.highlightBlock(block);
+      hljs.lineNumbersBlock(block);
+    });
+    // click handler to dynamically highlight line(s)
+    // when the user clicks on a line number (lines range
+    // can also be highlighted while holding the shift key)
+    $('body').click(function(evt) {
+      if (evt.target.classList.contains('hljs-ln-n')) {
+        var line = parseInt($(evt.target).data('line-number'));
+        if (evt.shiftKey && first_hl_line && line > first_hl_line) {
+          var first_line = first_hl_line;
+          reset_highlighted_lines();
+          for (var i = first_line; i <= line; ++i) {
+            highlight_line(i);
+          }
+          first_hl_line = first_line;
+          window.location.hash = '#L' + first_line + "-L" + line;
+        } else {
+          reset_highlighted_lines();
+          highlight_line(line);
+          window.location.hash = '#L' + line;
+          scrollToLine(evt.target);
+        }
+      }
+    });
+
+    // update lines highlighting when the url fragment changes
+    $(window).on('hashchange', function() {
+      parse_url_fragment_for_lines_to_highlight();
+    });
+
+    // highlight lines specified by an url fragment
+    parse_url_fragment_for_lines_to_highlight();
+
+  });
+
 </script>
 <link rel="stylesheet" href="{% static 'css/highlightjs/github.css' %}">
 {% endblock %}
 
 {% block swh-browse-main-panel-content %}
 
 {% include "includes/top-navigation.html" %}
 
 <div class="well well-sm" style="margin-bottom: 0px">
 {% if "inode/x-empty" == mimetype %}
 <i>File is empty</i>
 {% elif "text/" in mimetype %}
 <div class="highlightjs">
   <pre>
     <code class="{{ language }}">{{ content }}</code>
   </pre>
 </div>
 {% elif "image/" in mimetype and content %}
   <img src="data:{{ mimetype }};base64,{{ content }}"/>
 {% else %}
 Content with mime type {{ mimetype }} can not be displayed
 {% endif %}
 </div>
 
 {% endblock %}
diff --git a/swh/web/templates/layout.html b/swh/web/templates/layout.html
index 7e97ead2..54ad9ff0 100644
--- a/swh/web/templates/layout.html
+++ b/swh/web/templates/layout.html
@@ -1,79 +1,81 @@
 <!DOCTYPE html>
 {% load static %}
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{% block title %}{% endblock %}</title>
 
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+
     {% block header %}{% endblock %}
 
     <!-- BEGIN: bootstrap -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
 
     <link rel="stylesheet" href="{% static 'css/bootstrap-responsive.min.css' %}">
     <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" />
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
     <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
     <!-- END: bootstrap -->
 
     <link rel="stylesheet" href="{% static 'css/pygment.css' %}">
     <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}" />
     <link rel="icon" href="{% static 'img/icons/swh-logo-32x32.png' %}" sizes="32x32" />
     <link rel="icon" href="{% static 'img/icons/swh-logo-archive-192x192.png' %}" sizes="192x192" />
     <link rel="apple-touch-icon-precomposed" href="{% static 'img/icons/swh-logo-archive-180x180.png' %}" />
     <meta name="msapplication-TileImage" content="{% static 'img/icons/swh-logo-archive-270x270.png' %}" />
     <script>document.domain = "softwareheritage.org";</script>
 
   </head>
   <body>
     <a id="top"></a>
     <div class="jumbotron" style="z-index: 1;">
       <nav class="navbar navbar-default" id="swh-navbar-collapse">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed"
                   data-toggle="collapse" data-target="#swh-navbar-collapse" aria-expanded="false"> <!-- screen-reader -->
 	    <span class="sr-only">Toggle navigation menu</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
           <div class="logo">
             <a class="navbar-brand" href="{% url 'swh-web-homepage' %}"> <!-- logo -->
               <img alt="SWH Archive" src="{% static 'img/swh-logo-archive.png' %}" class="swh-logo" />
             </a>
             <a class="navbar-brand sitename" href="{% url 'swh-web-homepage' %}">
               <span class="first-word">Software</span> <span class="second-word">Heritage</span>
             </a>
           </div>
         </div>
       </nav>
     </div>
     <div class="container">
       <div class="container">
       </div>
       <div class="container content">
         {% block content %}{% endblock %}
       </div>
     </div>
     <div id="footer" class="panel-footer">
       <a href="https://www.softwareheritage.org">Software Heritage</a> &mdash;
       Copyright (C) 2015&ndash;2017, The Software Heritage developers.
       License: <a href="https://www.gnu.org/licenses/agpl.html">GNU
       AGPLv3+</a>. <br /> The source code of Software Heritage <em>itself</em>
       is available on
       our <a href="https://forge.softwareheritage.org/">development
       forge</a>. <br /> The source code files <em>archived</em> by Software
       Heritage are available under their own copyright and licenses. <br />
       <a href="https://www.softwareheritage.org/software-heritage-api-terms-of-use/">Terms of use</a> -
       <a href="https://www.softwareheritage.org/contact/">Contact</a>.
     </div>
     <div id="back-to-top">
       <a href="#top"><img alt="back to top" src="{% static 'img/arrow-up-small.png' %}" /></a>
     </div>
   </body>
 </html>