Bonjour à vous tous,
Voici du code HTML dont la coloration syntaxique a été faite avec la bibliothèque https://highlightjs.org
Je voudrais maintenant surligner une ligne du code de cette manière :
Mais ce n'est pas possible, ce que vous voyez ci-dessus est simplement une sélection à la souris puis une capture écran pour illustrer ce que je veux obtenir. J'ai essayé en ajoutant la balise <mark> et </mark>, encapsulant la ligne aria-activedescendant="option-2", mais ça ne fonctionne pas, parce que chaque ligne est considérée comme du texte brut et aucune balise placée à l'intérieur ne peut être exécutée.
J'ai soumis le problème à ChatGPT et il ne sait pas comment faire.
Confirmez-vous qu'il n'y a pas de solution ?
Que le code soit avec vous
Modifié par ObiJuanKenobi (02 Mar 2026 - 10:57)
Voici du code HTML dont la coloration syntaxique a été faite avec la bibliothèque https://highlightjs.org
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
<style>
pre code.hljs {
background-color: #0d1117;
}
code mark {
background-color: #ffd33d;
color: #000;
padding: 0 2px;
border-radius: 3px;
}
</style>
<title>Titre de la page</title>
</head>
<body>
<pre><code class="language-html" data-highlight='aria-activedescendant="option-2"'><!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Titre de la page web</title>
</head>
<body>
<input id="searchbox"
role="combobox"
aria-activedescendant="option-2"
aria-owns="listbox"
aria-haspopup="listbox">
<ul id="listbox" role="listbox">
<li id="option-1" role="option">Pomme</li>
<li id="option-2" role="option">Poire</li> <!-- actif -->
<li id="option-3" role="option">Banane</li>
</ul>
</body>
</html>
</code></pre>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>
document.querySelectorAll("code[data-highlight]").forEach(code => {
const target = code.dataset.highlight;
code.innerHTML = code.innerHTML.replace(
target,
`<mark>${target}</mark>`
);
});
</script>
<script>
hljs.highlightAll();
</script>
</body>
</html>Je voudrais maintenant surligner une ligne du code de cette manière :
Mais ce n'est pas possible, ce que vous voyez ci-dessus est simplement une sélection à la souris puis une capture écran pour illustrer ce que je veux obtenir. J'ai essayé en ajoutant la balise <mark> et </mark>, encapsulant la ligne aria-activedescendant="option-2", mais ça ne fonctionne pas, parce que chaque ligne est considérée comme du texte brut et aucune balise placée à l'intérieur ne peut être exécutée.
J'ai soumis le problème à ChatGPT et il ne sait pas comment faire.
Confirmez-vous qu'il n'y a pas de solution ?
Que le code soit avec vous
Modifié par ObiJuanKenobi (02 Mar 2026 - 10:57)
