diff --git a/swh/web/assets/src/bundles/revision/diff-utils.js b/swh/web/assets/src/bundles/revision/diff-utils.js
index 3aeb9a8b..835d4503 100644
--- a/swh/web/assets/src/bundles/revision/diff-utils.js
+++ b/swh/web/assets/src/bundles/revision/diff-utils.js
@@ -1,546 +1,536 @@
 /**
  * Copyright (C) 2018-2020  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
 import 'waypoints/lib/jquery.waypoints';
 
 import {swhSpinnerSrc} from 'utils/constants';
 
 // number of changed files in the revision
 let changes = null;
 let nbChangedFiles = 0;
 // to track the number of already computed files diffs
 let nbDiffsComputed = 0;
 
 // the no newline at end of file marker from Github
 let noNewLineMarker = '<span class="no-nl-marker" title="No newline at end of file">' +
                         '<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">' +
                           '<path fill-rule="evenodd" d="M16 5v3c0 .55-.45 1-1 1h-3v2L9 8l3-3v2h2V5h2zM8 8c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4zM1.5 9.66L5.66 5.5C5.18 5.19 4.61 5 4 5 2.34 5 1 6.34 1 8c0 .61.19 1.17.5 1.66zM7 8c0-.61-.19-1.17-.5-1.66L2.34 10.5c.48.31 1.05.5 1.66.5 1.66 0 3-1.34 3-3z"></path>' +
                         '</svg>' +
                       '</span>';
 
 // to track the total number of added lines in files diffs
 let nbAdditions = 0;
 // to track the total number of deleted lines in files diffs
 let nbDeletions = 0;
 // to track the already computed diffs by id
 let computedDiffs = {};
 // map a diff id to its computation url
 let diffsUrls = {};
 
 // to check if a DOM element is in the viewport
 function isInViewport(elt) {
   let elementTop = $(elt).offset().top;
   let elementBottom = elementTop + $(elt).outerHeight();
 
   let viewportTop = $(window).scrollTop();
   let viewportBottom = viewportTop + $(window).height();
 
   return elementBottom > viewportTop && elementTop < viewportBottom;
 }
 
 // to format the diffs line numbers
 function formatDiffLineNumbers(fromLine, toLine, maxNumberChars) {
   let ret = '';
   if (fromLine != null) {
     for (let i = 0; i < (maxNumberChars - fromLine.length); ++i) {
       ret += ' ';
     }
     ret += fromLine;
   }
   if (fromLine != null && toLine != null) {
     ret += '  ';
   }
   if (toLine != null) {
     for (let i = 0; i < (maxNumberChars - toLine.length); ++i) {
       ret += ' ';
     }
     ret += toLine;
   }
   return ret;
 }
 
 function parseDiffHunkRangeIfAny(lineText) {
   let baseFromLine, baseToLine;
   if (lineText.startsWith('@@')) {
     let linesInfoRegExp = new RegExp(/^@@ -(\d+),(\d+) \+(\d+),(\d+) @@$/gm);
     let linesInfoRegExp2 = new RegExp(/^@@ -(\d+) \+(\d+),(\d+) @@$/gm);
     let linesInfoRegExp3 = new RegExp(/^@@ -(\d+),(\d+) \+(\d+) @@$/gm);
     let linesInfoRegExp4 = new RegExp(/^@@ -(\d+) \+(\d+) @@$/gm);
     let linesInfo = linesInfoRegExp.exec(lineText);
     let linesInfo2 = linesInfoRegExp2.exec(lineText);
     let linesInfo3 = linesInfoRegExp3.exec(lineText);
     let linesInfo4 = linesInfoRegExp4.exec(lineText);
     if (linesInfo) {
       baseFromLine = parseInt(linesInfo[1]) - 1;
       baseToLine = parseInt(linesInfo[3]) - 1;
     } else if (linesInfo2) {
       baseFromLine = parseInt(linesInfo2[1]) - 1;
       baseToLine = parseInt(linesInfo2[2]) - 1;
     } else if (linesInfo3) {
       baseFromLine = parseInt(linesInfo3[1]) - 1;
       baseToLine = parseInt(linesInfo3[3]) - 1;
     } else if (linesInfo4) {
       baseFromLine = parseInt(linesInfo4[1]) - 1;
       baseToLine = parseInt(linesInfo4[2]) - 1;
     }
   }
   if (baseFromLine !== undefined) {
     return [baseFromLine, baseToLine];
   } else {
     return null;
   }
 }
 
 // to compute diff and process it for display
 export function computeDiff(diffUrl, diffId) {
 
   // force diff computation ?
   let force = diffUrl.indexOf('force=true') !== -1;
 
   // it no forced computation and diff already computed, do nothing
   if (!force && computedDiffs.hasOwnProperty(diffId)) {
     return;
   }
 
   // mark diff computation as already requested
   computedDiffs[diffId] = true;
 
   $(`#${diffId}-loading`).css('visibility', 'visible');
 
   // set spinner visible while requesting diff
   $(`#${diffId}-loading`).css('display', 'block');
   $(`#${diffId}-highlightjs`).css('display', 'none');
 
   // request diff computation and process it
   fetch(diffUrl)
     .then(response => response.json())
     .then(data => {
       // increment number of computed diffs
       ++nbDiffsComputed;
       // toggle the 'Compute all diffs' button if all diffs have been computed
       if (nbDiffsComputed === changes.length) {
         $('#swh-compute-all-diffs').addClass('active');
       }
 
       // Large diff (> threshold) are not automatically computed,
       // add a button to force its computation
       if (data.diff_str.indexOf('Large diff') === 0) {
         $(`#${diffId}`)[0].innerHTML = data.diff_str +
           `<br/><button class="btn btn-default btn-sm" type="button"
            onclick="swh.revision.computeDiff('${diffUrl}&force=true', '${diffId}')">` +
            'Request diff</button>';
         setDiffVisible(diffId);
       } else if (data.diff_str.indexOf('@@') !== 0) {
         $(`#${diffId}`).text(data.diff_str);
         setDiffVisible(diffId);
       } else {
 
         // prepare code highlighting
         $(`.${diffId}`).removeClass('nohighlight');
         $(`.${diffId}`).addClass(data.language);
 
         // set unified diff text
         $(`#${diffId}`).text(data.diff_str);
 
         // code highlighting for unified diff
         $(`#${diffId}`).each((i, block) => {
           hljs.highlightBlock(block);
-          hljs.lineNumbersBlock(block);
+          hljs.lineNumbersBlockSync(block);
         });
 
-        // hljs.lineNumbersBlock is asynchronous so we have to postpone our
-        // next treatments by adding it at the end of the current js events queue
-        setTimeout(() => {
-
-          // process unified diff lines in order to generate side-by-side diffs text
-          // but also compute line numbers for unified and side-by-side diffs
-          let baseFromLine = '';
-          let baseToLine = '';
-          let fromToLines = [];
-          let fromLines = [];
-          let toLines = [];
-          let maxNumberChars = 0;
-          let diffFromStr = '';
-          let diffToStr = '';
-          let linesOffset = 0;
-
-          $(`#${diffId} .hljs-ln-numbers`).each((i, lnElt) => {
-            let lnText = lnElt.nextSibling.innerText;
-            let linesInfo = parseDiffHunkRangeIfAny(lnText);
-            let fromLine = '';
-            let toLine = '';
-            // parsed lines info from the diff output
-            if (linesInfo) {
-              baseFromLine = linesInfo[0];
-              baseToLine = linesInfo[1];
-              linesOffset = 0;
-              diffFromStr += (lnText + '\n');
-              diffToStr += (lnText + '\n');
-              fromLines.push('');
-              toLines.push('');
-            // line removed in the from file
-            } else if (lnText.length > 0 && lnText[0] === '-') {
-              baseFromLine = baseFromLine + 1;
-              fromLine = baseFromLine.toString();
-              fromLines.push(fromLine);
-              ++nbDeletions;
-              diffFromStr += (lnText + '\n');
-              ++linesOffset;
-            // line added in the to file
-            } else if (lnText.length > 0 && lnText[0] === '+') {
-              baseToLine = baseToLine + 1;
-              toLine = baseToLine.toString();
-              toLines.push(toLine);
-              ++nbAdditions;
-              diffToStr += (lnText + '\n');
-              --linesOffset;
-            // line present in both files
-            } else {
-              baseFromLine = baseFromLine + 1;
-              baseToLine = baseToLine + 1;
-              fromLine = baseFromLine.toString();
-              toLine = baseToLine.toString();
-              for (let j = 0; j < Math.abs(linesOffset); ++j) {
-                if (linesOffset > 0) {
-                  diffToStr += '\n';
-                  toLines.push('');
-                } else {
-                  diffFromStr += '\n';
-                  fromLines.push('');
-                }
+        // process unified diff lines in order to generate side-by-side diffs text
+        // but also compute line numbers for unified and side-by-side diffs
+        let baseFromLine = '';
+        let baseToLine = '';
+        let fromToLines = [];
+        let fromLines = [];
+        let toLines = [];
+        let maxNumberChars = 0;
+        let diffFromStr = '';
+        let diffToStr = '';
+        let linesOffset = 0;
+
+        $(`#${diffId} .hljs-ln-numbers`).each((i, lnElt) => {
+          let lnText = lnElt.nextSibling.innerText;
+          let linesInfo = parseDiffHunkRangeIfAny(lnText);
+          let fromLine = '';
+          let toLine = '';
+          // parsed lines info from the diff output
+          if (linesInfo) {
+            baseFromLine = linesInfo[0];
+            baseToLine = linesInfo[1];
+            linesOffset = 0;
+            diffFromStr += (lnText + '\n');
+            diffToStr += (lnText + '\n');
+            fromLines.push('');
+            toLines.push('');
+          // line removed in the from file
+          } else if (lnText.length > 0 && lnText[0] === '-') {
+            baseFromLine = baseFromLine + 1;
+            fromLine = baseFromLine.toString();
+            fromLines.push(fromLine);
+            ++nbDeletions;
+            diffFromStr += (lnText + '\n');
+            ++linesOffset;
+          // line added in the to file
+          } else if (lnText.length > 0 && lnText[0] === '+') {
+            baseToLine = baseToLine + 1;
+            toLine = baseToLine.toString();
+            toLines.push(toLine);
+            ++nbAdditions;
+            diffToStr += (lnText + '\n');
+            --linesOffset;
+          // line present in both files
+          } else {
+            baseFromLine = baseFromLine + 1;
+            baseToLine = baseToLine + 1;
+            fromLine = baseFromLine.toString();
+            toLine = baseToLine.toString();
+            for (let j = 0; j < Math.abs(linesOffset); ++j) {
+              if (linesOffset > 0) {
+                diffToStr += '\n';
+                toLines.push('');
+              } else {
+                diffFromStr += '\n';
+                fromLines.push('');
               }
-              linesOffset = 0;
-              diffFromStr += (lnText + '\n');
-              diffToStr += (lnText + '\n');
-              toLines.push(toLine);
-              fromLines.push(fromLine);
             }
-            if (!baseFromLine) {
-              fromLine = '';
-            }
-            if (!baseToLine) {
-              toLine = '';
-            }
-            fromToLines[i] = [fromLine, toLine];
-            maxNumberChars = Math.max(maxNumberChars, fromLine.length);
-            maxNumberChars = Math.max(maxNumberChars, toLine.length);
-          });
-
-          // set side-by-side diffs text
-          $(`#${diffId}-from`).text(diffFromStr);
-          $(`#${diffId}-to`).text(diffToStr);
-
-          // code highlighting for side-by-side diffs
-          $(`#${diffId}-from, #${diffId}-to`).each((i, block) => {
-            hljs.highlightBlock(block);
-            hljs.lineNumbersBlock(block);
-          });
-
-          // hljs.lineNumbersBlock is asynchronous so we have to postpone our
-          // next treatments by adding it at the end of the current js events queue
-          setTimeout(() => {
-            // diff highlighting for added/removed lines on top of code highlighting
-            $(`.${diffId} .hljs-ln-numbers`).each((i, lnElt) => {
-              let lnText = lnElt.nextSibling.innerText;
-              if (lnText.startsWith('@@')) {
-                $(lnElt).parent().addClass('swh-diff-lines-info');
-                let linesInfoText = $(lnElt).parent().find('.hljs-ln-code .hljs-ln-line').text();
-                $(lnElt).parent().find('.hljs-ln-code .hljs-ln-line').children().remove();
-                $(lnElt).parent().find('.hljs-ln-code .hljs-ln-line').text('');
-                $(lnElt).parent().find('.hljs-ln-code .hljs-ln-line').append(`<span class="hljs-meta">${linesInfoText}</span>`);
-              } else if (lnText.length > 0 && lnText[0] === '-') {
-                $(lnElt).parent().addClass('swh-diff-removed-line');
-              } else if (lnText.length > 0 && lnText[0] === '+') {
-                $(lnElt).parent().addClass('swh-diff-added-line');
-              }
-            });
+            linesOffset = 0;
+            diffFromStr += (lnText + '\n');
+            diffToStr += (lnText + '\n');
+            toLines.push(toLine);
+            fromLines.push(fromLine);
+          }
+          if (!baseFromLine) {
+            fromLine = '';
+          }
+          if (!baseToLine) {
+            toLine = '';
+          }
+          fromToLines[i] = [fromLine, toLine];
+          maxNumberChars = Math.max(maxNumberChars, fromLine.length);
+          maxNumberChars = Math.max(maxNumberChars, toLine.length);
+        });
 
-            // set line numbers for unified diff
-            $(`#${diffId} .hljs-ln-numbers`).each((i, lnElt) => {
-              $(lnElt).children().attr(
-                'data-line-number',
-                formatDiffLineNumbers(fromToLines[i][0], fromToLines[i][1],
-                                      maxNumberChars));
-            });
+        // set side-by-side diffs text
+        $(`#${diffId}-from`).text(diffFromStr);
+        $(`#${diffId}-to`).text(diffToStr);
 
-            // set line numbers for the from side-by-side diff
-            $(`#${diffId}-from .hljs-ln-numbers`).each((i, lnElt) => {
-              $(lnElt).children().attr(
-                'data-line-number',
-                formatDiffLineNumbers(fromLines[i], null,
-                                      maxNumberChars));
-            });
+        // code highlighting for side-by-side diffs
+        $(`#${diffId}-from, #${diffId}-to`).each((i, block) => {
+          hljs.highlightBlock(block);
+          hljs.lineNumbersBlockSync(block);
+        });
 
-            // set line numbers for the to side-by-side diff
-            $(`#${diffId}-to .hljs-ln-numbers`).each((i, lnElt) => {
-              $(lnElt).children().attr(
-                'data-line-number',
-                formatDiffLineNumbers(null, toLines[i],
-                                      maxNumberChars));
-            });
+        // diff highlighting for added/removed lines on top of code highlighting
+        $(`.${diffId} .hljs-ln-numbers`).each((i, lnElt) => {
+          let lnText = lnElt.nextSibling.innerText;
+          if (lnText.startsWith('@@')) {
+            $(lnElt).parent().addClass('swh-diff-lines-info');
+            let linesInfoText = $(lnElt).parent().find('.hljs-ln-code .hljs-ln-line').text();
+            $(lnElt).parent().find('.hljs-ln-code .hljs-ln-line').children().remove();
+            $(lnElt).parent().find('.hljs-ln-code .hljs-ln-line').text('');
+            $(lnElt).parent().find('.hljs-ln-code .hljs-ln-line').append(`<span class="hljs-meta">${linesInfoText}</span>`);
+          } else if (lnText.length > 0 && lnText[0] === '-') {
+            $(lnElt).parent().addClass('swh-diff-removed-line');
+          } else if (lnText.length > 0 && lnText[0] === '+') {
+            $(lnElt).parent().addClass('swh-diff-added-line');
+          }
+        });
 
-            // last processing:
-            //  - remove the '+' and '-' at the beginning of the diff lines
-            //    from code highlighting
-            //  - add the "no new line at end of file marker" if needed
-            $(`.${diffId} .hljs-ln-code`).each((i, lnElt) => {
-              if (lnElt.firstChild) {
-                if (lnElt.firstChild.nodeName !== '#text') {
-                  let lineText = lnElt.firstChild.innerHTML;
-                  if (lineText[0] === '-' || lineText[0] === '+') {
-                    lnElt.firstChild.innerHTML = lineText.substr(1);
-                    let newTextNode = document.createTextNode(lineText[0]);
-                    $(lnElt).prepend(newTextNode);
-                  }
-                }
-                $(lnElt).contents().filter((i, elt) => {
-                  return elt.nodeType === 3; // Node.TEXT_NODE
-                }).each((i, textNode) => {
-                  let swhNoNewLineMarker = '[swh-no-nl-marker]';
-                  if (textNode.textContent.indexOf(swhNoNewLineMarker) !== -1) {
-                    textNode.textContent = textNode.textContent.replace(swhNoNewLineMarker, '');
-                    $(lnElt).append($(noNewLineMarker));
-                  }
-                });
-              }
-            });
+        // set line numbers for unified diff
+        $(`#${diffId} .hljs-ln-numbers`).each((i, lnElt) => {
+          $(lnElt).children().attr(
+            'data-line-number',
+            formatDiffLineNumbers(fromToLines[i][0], fromToLines[i][1],
+                                  maxNumberChars));
+        });
 
-            // hide the diff mode switch button in case of not generated diffs
-            if (data.diff_str.indexOf('Diffs are not generated for non textual content') !== 0) {
-              $(`#panel_${diffId} .diff-styles`).css('visibility', 'visible');
-            }
+        // set line numbers for the from side-by-side diff
+        $(`#${diffId}-from .hljs-ln-numbers`).each((i, lnElt) => {
+          $(lnElt).children().attr(
+            'data-line-number',
+            formatDiffLineNumbers(fromLines[i], null,
+                                  maxNumberChars));
+        });
 
-            setDiffVisible(diffId);
+        // set line numbers for the to side-by-side diff
+        $(`#${diffId}-to .hljs-ln-numbers`).each((i, lnElt) => {
+          $(lnElt).children().attr(
+            'data-line-number',
+            formatDiffLineNumbers(null, toLines[i],
+                                  maxNumberChars));
+        });
 
-          });
+        // last processing:
+        //  - remove the '+' and '-' at the beginning of the diff lines
+        //    from code highlighting
+        //  - add the "no new line at end of file marker" if needed
+        $(`.${diffId} .hljs-ln-code`).each((i, lnElt) => {
+          if (lnElt.firstChild) {
+            if (lnElt.firstChild.nodeName !== '#text') {
+              let lineText = lnElt.firstChild.innerHTML;
+              if (lineText[0] === '-' || lineText[0] === '+') {
+                lnElt.firstChild.innerHTML = lineText.substr(1);
+                let newTextNode = document.createTextNode(lineText[0]);
+                $(lnElt).prepend(newTextNode);
+              }
+            }
+            $(lnElt).contents().filter((i, elt) => {
+              return elt.nodeType === 3; // Node.TEXT_NODE
+            }).each((i, textNode) => {
+              let swhNoNewLineMarker = '[swh-no-nl-marker]';
+              if (textNode.textContent.indexOf(swhNoNewLineMarker) !== -1) {
+                textNode.textContent = textNode.textContent.replace(swhNoNewLineMarker, '');
+                $(lnElt).append($(noNewLineMarker));
+              }
+            });
+          }
         });
+
+        // hide the diff mode switch button in case of not generated diffs
+        if (data.diff_str.indexOf('Diffs are not generated for non textual content') !== 0) {
+          $(`#panel_${diffId} .diff-styles`).css('visibility', 'visible');
+        }
+
+        setDiffVisible(diffId);
       }
     });
 }
 
 function setDiffVisible(diffId) {
   // set the unified diff visible by default
   $(`#${diffId}-loading`).css('display', 'none');
   $(`#${diffId}-highlightjs`).css('display', 'block');
 
   // update displayed counters
   $('#swh-revision-lines-added').text(`${nbAdditions} additions`);
   $('#swh-revision-lines-deleted').text(`${nbDeletions} deletions`);
   $('#swh-nb-diffs-computed').text(nbDiffsComputed);
 
   // refresh the waypoints triggering diffs computation as
   // the DOM layout has been updated
   Waypoint.refreshAll();
 }
 
 // to compute all visible diffs in the viewport
 function computeVisibleDiffs() {
   $('.swh-file-diff-panel').each((i, elt) => {
     if (isInViewport(elt)) {
       let diffId = elt.id.replace('panel_', '');
       computeDiff(diffsUrls[diffId], diffId);
     }
   });
 }
 
 function genDiffPanel(diffData) {
   let diffPanelTitle = diffData.path;
   if (diffData.type === 'rename') {
     diffPanelTitle = `${diffData.from_path} &rarr; ${diffData.to_path}`;
   }
   let diffPanelHtml =
   `<div id="panel_${diffData.id}" class="card swh-file-diff-panel">
     <div class="card-header bg-gray-light border-bottom-0">
       <a data-toggle="collapse" href="#panel_${diffData.id}_content">
         <div class="float-left swh-title-color">
           <strong>${diffPanelTitle}</strong>
         </div>
       </a>
       <div class="ml-auto float-right">
         <div class="btn-group btn-group-toggle diff-styles" data-toggle="buttons" style="visibility: hidden;">
           <label class="btn btn-default btn-sm form-check-label active unified-diff-button" onclick="swh.revision.showUnifiedDiff(event, '${diffData.id}')">
             <input type="radio" name="diffs-switch" id="unified" autocomplete="off" checked> Unified
           </label>
           <label class="btn btn-default btn-sm form-check-label splitted-diff-button" onclick="swh.revision.showSplittedDiff(event, '${diffData.id}')">
             <input type="radio" name="diffs-switch" id="side-by-side" autocomplete="off"> Side-by-side
           </label>
         </div>
         <a href="${diffData.content_url}" class="btn btn-default btn-sm" role="button">View file</a>
       </div>
       <div class="clearfix"></div>
     </div>
     <div id="panel_${diffData.id}_content" class="collapse show">
       <div class="swh-diff-loading text-center" id="${diffData.id}-loading" style="visibility: hidden;">
         <img src=${swhSpinnerSrc}></img>
         <p>Loading diff ...</p>
       </div>
       <div class="highlightjs swh-content" style="display: none;" id="${diffData.id}-highlightjs">
         <div id="${diffData.id}-unified-diff">
           <pre><code class="${diffData.id}" id="${diffData.id}"></code></pre>
         </div>
         <div style="width: 100%; display: none;" id="${diffData.id}-splitted-diff">
           <pre class="float-left" style="width: 50%;"><code class="${diffData.id}" id="${diffData.id}-from"></code></pre>
           <pre style="width: 50%"><code class="${diffData.id}" id="${diffData.id}-to"></code></pre>
         </div>
       </div>
     </div>
   </div>`;
   return diffPanelHtml;
 }
 
 // setup waypoints to request diffs computation on the fly while scrolling
 function setupWaypoints() {
   for (let i = 0; i < changes.length; ++i) {
     let diffData = changes[i];
 
     // create a waypoint that will trigger diff computation when
     // the top of the diff panel hits the bottom of the viewport
     $(`#panel_${diffData.id}`).waypoint({
       handler: function() {
         if (isInViewport(this.element)) {
           let diffId = this.element.id.replace('panel_', '');
           computeDiff(diffsUrls[diffId], diffId);
           this.destroy();
         }
       },
       offset: '100%'
     });
 
     // create a waypoint that will trigger diff computation when
     // the bottom of the diff panel hits the top of the viewport
     $(`#panel_${diffData.id}`).waypoint({
       handler: function() {
         if (isInViewport(this.element)) {
           let diffId = this.element.id.replace('panel_', '');
           computeDiff(diffsUrls[diffId], diffId);
           this.destroy();
         }
       },
       offset: function() {
         return -$(this.element).height();
       }
     });
   }
   Waypoint.refreshAll();
 }
 
 // callback to switch from side-by-side diff to unified one
 export function showUnifiedDiff(event, diffId) {
   $(`#${diffId}-splitted-diff`).css('display', 'none');
   $(`#${diffId}-unified-diff`).css('display', 'block');
 }
 
 // callback to switch from unified diff to side-by-side one
 export function showSplittedDiff(event, diffId) {
   $(`#${diffId}-unified-diff`).css('display', 'none');
   $(`#${diffId}-splitted-diff`).css('display', 'block');
 }
 
 // callback when the user clicks on the 'Compute all diffs' button
 export function computeAllDiffs(event) {
   $(event.currentTarget).addClass('active');
   for (let diffId in diffsUrls) {
     if (diffsUrls.hasOwnProperty(diffId)) {
       computeDiff(diffsUrls[diffId], diffId);
     }
   }
   event.stopPropagation();
 }
 
 export async function initRevisionDiff(revisionMessageBody, diffRevisionUrl) {
 
   await import(/* webpackChunkName: "highlightjs" */ 'utils/highlightjs');
 
   // callback when the 'Changes' tab is activated
   $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', e => {
     if (e.currentTarget.text.trim() === 'Changes') {
 
       $('#readme-panel').css('display', 'none');
 
       if (changes) {
         return;
       }
 
       // request computation of revision file changes list
       // when navigating to the 'Changes' tab and add diff panels
       // to the DOM when receiving the result
       fetch(diffRevisionUrl)
         .then(response => response.json())
         .then(data => {
           changes = data.changes;
           nbChangedFiles = data.total_nb_changes;
           let changedFilesText = `${nbChangedFiles} changed file`;
           if (nbChangedFiles !== 1) {
             changedFilesText += 's';
           }
           $('#swh-revision-changed-files').text(changedFilesText);
           $('#swh-total-nb-diffs').text(changes.length);
           $('#swh-revision-changes-list pre')[0].innerHTML = data.changes_msg;
 
           $('#swh-revision-changes-loading').css('display', 'none');
           $('#swh-revision-changes-list pre').css('display', 'block');
           $('#swh-compute-all-diffs').css('visibility', 'visible');
           $('#swh-revision-changes-list').removeClass('in');
 
           if (nbChangedFiles > changes.length) {
             $('#swh-too-large-revision-diff').css('display', 'block');
             $('#swh-nb-loaded-diffs').text(changes.length);
           }
 
           for (let i = 0; i < changes.length; ++i) {
             let diffData = changes[i];
             diffsUrls[diffData.id] = diffData.diff_url;
             $('#swh-revision-diffs').append(genDiffPanel(diffData));
           }
 
           setupWaypoints();
           computeVisibleDiffs();
         });
     } else if (e.currentTarget.text.trim() === 'Files') {
       $('#readme-panel').css('display', 'block');
     }
   });
 
   $(document).ready(() => {
 
     if (revisionMessageBody.length > 0) {
       $('#swh-revision-message').addClass('in');
     } else {
       $('#swh-collapse-revision-message').attr('data-toggle', '');
     }
 
     let $root = $('html, body');
 
     // callback when the user requests to scroll on a specific diff or back to top
     $('#swh-revision-changes-list a[href^="#"], #back-to-top a[href^="#"]').click(e => {
       let href = $.attr(e.currentTarget, 'href');
       // disable waypoints while scrolling as we do not want to
       // launch computation of diffs the user is not interested in
       // (file changes list can be large)
       Waypoint.disableAll();
 
       $root.animate(
         {
           scrollTop: $(href).offset().top
         },
         {
           duration: 500,
           complete: () => {
             window.location.hash = href;
             // enable waypoints back after scrolling
             Waypoint.enableAll();
             // compute diffs visible in the viewport
             computeVisibleDiffs();
           }
         });
 
       return false;
     });
 
   });
 
 }
diff --git a/swh/web/assets/src/utils/highlightjs.js b/swh/web/assets/src/utils/highlightjs.js
index 62cc685e..64639dd0 100644
--- a/swh/web/assets/src/utils/highlightjs.js
+++ b/swh/web/assets/src/utils/highlightjs.js
@@ -1,13 +1,18 @@
 /**
- * Copyright (C) 2018-2019  The Software Heritage developers
+ * Copyright (C) 2018-2020  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
 // highlightjs chunk that will be lazily loaded
 
 import 'highlight.js';
 import 'highlightjs-line-numbers.js';
 import 'highlight.js/styles/github.css';
 import './highlightjs.css';
+
+// define a synchronous version of hljs.lineNumbersBlock
+hljs.lineNumbersBlockSync = function(block) {
+  block.innerHTML = hljs.lineNumbersValue(block.innerHTML);
+};