Couleur (mise en surbrillance de la syntaxe) dans un HTML < code > étiquette

StackOverflow https://stackoverflow.com/questions/1647724

Question

Dans un fragment de code comme celui-ci ... 

class Foo
{
  internal Foo()
  {
    for (int i = 0; i < 42; ++i);
  }
}

... ses différents mots clés, etc., sont codés par couleur lorsqu'ils sont affichés dans mes navigateurs.

Quand je fais "Voir la source", je ne vois rien de spécial dans le code HTML qui implémenterait ce code couleur.

Comment et / ou où cette mise en surbrillance des couleurs spécifique à la syntaxe est-elle mise en œuvre, alors? Par exemple, est-il intégré aux navigateurs, ou est-il implémenté par la modification de JavaScript par le site spécifique du DOM dans les navigateurs?

Je trouve cela difficile pour Google.

Était-ce utile?

La solution

Stackoverflow utilise la bibliothèque de Google Pettify pour la coloration syntaxique. Il s'exécute côté client après la livraison du code HTML par le serveur. C'est pourquoi vous ne le voyez pas dans la source HTML brute. Si vous disposez d'un plug-in de navigateur tel que FireBug , vous pourrez inspecter le DOM une fois que prettify aura fait son travail.

Autres conseils

C'est une bibliothèque Javascript. Il y en a plusieurs, le plus populaire étant SyntaxHighlighter . Mon favori personnel est Chili , cependant.

Il existe une excellente FAQ Qu'est-ce que la coloration syntaxique et son fonctionnement? sur méta.SE.

Je le cite entièrement ici pour votre commodité, mais vous pouvez consulter le message d'origine pour connaître les mises à jour de la liste des langues prises en charge.

Qu'est-ce que la coloration syntaxique?

La mise en évidence de la syntaxe permet de mettre en évidence le code dans les articles en fonction de la langue dans laquelle il est écrit, afin de faciliter la lecture.

Comment ça marche?

Stack Exchange ne dispose pas de son propre moteur de coloration syntaxique. , il utilise Google. Code Prettify . Par conséquent, Stack Exchange ne peut traiter aucun bogue ou demande de fonctionnalité concernant la coloration syntaxique. Il doit être adressé à l'équipe à l'origine de Google Code Prettify.

La mise en surbrillance de la syntaxe est attribuée à l'aperçu lors de la création ou de la modification de publications dès que vous arrêtez de taper pendant 5 secondes.

Prettify prend en charge une liste de langages de base qu'il peut mettre en évidence (y compris C / C ++, C #, Java, JavaScript / CoffeScript, Perl, Python, Ruby, Regex, Bash, HTML, XML), ainsi qu’un surligneur générique default qui fonctionne sans problème pour la plupart des langages de type C et HTML. D'autres langues sont implémentées sous la forme de extensions (chaque langue- *). .js ).

Pourquoi mon code n'est-il pas mis en surbrillance correctement?

Si votre message n'est pas mis en évidence correctement, il est possible que cela ne soit pas pris en charge. Veuillez consulter la liste de Prettify prise en charge. langues . Si votre langue ne figure pas dans la liste, elle doit être créée dans le projet Prettify avant de pouvoir être déployée par Stack Exchange.

Si une langue pouvant être appliquée à une balise figure déjà dans la liste mais n'est pas utilisée sur Stack Exchange, veuillez créer une demande de fonctionnalité ici sur Meta pour la déployer sur le réseau.

Comment signaler un bogue ou demander une nouvelle langue?

S'il s'agit bien d'un bogue dans le surligneur de syntaxe lui-même, consultez la liste des problèmes pour voir si cela a déjà été signalé. Si ce n'est pas le cas, n'hésitez pas à le signaler ou rejoindre le projet et soumettre un correctif vous-même. Si vous souhaitez vous assurer que le problème que vous avez soulevé est résolu rapidement, il est préférable d'inclure le correctif dans le rapport. Si le correctif a déjà été implémenté par Prettify mais ne fonctionne toujours pas ici, veuillez envoyer une demande de fonctionnalité à Meta pour demander le déploiement d’une nouvelle version de Prettify.

Vous pouvez également demander qu'une nouvelle langue soit ajoutée à la liste des mêmes problèmes . N'oubliez pas que Stack Exchange ne conserve pas cette surligneur de syntaxe, et la publication de rapports de bogues ou de demandes de fonctionnalités la concernant dans Meta ne les corrigera pas et ne sera pas implémentée.

