diff --git a/assets/src/bundles/webapp/badges.js b/assets/src/bundles/webapp/badges.js
--- a/assets/src/bundles/webapp/badges.js
+++ b/assets/src/bundles/webapp/badges.js
@@ -34,13 +34,13 @@
   </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>
@@ -48,4 +48,6 @@
     :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
--- a/assets/src/bundles/webapp/code-highlighting.js
+++ b/assets/src/bundles/webapp/code-highlighting.js
@@ -36,7 +36,7 @@
   }
 }
 
-export async function highlightCode(showLineNumbers = true) {
+export async function highlightCode(showLineNumbers = true, selector = 'code') {
 
   await import(/* webpackChunkName: "highlightjs" */ 'utils/highlightjs');
 
@@ -68,7 +68,7 @@
 
   $(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});
diff --git a/assets/src/bundles/webapp/webapp.css b/assets/src/bundles/webapp/webapp.css
--- a/assets/src/bundles/webapp/webapp.css
+++ b/assets/src/bundles/webapp/webapp.css
@@ -664,7 +664,7 @@
 .swh-badge-html,
 .swh-badge-md,
 .swh-badge-rst {
-    white-space: pre-wrap;
+    white-space: pre-wrap !important;
 }
 
 /* Material Design icons alignment tweaks */
diff --git a/cypress/integration/persistent-identifiers.spec.js b/cypress/integration/persistent-identifiers.spec.js
--- a/cypress/integration/persistent-identifiers.spec.js
+++ b/cypress/integration/persistent-identifiers.spec.js
@@ -189,8 +189,8 @@
 
       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')
@@ -203,8 +203,8 @@
 
       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')