diff --git a/assets/src/bundles/webapp/badges.js b/assets/src/bundles/webapp/badges.js
index efc1c41d..710aa86f 100644
--- a/assets/src/bundles/webapp/badges.js
+++ b/assets/src/bundles/webapp/badges.js
@@ -1,51 +1,53 @@
 /**
  * Copyright (C) 2019-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
  */
 
 export function showBadgeInfoModal(objectType, objectSWHID) {
   let badgeImageUrl;
   let badgeLinkUrl;
   if (objectType === 'origin') {
     badgeImageUrl = Urls.swh_badge(objectType, objectSWHID);
     badgeLinkUrl = `${Urls.browse_origin()}?origin_url=${objectSWHID}`;
   } else {
     const pos = objectSWHID.indexOf(';');
     if (pos !== -1) {
       const objectSWHIDNoContext = objectSWHID.slice(0, pos);
       badgeImageUrl = Urls.swh_badge_swhid(objectSWHIDNoContext);
       $('.swhid').each((i, swhid) => {
         if (swhid.id === objectSWHIDNoContext) {
           badgeLinkUrl = swhid.pathname;
         }
       });
     } else {
       badgeImageUrl = Urls.swh_badge_swhid(objectSWHID);
       badgeLinkUrl = Urls.browse_swhid(objectSWHID);
     }
   }
   const absoluteBadgeImageUrl = `${window.location.origin}${badgeImageUrl}`;
   const absoluteBadgeLinkUrl = `${window.location.origin}${badgeLinkUrl}`;
   const html = `
   <a href="${absoluteBadgeLinkUrl}">
     <img class="swh-badge" src="${absoluteBadgeImageUrl}">
   </a>
   <div>
     <label>HTML</label>
-    <pre class="swh-badge-html">&lt;a href="${absoluteBadgeLinkUrl}"&gt;
+    <pre><code class="swh-badge-html html">&lt;a href="${absoluteBadgeLinkUrl}"&gt;
     &lt;img src="${absoluteBadgeImageUrl}"&gt;
-&lt;/a&gt;</pre>
+&lt;/a&gt;</code></pre>
   </div>
   <div>
     <label>Markdown</label>
-    <pre class="swh-badge-md">[![SWH](${absoluteBadgeImageUrl})](${absoluteBadgeLinkUrl})</pre>
+    <pre><code class="swh-badge-md markdown">[![SWH](${absoluteBadgeImageUrl})](${absoluteBadgeLinkUrl})</code></pre>
   </div>
   <div>
     <label>reStructuredText</label>
     <pre class="swh-badge-rst">.. image:: ${absoluteBadgeImageUrl}
     :target: ${absoluteBadgeLinkUrl}</pre>
   </div>`;
   swh.webapp.showModalHtml('Software Heritage badge integration', html);
+  swh.webapp.highlightCode(false, '.swh-badge-html');
+  swh.webapp.highlightCode(false, '.swh-badge-md');
 }