Avant de faire quoi que ce soit, assurez-vous que la mise en surbrillance correcte est activée.

Comment détermine-t-il la langue de la coloration syntaxique?

Dans les coulisses, Stack Exchanges utilise les balises de la question pour déduire la langue que vous utilisez. Si plusieurs balises ont une coloration syntaxique en surbrillance, elle utilise un default et laisse Prettify déduire quel est le meilleur langage à utiliser.

Si vous êtes curieux de savoir si une balise a une indication de langue, tout utilisateur est capable de vérifier en visitant la page wiki de cette balise. L'indicateur de langue (le cas échéant) actuellement utilisé pour cette balise sera affiché tout en bas, sous les boutons du wiki:

  

Langage du code (utilisé pour la coloration syntaxique): lang-java

Il est possible de remplacer explicitement la mise en surbrillance utilisée avec la langue de votre choix en spécifiant un indice de langue ci-dessus. le bloc de code: 

<!-- language: lang-or-tag-here -->

    code goes here

Vous pouvez utiliser un code de langue ou un nom de balise dans le repère de langue pour activer la coloration syntaxique. Voir ci-dessous la liste complète des codes de langue pris en charge par prettify.

Par exemple: 

Here is a code block with language code as hint:

<!-- language: lang-js -->

    function greet(person) {
        return "Hello " + person;
    }
    var user = "John Doe";
    alert(greet(user));

Here is a code block with tag name as hint:

<!-- language: typescript -->

    var arr = [0, 1, 2];

Si vous ne souhaitez pas que la syntaxe soit surlignée, vous pouvez utiliser la langue lang-none : 

<!-- language: lang-none -->

Vous pouvez également appliquer une indication de langue à tous les blocs de code de votre publication (pour éviter de devoir ajouter une indication avant chaque élément): 

<!-- language-all: lang-or-tag-here -->

Astuce: Codes de langue

Ceci est une liste complète de chaque identifiant que vous pouvez utiliser dans l'indicateur de langue pour la coloration syntaxique.

Noyau:

  • Par défaut: laissez Prettify interpréter le code et devinez
    default
  • None: n'utilisez explicitement aucune coloration syntaxique
    lang-none
  • Bash et autres scripts Shell
    lang-bash , lang-bsh , lang-csh , lang-sh
  • C, C ++, Objective-C et autres
    lang-c , lang-cc , lang-cpp , lang-cxx , lang-cyc , lang-m
  • C #
    lang-cs
  • CoffeeScript
    lang-coffee
  • HTML, XML, XSL, etc.
    lang-html , lang-xml , lang-xsl
  • Java
    lang-java
  • JavaScript
    lang-js , lang-javascript
  • JSON
    lang-json
  • Perl
    lang-pl , lang-perl
  • Python
    lang-py , lang-python , lang-cv
  • Regex
    langue-regex
  • Ruby
    lang-rb , lang-ruby
  • Rouille
    lang-rc , lang-rs , lang-rouille

Extensions:

Astuce: balises

Vous pouvez spécifier n’importe quelle balise existante sur le site. Le code de langue utilisé sera associé à cette balise ( null (aucun indice), par défaut , ou un code de langue spécifique ).

N'oubliez pas que par défaut, toutes les balises commencent par none comme code de langue. Les balises avec none spécifié comme code de langue seront ignorées et redeviendront par défaut .

Vous pouvez également utiliser le mot clé plain none pour spécifier manuellement aucune coloration syntaxique, comme si vous utilisiez le code lang-none ci-dessus.

  

Note aux éditeurs:

     

N'ajoutez rien à la liste ci-dessus si vous n'êtes pas sûr à 100% qu'il existe. Tout simplement parce que vous tapez quelque chose et qu'il a l'air comme il est surligné correctement ne ne signifie pas que l'identifiant existe réellement dans le système. N'oubliez pas que les identificateurs non valides reviennent à par défaut . Créez un lien vers la question Meta qui confirme l'existence d'un indice dans votre récapitulatif de modification lors de l'ajout d'un nouvel indice à la liste.

     

Note aux commentateurs:

     

Les commentaires sur cette FAQ servent à demander des éclaircissements sur un élément que vous ne comprenez peut-être pas dans la FAQ afin de pouvoir le corriger. NE PAS demander si certaines langues seront prises en charge ultérieurement. Ce n'est pas une question à laquelle nous pouvons répondre car Stack Exchange ne conserve pas ce surligneur. Visitez

Non affilié à StackOverflow
scroll top