Couleur (coloration syntaxique) à l'intérieur d'une balise HTML <code> tag

Dans un fragment de code comme le suivant ...

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

... ses différents mots-clés et ainsi de suite sont de couleur lorsqu'ils sont à l'affiche dans mon navigateur.

Quand je fais "Afficher la source", je ne vois rien de spécial dans le code HTML de mise en œuvre de cette couleur-codage.

Comment et où est-ce que la syntaxe spécifique à la couleur de mise en évidence de mises en œuvre, alors? Par exemple est-il intégré dans les navigateurs, ou est-il mis en œuvre par le site spécifique de édition de JavaScript, le DOM dans les navigateurs?

Je trouve que c'est une question difficile à Google pour.

  • La mise en forme est réalisée a posteriori via javascript; si vous faites un "inspecter l'élément" (avec un navigateur comme google Chrome), vous verrez que beaucoup de durée de balises ont été ajoutées
InformationsquelleAutor ChrisW | 2009-10-30
  1. 21

    Stackoverflow utilise Google embellir bibliothèque JS pour faire de la coloration syntaxique. Il s'exécute côté client après le HTML a été transmis par le serveur. C'est pourquoi vous ne le voyez pas dans la source HTML brut. Si vous avez un plugin de navigateur comme FireBug, vous serez en mesure d'inspecter les DOM après embellir a fait sa magie.

    InformationsquelleAutor Asaph
  2. 4

    C'est une bibliothèque Javascript. Il ya un peu là-bas, les plus populaires étant SyntaxHighlighter. Mon favori personnel est Chili, si.

    • essayé d'obtenir highlight.js de travail, car il a beaucoup de styles à choisir. a été en mesure d'obtenir prism.js au travail.
    • le lien vers le piment est cassé 🙁
    InformationsquelleAutor David Brown
  3. 0

    Il y a une excellente FAQ Qu'est-ce que la coloration syntaxique et comment ça fonctionne? plus sur meta.SE.

    Je suis entièrement citant ici pour votre commodité, mais vous voudrez peut-être vérifier le post original pour les mises à jour de la liste des langues prises en charge.

    Ce qui est de la syntaxe?

    La coloration syntaxique permet code des postes à être mis en évidence en fonction de la langue il est écrit dans le, pour le rendre plus facile à lire.

    Comment ça fonctionne?

    Pile d'Échange ne dispose pas de sa propre coloration syntaxique moteur. Il utilise Google Code Embellir. Par conséquent, tous les bugs et demandes de fonctionnalités concernant la coloration syntaxique ne peut pas être traitée par la Pile d'Échange et doivent être adressées à l'équipe derrière Google Code Embellir.

    La coloration syntaxique est attribué à l'aperçu lors de la création ou de la modification des postes dès que vous arrêtez de taper pendant 5 secondes.

    Embellir prend en charge une liste de langues de base qu'il peut mettre en évidence (y compris C/C++, C#, Java, JavaScript/CoffeScript, Perl, Python, Ruby, Regex, Bash, HTML, XML), avec un par défaut générique surligneur qui fonctionne passablement sur la plupart des C-comme les langages HTML et-comme les langages de balisage. Les autres langues sont mises en œuvre comme extensions (chaque lang-*.js fichier).

    Pourquoi n'est pas mon code en surbrillance correctement?

    Si votre post n'est pas mise en évidence, c'est possible, il n'est pas pris en charge. Merci de regarder la liste d'Embellir les langues prises en charge. Si votre langue n'est pas sur la liste, il doit être créé au sein de l'Embellir projet avant qu'il puisse être déployé par Stack Exchange.

    Si une langue qui pourrait être appliqué à une balise est déjà sur la liste, mais pas utilisé sur Stack Exchange, s'il vous plaît faire une demande de fonctionnalité ici sur Meta avoir déployé sur le réseau.

    Comment puis-je signaler un bug ou d'une demande d'une nouvelle langue?

    Si c'est effectivement une erreur dans la syntaxe surligneur lui-même, vérifiez la liste de problèmes de pour voir si il a déjà été signalé. Si elle n'a pas, n'hésitez pas à le signaler ou joindre le projet et de soumettre un correctif vous-même. Si vous voulez vous assurer que d'un 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é mis en œuvre par les Embellir, mais n'est toujours pas de travail ici, s'il vous plaît faire une demande de fonctionnalité sur Meta pour demander qu'une nouvelle version d'Embellir être déployé.

    Vous pouvez également soumettre une demande pour une nouvelle langue à ajouter dans la même liste de problèmes de. Gardez à l'esprit que la Pile d'Échange ne pas maintenir cette syntaxe surligneur, et la publication de rapports de bogue ou les demandes concernant ici sur Meta va pas fixe ou mis en œuvre.

    Avant de faire quoi que ce soit, faire sûr que vous avez la bonne soulignant allumé.

    Comment fait-il de déterminer la langue de la coloration syntaxique?

    Derrière la scène, Pile Échanges utilise les balises sur la question à déduire de la langue que vous utilisez. Si il n'y a plus d'une étiquette qui est de la syntaxe, il utilise une valeur par défaut et permet de l'Embellir en déduire quel est le meilleur langage à utiliser.

    Si vous êtes curieux de savoir si un tag est une langue de l'indice, n'importe quel utilisateur est capable de vérifier en visitant cette balise de la page wiki. La langue de l'indice (le cas échéant) qui est utilisé actuellement pour cette balise sera affiché au bas de l'écran, en dessous des boutons pour le wiki:

    Couleur (coloration syntaxique) à l'intérieur d'une balise HTML <code> tag

    Il est possible de remplacer explicitement la mise en évidence de l'utilisation avec la langue de votre choix en précisant une langue de l'indice au-dessus du bloc de code:

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

    code goes here

    Vous pouvez utiliser soit un code de langue ou un tag nom dans la langue astuce pour activer la coloration syntaxique. Voir ci-dessous pour la liste complète des embellir pris en charge les codes de langue.

    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 voulez pas avoir la coloration syntaxique, vous pouvez utiliser le lang-none langue:

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

    Vous pouvez également appliquer une langue astuce pour tous blocs de code dans votre post (si vous n'avez pas à ajouter une pointe avant de chacun):

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

    Allusion: Des Codes De Langue

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

    De base:

    • Par défaut: laissez Embellir interpréter le code et devinez

      default
    • Aucun: explicitement ne pas utiliser la coloration syntaxique

      lang-none
    • Bash et autres scripts Shell

      lang-bash, lang-bsh, lang-csh, lang-sh
    • C, C++, Objective-C, et al.

      lang-c, lang-cc, lang-cpp, lang-cxx, lang-cyc, lang-m
    • C#

      lang-cs
    • CoffeeScript

      lang-coffee
    • HTML, XML, XSL, et al.

      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

      lang-regex
    • Ruby

      lang-rb, lang-ruby
    • Rouille

      lang-rc, lang-rs, lang-rust

    Extensions:

    Allusion: Tags

    Vous pouvez spécifier n'importe quelle balise qui existe sur le site, et il utilisera le code de langue est actuellement associé à cette balise (qui peut être soit null (pas d'indicateur), par défaut, ou un spécifiques du code de la langue).

    Garder à l'esprit que, par défaut, toutes les balises commencer avec none comme leur code de langue. Les balises de none spécifié comme leur langue code sera ignoré et revenir à default.

    Vous pouvez également utiliser la plaine none mot-clé pour spécifier manuellement pas de coloration syntaxique, similaire à l'aide de la lang-none code ci-dessus.

    Note aux rédacteurs:

    S'il vous plaît ne pas ajouter à la liste ci-dessus, sauf si vous êtes sûr à 100% qu'il existe. Juste parce que vous tapez quelque chose dans et il semble comme il est souligné correctement ne pas dire l'identifiant existe réellement dans le système. Gardez à l'esprit que non valide identifiants revenir à par défaut. S'il vous plaît lien vers le Méta question qui confirme un indice de l'existence dans votre résumé de la modification lors de l'ajout d'un nouvel indice de la liste.

    Note aux intervenants:

    Les commentaires sur cette FAQ sont pour demander des précisions sur quelque chose que vous ne comprenez pas dans la FAQ de sorte qu'il peut être résolu. Veuillez NE PAS demander si certaines langues seront prises en charge dans l'avenir. C'est pas une question que l'on peut répondre car Stack Exchange n'a pas de maintenir ce surligneur. Visite Google Code Embellir pour le support de la langue.

    InformationsquelleAutor Aaron Thoma