L'extension CodeMirror est utilisée pour permettre la coloration syntaxique du wikicode lors de la modification d'une page.

CodeMirror est disponible depuis août 2017 en tant qu'outil bêta à activer dans les préférences, puis rendu disponible pour tous les utilisateurs en mai 2018.

1. La barre d'outils améliorée doit être activée dans vos préférences (notez que la barre d'outils améliorée peut être activée en même temps que l'ancienne). Consulter Aide:Barre d'outils d'édition pour plus d'informations.
2. Cliquez sur le bouton dans la barre d'outils pour activer ou désactiver la coloration syntaxique.

CodeMirror signale la présence de caractères indésirables comme les caractères de contrôle de la manière suivante : •.

Si ces caractères de contrôle ont parfois été insérés (surtout par le passé) volontairement (c'est parfois le cas des traits d'union conditionnels), leur mode d'insertion le plus fréquent reste une insertion accidentelle, notamment lors du copier-coller d'un nom d'article depuis une liste de contributions (où des marques gauche-à-droite sont présentes entre les différents éléments). Si la sélection est un peu trop large, on peut prendre involontairement un de ces caractères de contrôle lors du copier-coller, sans s'en apercevoir (c'est pourquoi ils se rencontrent généralement a proximité des liens internes et des catégories).

Il est possible de connaitre le type de caractère concerné en le survolant, exemple : •. Le caractère indésirable le plus fréquent est la marque gauche-à-droite (left-to-right mark, LRM). Son code Unicode est U+200E (indiqué \u200e dans CodeMirror).

Ces caractères sont inutiles — voire parfois nuisibles, en provoquant des bugs bizarres et difficiles à identifier dans les appels de modèles — et peuvent être supprimés sans hésitation quand il s'agit de marques gauche-à-droite (U+200E) ou marques droite-à-gauche (U+200F), à partir du moment où ils ne se trouvent pas dans ou à proximité d'un texte s'écrivant de droite à gauche (comme l'arabe ou l'hébreu).

Quant aux traits d'union conditionnels (U+00AD), ils peuvent généralement être supprimés sans problème, ou sinon il faudrait au moins les remplacer par l'entité HTML correspondante : ­, qui a strictement le même comportement à l'affichage, tout en indiquant de manière visible la présence d'un trait d'union conditionnel lors de l'édition du code.

Il est possible de modifier l'apparence de ces caractères dans CodeMirror en définissant une règle CSS personnalisée pour la classe .cm-invalidchar. Voir la section #Personnalisation pour cela.

Quelques problèmes connus :

• La présence de liens dans les légendes d'images casse la coloration jusqu'à la fin de la ligne. (phab:T108447)
• Les listes de définition ne sont pas colorées correctement. (phab:T170042)
• Les parties en gras et/ou italique ne sont pas mises en gras/italique à l'intérieur des modèles. (phab:T216210)

Voir sur Phabricator le projet CodeMirror pour la liste complète des bugs et fonctionnalités demandées.

Les couleurs utilisées peuvent être personnalisées en ajoutant des règles CSS dans votre page CSS personnelle (Spécial:Ma_page/common.css).

L'aperçu des principales classes CSS utilisées par CodeMirror est disponible sur meta:Community_Tech/Wikitext_editor_syntax_highlighting#Color_and_style_customization. Une liste complémentaire est également disponible sur Phabricator.

Pour changer la couleur des puces d'une liste à puces (*) pour qu'elles soient en rouge sur fond vert, ajoutez le code suivant à votre common.css :

.cm-mw-list
{
    background-color: green;
    color: red;
}

Une liste des codes couleurs est disponible sur Aide:Couleurs.

Cette section est vide, insuffisamment détaillée ou incomplète. Votre aide est la bienvenue ! Comment faire ?

• Utilisateur:Tractopelle-jaune/CodeMirror-dark : Thème sombre (arrière-plan noir), comprenant diverses améliorations pour faciliter le repérage visuel entre les différents éléments (intérieur des références, parties en gras et/ou italique, modèles imbriqués, différents éléments des tableaux, etc.). (aperçu 1, aperçu 2).

D'autres outils de coloration syntaxique existent sous forme de gadgets, plus ou moins maintenus, activables dans les préférences :

• DotsSyntaxHighlighter (plus d'informations) ;
• WikEd - éditeur de wikicode comprenant une coloration syntaxique (plus d'informations).

• mw:Extension:CodeMirror
• meta:Community Tech/Wikitext editor syntax highlighting