Comment implémenter la surbrillance de texte multicolore dans les éditeurs de texte ?

Surlignage de texte multicolore dans les éditeurs de texte

Pour introduire le surlignage de texte multicolore dans une zone de texte ou des éléments de saisie de texte, vous devrez principalement vous plonger dans les domaines de JavaScript et CSS. Cependant, il est important de noter que ces éléments ne prennent pas automatiquement en charge la surbrillance du texte avec des couleurs différentes.

Pour la fonctionnalité de surbrillance syntaxique, vous devrez utiliser :

Élément modifiable : Utilisez des éléments contenteditable ou des attributs contenteditable sur des éléments HTML existants pour permettre aux utilisateurs de modifier le contenu du texte.

JavaScript :

• Utilisez JavaScript pour identifier les mots-clés qui doivent être mis en évidence.
• Créez et ajoutez des éléments span avec des classes de couleurs appropriées aux mots-clés ciblés.

CSS :

• Établissez des classes de couleurs dans votre CSS pour contrôler les couleurs de surbrillance des différents mots-clés.

Exemple (en JavaScript et CSS) :

<code class="js">// Here's the JavaScript code
const keywords = ["var", "if", "else", "for"]; // Your list of keywords
const textarea = document.getElementById("textarea");

textarea.addEventListener("input", (e) => {
  const start = textarea.selectionStart;
  const end = textarea.selectionEnd;
  const text = textarea.value.substring(start, end);

  if (keywords.includes(text)) {
    // Apply highlighting to the selected text
    textarea.value = textarea.value.substring(0, start)
      + "<span class='highlight'>" + text + "</span>"
      + textarea.value.substring(end);
  }
});</code>

<code class="css">/* CSS for syntax highlighting*/
.highlight {
  color: red;
  font-weight: bold;
}</code>

Travailler avec des éléments modifiables Les éléments (par opposition à la zone de texte ou aux entrées de texte) offrent une plus grande flexibilité dans l'application de la surbrillance du texte multicolore.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!