Je suis à la recherche d'un moyen de formater et de colorier automatiquement le code que j'écris dans un document HTML. Je sais wikipedia le fait, par exemple sur la page: http://en.wikipedia.org/wiki/Nested_functionComment mettre en forme du code en html/css/js/php
Je suis sûr qu'il existe des bibliothèques là-bas pour le faire, mais je ne peux pas pour la vie de moi, en trouver un. Est-ce que quelqu'un a des suggestions?
Jetez un oeil à la bibliothèque Prettify JavaScript. Il est celui généralement utilisé par des personnes (c'est celui utilisé ici sur le SO, par exemple.)
On peut l'utiliser comme ceci:
dans votre élément <head>:
<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>
Dans votre élément <body>:
<body onload="prettyPrint()">
<!-- any HTML you like here... -->
<pre class="prettyprint">
def say_hi():
print("Hello World!")
</pre>
<!-- any HTML you like here... -->
</body>
T chapeau pour une utilisation simple de la bibliothèque. Si vous utilisez d'autres JavaScript sur votre page, je recommanderais d'autres méthodes pour activer la bibliothèque Prettify (n'utilisez pas l'attribut onload de l'élément <body>.) Par exemple, si vous utilisez jQuery, j'ai écrit ce fichier jQuery plug-in que je l'habitude d'utiliser la syntaxe mettre en évidence certains éléments:
// Extend jQuery functionality to support prettify as a prettify() method.
jQuery.fn.prettify = function() { this.html(prettyPrintOne(this.html())); };
utilisé comme ceci:
$('#my-code-element').prettify();
Ceci est une question ancienne, mais comme il est venu en premier dans Google pour moi, je pensais que je d ajouter une autre option. Alors que Prettify est toujours une option utile, il montre un peu son âge. Une nouvelle bibliothèque que j'ai parcourue est Prism, et elle semble plutôt bien fonctionner. C'est plus sémantique et donne un contrôle plus fin sur la façon de formater votre code. Il supporte également les plugins et ses thèmes sont plus beaux que ceux de Prettify.
Je serais vraiment troublé en ajoutant quelque chose appelé prisme à mon code ...: p –
OMYGOSH SO GOOD! MERCI POUR ÇA!!! – Adam
Je pense qu'une solution plus simple et plus puissante est highlight.js. Il supporte 169 langues en ce moment et 77 styles de code (comme Solarized dark et light). Un peu plus:
rapide configuration:
1 - Dans la tête HTML:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
2 - Dans votre contenu HTML
<pre>
<code class="html">
<p>This is your HMTL sample</p>
<p>You can use classes like "html", "php", "css", "javascript" too..</p>
</code>
</pre>
Vous pouvez vérifier les langues et les styles here.
Spot on! Fonctionne très bien! Merci. –