Sto cercando un modo per formattare automaticamente e codice colore che scrivo in un documento HTML. So che wikipedia lo fa, per esempio nella pagina: http://en.wikipedia.org/wiki/Nested_functionCome formattare il codice in html/css/js/php
Sono sicuro che ci sono biblioteche là fuori per fare questo, ma non posso per la vita di me, trovarne uno. Qualcuno ha qualche suggerimento?
Dai un'occhiata alla libreria Prettify JavaScript. E 'quello generalmente utilizzato da persone (è quello che viene usata qui su SO, per esempio.)
si può usare in questo modo:
Nel vostro <head> elemento:
<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>
Nel vostro <body> elemento:
<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 cappello è per un uso semplice della biblioteca. Se stai usando altri JavaScript nella tua pagina Suggerirei altri metodi per abilitare la libreria Prettify (vale a dire, non utilizzare l'attributo onload dell'elemento <body>.) Ad esempio, se si sta utilizzando jQuery, ho scritto questo jQuery plugin che io di solito uso di una sintassi evidenziare alcuni elementi:
// Extend jQuery functionality to support prettify as a prettify() method.
jQuery.fn.prettify = function() { this.html(prettyPrintOne(this.html())); };
usati in questo modo:
$('#my-code-element').prettify();
questa è una vecchia questione, ma come è arrivata per prima in Google per me, ho pensato' d aggiungere un'altra opzione. Mentre Prettify è ancora un'opzione utile, mostra un po 'la sua età. Una nuova libreria che ho trovato è Prism e sembra funzionare piuttosto bene. È più semantico e offre un controllo più preciso su come formattare il codice. Supporta anche i plugin ei suoi temi sembrano più belli di quelli di Prettify.
Sarei davvero sconvolto aggiungendo qualcosa chiamato prisma al mio codice ...: p –
OMYGOSH COSÌ BUONO! GRAZIE PER QUELLO !!! – Adam
Penso che una soluzione più semplice e potente sia highlight.js. Supporta 169 lingue in questo momento e 77 stili di codice (come il buio e la luce solarizzati). Alcuni di più:
rapida setup:
1 - In testa 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 - Nel suo sito web 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>
è possibile controllare i linguaggi e stili here.
Spot on! Funziona alla grande! Grazie. –