diff --git a/assets/src/bundles/webapp/code-highlighting.js b/assets/src/bundles/webapp/code-highlighting.js
index ac8983ba..fb7f03ac 100644
--- a/assets/src/bundles/webapp/code-highlighting.js
+++ b/assets/src/bundles/webapp/code-highlighting.js
@@ -1,117 +1,117 @@
 /**
  * Copyright (C) 2018-2019  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 {removeUrlFragment} from 'utils/functions';
 
 // keep track of the first highlighted line
 let firstHighlightedLine = null;
 // highlighting color
 const lineHighlightColor = 'rgb(193, 255, 193)';
 
 // function to highlight a line
 export function highlightLine(i, firstHighlighted = false) {
   const lineTd = $(`.hljs-ln-line[data-line-number="${i}"]`);
   lineTd.css('background-color', lineHighlightColor);
   if (firstHighlighted) {
     firstHighlightedLine = i;
   }
   return lineTd;
 }
 
 // function to reset highlighting
 export function resetHighlightedLines() {
   firstHighlightedLine = null;
   $('.hljs-ln-line[data-line-number]').css('background-color', 'inherit');
 }
 
 export function scrollToLine(lineDomElt) {
   if ($(lineDomElt).closest('.swh-content').length > 0) {
     $('html, body').animate({
       scrollTop: $(lineDomElt).offset().top - 70
     }, 500);
   }
 }
 
-export async function highlightCode(showLineNumbers = true) {
+export async function highlightCode(showLineNumbers = true, selector = 'code') {
 
   await import(/* webpackChunkName: "highlightjs" */ 'utils/highlightjs');
 
   // function to highlight lines based on a url fragment
   // in the form '#Lx' or '#Lx-Ly'
   function parseUrlFragmentForLinesToHighlight() {
     const lines = [];
     const linesRegexp = new RegExp(/L(\d+)/g);
     let line = linesRegexp.exec(window.location.hash);
     if (line === null) {
       return;
     }
     while (line) {
       lines.push(parseInt(line[1]));
       line = linesRegexp.exec(window.location.hash);
     }
     resetHighlightedLines();
     if (lines.length === 1) {
       firstHighlightedLine = parseInt(lines[0]);
       scrollToLine(highlightLine(lines[0]));
     } else if (lines[0] < lines[lines.length - 1]) {
       firstHighlightedLine = parseInt(lines[0]);
       scrollToLine(highlightLine(lines[0]));
       for (let i = lines[0] + 1; i <= lines[lines.length - 1]; ++i) {
         highlightLine(i);
       }
     }
   }
 
   $(document).ready(() => {
     // highlight code and add line numbers
-    $('code').each((i, elt) => {
+    $(selector).each((i, elt) => {
       hljs.highlightElement(elt);
       if (showLineNumbers) {
         hljs.lineNumbersElement(elt, {singleLine: true});
       }
     });
 
     if (!showLineNumbers) {
       return;
     }
 
     // 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)
     $('.swh-content').click(evt => {
       if (evt.target.classList.contains('hljs-ln-n')) {
         const line = parseInt($(evt.target).data('line-number'));
         if (evt.shiftKey && firstHighlightedLine && line > firstHighlightedLine) {
           const firstLine = firstHighlightedLine;
           resetHighlightedLines();
           for (let i = firstLine; i <= line; ++i) {
             highlightLine(i);
           }
           firstHighlightedLine = firstLine;
           window.location.hash = `#L${firstLine}-L${line}`;
         } else {
           resetHighlightedLines();
           highlightLine(line);
           window.location.hash = `#L${line}`;
           scrollToLine(evt.target);
         }
       } else if ($(evt.target).closest('.hljs-ln').length) {
         resetHighlightedLines();
         removeUrlFragment();
       }
     });
 
     // update lines highlighting when the url fragment changes
     $(window).on('hashchange', () => parseUrlFragmentForLinesToHighlight());
 
     // schedule lines highlighting if any as hljs.lineNumbersElement() is async
     setTimeout(() => {
       parseUrlFragmentForLinesToHighlight();
     });
 
   });
 }
diff --git a/assets/src/bundles/webapp/webapp.css b/assets/src/bundles/webapp/webapp.css
index 2de07c90..7a200cd2 100644
--- a/assets/src/bundles/webapp/webapp.css
+++ b/assets/src/bundles/webapp/webapp.css
@@ -1,749 +1,749 @@
 /**
  * Copyright (C) 2018-2021  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
  */
 
 html {
     height: 100%;
     overflow-x: hidden;
     scroll-behavior: auto !important;
 }
 
 body {
     min-height: 100%;
     margin: 0;
     position: relative;
     padding-bottom: 120px;
 }
 
 a:active,
 a.active {
     outline: none;
 }
 
 code {
     background-color: #f9f2f4;
 }
 
 pre code {
     background-color: transparent;
 }
 
 footer {
     background-color: #262626;
     color: #fff;
     font-size: 0.8rem;
     position: absolute;
     bottom: 0;
     width: 100%;
     padding-top: 10px;
     padding-bottom: 10px;
 }
 
 footer a,
 footer a:visited,
 footer a:hover {
     color: #fecd1b;
 }
 
 footer a:hover {
     text-decoration: underline;
 }
 
 .link-color {
     color: #fecd1b;
 }
 
 pre {
     background-color: #f5f5f5;
     border: 1px solid #ccc;
     border-radius: 4px;
     padding: 9.5px;
     font-size: 0.8rem;
 }
 
 .btn.active {
     background-color: #e7e7e7;
 }
 
 .card {
     margin-bottom: 5px !important;
     overflow-x: auto;
 }
 
 .navbar-brand {
     padding: 5px;
     margin-right: 0;
 }
 
 .table {
     margin-bottom: 0;
 }
 
 .swh-table thead {
     background-color: #f2f4f5;
     border-top: 1px solid rgba(0, 0, 0, 0.2);
     font-weight: normal;
 }
 
 .swh-table-striped th {
     border-top: none;
 }
 
 .swh-table-striped tbody tr:nth-child(even) {
     background-color: #f2f4f5;
 }
 
 .swh-table-striped tbody tr:nth-child(odd) {
     background-color: #fff;
 }
 
 .swh-web-app-link a {
     text-decoration: none;
     border: none;
 }
 
 .swh-web-app-link:hover {
     background-color: #efeff2;
 }
 
 .table > thead > tr > th {
     border-top: none;
     border-bottom: 1px solid #e20026;
 }
 
 .table > tbody > tr > td {
     border-style: none;
 }
 
 .sitename .first-word,
 .sitename .second-word {
     color: rgba(0, 0, 0, 0.75);
     font-weight: normal;
     font-size: 1.2rem;
 }
 
 .sitename .first-word {
     font-family: "Alegreya Sans", sans-serif;
 }
 
 .sitename .second-word {
     font-family: "Alegreya", serif;
 }
 
 .swh-counter {
     font-size: 150%;
 }
 
 @media (max-width: 600px) {
     .swh-counter-container {
         margin-top: 1rem;
     }
 }
 
 .swh-http-error {
     margin: 0 auto;
     text-align: center;
 }
 
 .swh-http-error-head {
     color: #2d353c;
     font-size: 30px;
 }
 
 .swh-http-error-code {
     bottom: 60%;
     color: #2d353c;
     font-size: 96px;
     line-height: 80px;
     margin-bottom: 10px !important;
 }
 
 .swh-http-error-desc {
     font-size: 12px;
     color: #647788;
     text-align: center;
 }
 
 .swh-http-error-desc pre {
     display: inline-block;
     text-align: left;
     max-width: 800px;
     white-space: pre-wrap;
 }
 
 .swh-list-unstyled {
     list-style: none;
 }
 
 .popover {
     max-width: 97%;
     z-index: 40000;
 }
 
 .modal {
     text-align: center;
     padding: 0 !important;
     z-index: 50000;
 }
 
 .modal::before {
     content: "";
     display: inline-block;
     height: 100%;
     vertical-align: middle;
     margin-right: -4px;
 }
 
 .modal-dialog {
     display: inline-block;
     text-align: left;
     vertical-align: middle;
 }
 
 .dropdown-submenu {
     position: relative;
 }
 
 .dropdown-submenu .dropdown-menu {
     top: 0;
     left: -100%;
     margin-top: -5px;
     margin-left: -2px;
 }
 
 .dropdown-item:hover,
 .dropdown-item:focus {
     background-color: rgba(0, 0, 0, 0.1);
 }
 
 a.dropdown-left::before {
     content: "\f035e";
     font-family: "Material Design Icons";
     display: block;
     width: 20px;
     height: 20px;
     float: left;
     margin-left: 0;
 }
 
 #swh-navbar {
     border-top-style: none;
     border-left-style: none;
     border-right-style: none;
     border-bottom-style: solid;
     border-bottom-width: 5px;
     border-image:
         linear-gradient(
             to right,
             rgb(226, 0, 38) 0%,
             rgb(254, 205, 27) 100%
         )
         1 1 1 1;
     width: 100%;
     padding: 5px;
     margin-bottom: 10px;
     margin-top: 30px;
     justify-content: normal;
     flex-wrap: nowrap;
     height: 72px;
     overflow: hidden;
 }
 
 #back-to-top {
     display: none;
     position: fixed;
     bottom: 30px;
     right: 30px;
     z-index: 10;
 }
 
 #back-to-top a img {
     display: block;
     width: 32px;
     height: 32px;
     background-size: 32px 32px;
     text-indent: -999px;
     overflow: hidden;
 }
 
 .swh-top-bar {
     direction: ltr;
     height: 30px;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 99999;
     background-color: #262626;
     color: #fff;
     text-align: center;
     font-size: 14px;
 }
 
 .swh-top-bar ul {
     margin-top: 4px;
     padding-left: 0;
     white-space: nowrap;
 }
 
 .swh-top-bar li {
     display: inline-block;
     margin-left: 10px;
     margin-right: 10px;
 }
 
 .swh-top-bar a,
 .swh-top-bar a:visited {
     color: white;
 }
 
 .swh-top-bar a.swh-current-site,
 .swh-top-bar a.swh-current-site:visited {
     color: #fecd1b;
 }
 
 .swh-position-left {
     position: absolute;
     left: 0;
 }
 
 .swh-position-right {
     position: absolute;
     right: 0;
 }
 
 .swh-background-gray {
     background: #efeff2;
 }
 
 .swh-donate-link {
     border: 1px solid #fecd1b;
     background-color: #e20026;
     color: white !important;
     padding: 3px;
     border-radius: 3px;
 }
 
 .swh-navbar-content h4 {
     padding-top: 7px;
 }
 
 .swh-navbar-content .bread-crumbs {
     display: block;
     margin-left: -40px;
 }
 
 .swh-navbar-content .bread-crumbs li.bc-no-root {
     padding-top: 7px;
 }
 
 .main-sidebar {
     margin-top: 30px;
 }
 
 .content-wrapper {
     background: none;
 }
 
 .brand-image {
     max-height: 40px;
 }
 
 .brand-link {
     padding-top: 18.5px;
     padding-bottom: 18px;
     padding-left: 4px;
     border-bottom: 5px solid #e20026 !important;
 }
 
 .navbar-header a,
 ul.dropdown-menu a,
 ul.navbar-nav a,
 ul.nav-sidebar a {
     border-bottom-style: none;
     color: #323232;
 }
 
 .swh-sidebar .nav-link.active {
     color: #323232 !important;
     background-color: #e7e7e7 !important;
 }
 
 .nav-tabs .nav-link.active {
     border-top: 3px solid #e20026;
 }
 
 .swh-image-error {
     width: 80px;
     height: auto;
 }
 
 @media (max-width: 600px) {
     .card {
         min-width: 80%;
     }
 
     .swh-image-error {
         width: 40px;
         height: auto;
     }
 
     .swh-donate-link {
         display: none;
     }
 }
 
 .form-check-label {
     padding-top: 4px;
 }
 
 .swhid {
     white-space: pre-wrap;
 }
 
 .swhid .swhid-option {
     display: inline-block;
     margin-right: 5px;
     line-height: 1rem;
 }
 
 .nav-pills .nav-link:not(.active):hover {
     color: rgba(0, 0, 0, 0.55);
 }
 
 .swh-heading-color {
     color: #e20026 !important;
 }
 
 .sidebar-mini.sidebar-collapse .main-sidebar:hover {
     width: 4.6rem;
 }
 
 .sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel > .info,
 .sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link p,
 .sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-text {
     visibility: hidden !important;
 }
 
 .sidebar .nav-link p,
 .main-sidebar .brand-text,
 .sidebar .user-panel .info {
     transition: none;
 }
 
 .sidebar-mini.sidebar-mini.sidebar-collapse .sidebar {
     padding-right: 0;
 }
 
 .swh-words-logo {
     position: absolute;
     top: 0;
     left: 0;
     width: 73px;
     height: 73px;
     text-align: center;
     font-size: 10pt;
     color: rgba(0, 0, 0, 0.75);
 }
 
 .swh-words-logo:hover {
     text-decoration: none;
 }
 
 .swh-words-logo-swh {
     line-height: 1;
     padding-top: 13px;
     visibility: hidden;
 }
 
 hr.swh-faded-line {
     border: 0;
     height: 1px;
     background-image: linear-gradient(to left, #f0f0f0, #8c8b8b, #f0f0f0);
 }
 
 /* Ensure that section title with link is colored like standard section title */
 .swh-readme h1 a,
 .swh-readme h2 a,
 .swh-readme h3 a,
 .swh-readme h4 a,
 .swh-readme h5 a,
 .swh-readme h6 a {
     color: #e20026;
 }
 
 /* Make list compact in reStructuredText rendering */
 .swh-rst li p {
     margin-bottom: 0;
 }
 
 .swh-readme-txt pre {
     background: none;
     border: none;
 }
 
 .swh-coverage {
     padding-top: 0.3rem;
     border: none;
     overflow: visible;
 }
 
 .swh-coverage a {
     text-decoration: none;
 }
 
 .swh-coverage-col {
     padding-left: 10px;
     padding-right: 10px;
 }
 
 .swh-coverage-header {
     padding-top: 0;
     padding-bottom: 0;
 }
 
 .swh-coverage-logo {
     display: block;
     width: 100%;
     height: 50px;
     margin-left: auto;
     margin-right: auto;
     object-fit: contain;
 
     /* polyfill for old browsers, see https://github.com/bfred-it/object-fit-images */
     font-family: "object-fit: contain;";
 }
 
 .swh-coverage-list {
     width: 100%;
     height: 320px;
     border: none;
 }
 
 .swh-coverage-chevron {
     position: absolute;
     right: 0;
 }
 
 .swh-coverage .card-header .mdi {
     transition: 0.3s transform ease-in-out;
 }
 
 .swh-coverage .card-header .collapsed .mdi {
     transform: rotate(90deg);
 }
 
 .swh-coverage-info-body {
     max-height: 150px;
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-width: thin; /* Firefox only */
     padding: 0;
 }
 
 /* Thin scrollbar for chromium based browsers */
 
 .swh-coverage-info-body::-webkit-scrollbar {
     width: 4px;
 }
 
 .swh-coverage-info-body::-webkit-scrollbar-track {
     background: #eff0f1;
 }
 
 .swh-coverage-info-body::-webkit-scrollbar-thumb {
     background: #909396;
 }
 
 tr.swh-tr-hover-highlight:hover td {
     background: #ededed;
 }
 
 tr.swh-api-doc-route a {
     text-decoration: none;
 }
 
 .swh-apidoc .col {
     margin: 10px;
 }
 
 .swh-apidoc .swh-rst blockquote {
     border: 0;
     margin: 0;
     padding: 0;
 }
 
 a.toggle-col {
     text-decoration: none;
 }
 
 a.toggle-col.col-hidden {
     text-decoration: line-through;
 }
 
 .admonition.warning {
     background: #fcf8e3;
     border: 1px solid #faebcc;
     padding: 15px;
     border-radius: 4px;
 }
 
 .admonition.warning p {
     margin-bottom: 0;
 }
 
 .admonition.warning .first {
     font-size: 1.5rem;
 }
 
 .swh-popover {
     max-height: 50vh;
     overflow-y: auto;
     overflow-x: auto;
     padding: 0;
 }
 
 @media screen and (min-width: 768px) {
     .swh-popover {
         max-width: 50vw;
     }
 }
 
 .swh-popover pre {
     white-space: pre-wrap;
     margin-bottom: 0;
 }
 
 .d3-wrapper {
     position: relative;
     height: 0;
     width: 100%;
     padding: 0;
 
     /* padding-bottom will be overwritten by JavaScript later */
     padding-bottom: 100%;
 }
 
 .d3-wrapper > svg {
     position: absolute;
     height: 100%;
     width: 100%;
     left: 0;
     top: 0;
 }
 
 div.d3-tooltip {
     position: absolute;
     text-align: center;
     width: auto;
     height: auto;
     padding: 2px;
     font: 12px sans-serif;
     background: white;
     border: 1px solid black;
     border-radius: 4px;
     pointer-events: none;
 }
 
 .page-link {
     cursor: pointer;
 }
 
 .wrapper {
     overflow: hidden;
 }
 
 .swh-badge {
     padding-bottom: 1rem;
     cursor: pointer;
 }
 
 .swh-badge-html,
 .swh-badge-md,
 .swh-badge-rst {
-    white-space: pre-wrap;
+    white-space: pre-wrap !important;
 }
 
 /* Material Design icons alignment tweaks */
 
 .mdi {
     display: inline-block;
 }
 
 .mdi-camera {
     transform: translateY(1px);
 }
 
 .mdi-source-commit {
     transform: translateY(2px);
 }
 
 /* To set icons at a fixed width. Great to use when different
    icon widths throw off alignment. Courtesy of Font Awesome. */
 .mdi-fw {
     text-align: center;
     width: 1.25em;
 }
 
 .main-header .nav-link {
     height: inherit;
 }
 
 .nav-sidebar .nav-header:not(:first-of-type) {
     padding-top: 1rem;
 }
 
 .nav-sidebar .nav-link {
     padding-top: 0;
     padding-bottom: 0;
 }
 
 .nav-sidebar > .nav-item .nav-icon {
     vertical-align: sub;
 }
 
 .swh-search-icon {
     line-height: 1rem;
     vertical-align: middle;
 }
 
 .swh-search-navbar {
     position: absolute;
     top: 0.7rem;
     right: 15rem;
     z-index: 50000;
     width: 500px;
 }
 
 .sidebar-collapse .swh-search-navbar {
     right: 4rem;
 }
 
 .swh-corner-ribbon {
     width: 200px;
     background: #fecd1b;
     color: #e20026;
     position: absolute;
     text-align: center;
     letter-spacing: 1px;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
     top: 55px;
     right: -50px;
     left: auto;
     transform: rotate(45deg);
     z-index: 2000;
 }
 
 @media screen and (max-width: 600px) {
     .swh-corner-ribbon {
         top: 53px;
         right: -65px;
     }
 }
 
 .invalid-feedback {
     font-size: 100%;
 }
diff --git a/cypress/integration/persistent-identifiers.spec.js b/cypress/integration/persistent-identifiers.spec.js
index 5211d963..7a2ec1f7 100644
--- a/cypress/integration/persistent-identifiers.spec.js
+++ b/cypress/integration/persistent-identifiers.spec.js
@@ -1,228 +1,228 @@
 /**
  * Copyright (C) 2019-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
  */
 
 let origin, originBadgeUrl, originBrowseUrl;
 let url, urlPrefix;
 let cntSWHID, cntSWHIDWithContext;
 let dirSWHID, dirSWHIDWithContext;
 let relSWHID, relSWHIDWithContext;
 let revSWHID, revSWHIDWithContext;
 let snpSWHID, snpSWHIDWithContext;
 let testsData;
 const firstSelLine = 6;
 const lastSelLine = 12;
 
 describe('Persistent Identifiers Tests', function() {
 
   before(function() {
     origin = this.origin[1];
     url = `${this.Urls.browse_origin_content()}?origin_url=${origin.url}&path=${origin.content[0].path}`;
     url = `${url}&release=${origin.release.name}#L${firstSelLine}-L${lastSelLine}`;
     originBadgeUrl = this.Urls.swh_badge('origin', origin.url);
     originBrowseUrl = `${this.Urls.browse_origin()}?origin_url=${origin.url}`;
     cy.visit(url).window().then(win => {
       urlPrefix = `${win.location.protocol}//${win.location.hostname}`;
       if (win.location.port) {
         urlPrefix += `:${win.location.port}`;
       }
       const swhids = win.swh.webapp.getSwhIdsContext();
       cntSWHID = swhids.content.swhid;
       cntSWHIDWithContext = swhids.content.swhid_with_context;
       cntSWHIDWithContext += `;lines=${firstSelLine}-${lastSelLine}`;
       dirSWHID = swhids.directory.swhid;
       dirSWHIDWithContext = swhids.directory.swhid_with_context;
       revSWHID = swhids.revision.swhid;
       revSWHIDWithContext = swhids.revision.swhid_with_context;
       relSWHID = swhids.release.swhid;
       relSWHIDWithContext = swhids.release.swhid_with_context;
       snpSWHID = swhids.snapshot.swhid;
       snpSWHIDWithContext = swhids.snapshot.swhid_with_context;
 
       testsData = [
         {
           'objectType': 'content',
           'objectSWHIDs': [cntSWHIDWithContext, cntSWHID],
           'badgeUrl': this.Urls.swh_badge('content', swhids.content.object_id),
           'badgeSWHIDUrl': this.Urls.swh_badge_swhid(cntSWHID),
           'browseUrl': this.Urls.browse_swhid(cntSWHIDWithContext)
         },
         {
           'objectType': 'directory',
           'objectSWHIDs': [dirSWHIDWithContext, dirSWHID],
           'badgeUrl': this.Urls.swh_badge('directory', swhids.directory.object_id),
           'badgeSWHIDUrl': this.Urls.swh_badge_swhid(dirSWHID),
           'browseUrl': this.Urls.browse_swhid(dirSWHIDWithContext)
         },
         {
           'objectType': 'release',
           'objectSWHIDs': [relSWHIDWithContext, relSWHID],
           'badgeUrl': this.Urls.swh_badge('release', swhids.release.object_id),
           'badgeSWHIDUrl': this.Urls.swh_badge_swhid(relSWHID),
           'browseUrl': this.Urls.browse_swhid(relSWHIDWithContext)
         },
         {
           'objectType': 'revision',
           'objectSWHIDs': [revSWHIDWithContext, revSWHID],
           'badgeUrl': this.Urls.swh_badge('revision', swhids.revision.object_id),
           'badgeSWHIDUrl': this.Urls.swh_badge_swhid(revSWHID),
           'browseUrl': this.Urls.browse_swhid(revSWHIDWithContext)
         },
         {
           'objectType': 'snapshot',
           'objectSWHIDs': [snpSWHIDWithContext, snpSWHID],
           'badgeUrl': this.Urls.swh_badge('snapshot', swhids.snapshot.object_id),
           'badgeSWHIDUrl': this.Urls.swh_badge_swhid(snpSWHID),
           'browseUrl': this.Urls.browse_swhid(snpSWHIDWithContext)
         }
       ];
 
     });
   });
 
   beforeEach(function() {
     cy.visit(url);
   });
 
   it('should open and close identifiers tab when clicking on handle', function() {
     cy.get('#swh-identifiers')
       .should('have.class', 'ui-slideouttab-ready');
 
     cy.get('.ui-slideouttab-handle')
       .click();
 
     cy.get('#swh-identifiers')
       .should('have.class', 'ui-slideouttab-open');
 
     cy.get('.ui-slideouttab-handle')
       .click();
 
     cy.get('#swh-identifiers')
       .should('not.have.class', 'ui-slideouttab-open');
 
   });
 
   it('should display identifiers with permalinks for browsed objects', function() {
     cy.get('.ui-slideouttab-handle')
       .click();
 
     for (const td of testsData) {
       cy.get(`a[href="#swhid-tab-${td.objectType}"]`)
         .click();
 
       cy.get(`#swhid-tab-${td.objectType}`)
         .should('be.visible');
 
       cy.get(`#swhid-tab-${td.objectType} .swhid`)
         .should('have.text', td.objectSWHIDs[0].replace(/;/g, ';\n'))
         .should('have.attr', 'href', this.Urls.browse_swhid(td.objectSWHIDs[0]));
 
     }
 
   });
 
   it('should update other object identifiers contextual info when toggling context checkbox', function() {
     cy.get('.ui-slideouttab-handle')
       .click();
 
     for (const td of testsData) {
 
       cy.get(`a[href="#swhid-tab-${td.objectType}"]`)
         .click();
 
       cy.get(`#swhid-tab-${td.objectType} .swhid`)
         .should('have.text', td.objectSWHIDs[0].replace(/;/g, ';\n'))
         .should('have.attr', 'href', this.Urls.browse_swhid(td.objectSWHIDs[0]));
 
       cy.get(`#swhid-tab-${td.objectType} .swhid-option`)
         .click();
 
       cy.get(`#swhid-tab-${td.objectType} .swhid`)
         .contains(td.objectSWHIDs[1])
         .should('have.attr', 'href', this.Urls.browse_swhid(td.objectSWHIDs[1]));
 
       cy.get(`#swhid-tab-${td.objectType} .swhid-option`)
         .click();
 
       cy.get(`#swhid-tab-${td.objectType} .swhid`)
         .should('have.text', td.objectSWHIDs[0].replace(/;/g, ';\n'))
         .should('have.attr', 'href', this.Urls.browse_swhid(td.objectSWHIDs[0]));
     }
 
   });
 
   it('should display swh badges in identifiers tab for browsed objects', function() {
     cy.get('.ui-slideouttab-handle')
       .click();
 
     const originBadgeUrl = this.Urls.swh_badge('origin', origin.url);
 
     for (const td of testsData) {
       cy.get(`a[href="#swhid-tab-${td.objectType}"]`)
         .click();
 
       cy.get(`#swhid-tab-${td.objectType} .swh-badge-origin`)
         .should('have.attr', 'src', originBadgeUrl);
 
       cy.get(`#swhid-tab-${td.objectType} .swh-badge-${td.objectType}`)
         .should('have.attr', 'src', td.badgeUrl);
 
     }
 
   });
 
   it('should display badge integration info when clicking on it', function() {
 
     cy.get('.ui-slideouttab-handle')
       .click();
 
     for (const td of testsData) {
       cy.get(`a[href="#swhid-tab-${td.objectType}"]`)
         .click();
 
       cy.get(`#swhid-tab-${td.objectType} .swh-badge-origin`)
         .click()
         .wait(500);
 
       for (const badgeType of ['html', 'md', 'rst']) {
         cy.get(`.modal .swh-badge-${badgeType}`)
-          .contains(`${urlPrefix}${originBrowseUrl}`)
-          .contains(`${urlPrefix}${originBadgeUrl}`);
+          .should('contain.text', `${urlPrefix}${originBrowseUrl}`)
+          .should('contain.text', `${urlPrefix}${originBadgeUrl}`);
       }
 
       cy.get('.modal.show .close')
         .click()
         .wait(500);
 
       cy.get(`#swhid-tab-${td.objectType} .swh-badge-${td.objectType}`)
         .click()
         .wait(500);
 
       for (const badgeType of ['html', 'md', 'rst']) {
         cy.get(`.modal .swh-badge-${badgeType}`)
-          .contains(`${urlPrefix}${td.browseUrl}`)
-          .contains(`${urlPrefix}${td.badgeSWHIDUrl}`);
+          .should('contain.text', `${urlPrefix}${td.browseUrl}`)
+          .should('contain.text', `${urlPrefix}${td.badgeSWHIDUrl}`);
       }
 
       cy.get('.modal.show .close')
         .click()
         .wait(500);
 
     }
   });
 
   it('should be possible to retrieve SWHIDs context from JavaScript', function() {
     cy.window().then(win => {
       const swhIdsContext = win.swh.webapp.getSwhIdsContext();
       for (const testData of testsData) {
         assert.isTrue(swhIdsContext.hasOwnProperty(testData.objectType));
         assert.equal(swhIdsContext[testData.objectType].swhid,
                      testData.objectSWHIDs.slice(-1)[0]);
       }
     });
   });
 
 });