Cómo formatear el código en html/css/js/php

Estoy buscando una forma de formatear automáticamente el código de color que escribo en un documento HTML. Sé que Wikipedia lo hace, por ejemplo en la página: http://en.wikipedia.org/wiki/Nested_function Cómo formatear el código en html/css/js/php

Estoy seguro de que hay bibliotecas para hacer esto, pero no puedo por mi vida, encontrar una. ¿Alguien tiene alguna sugerencia?

Fuente

2009-08-13 B T

Eche un vistazo a la biblioteca Prettify JavaScript. Es la utilizada generalmente por las personas (que es el que está siendo utilizado aquí en la SO, por ejemplo.)

que usaría así:

En su <head> elemento:

<link href="prettify.css" type="text/css" rel="stylesheet" /> 
<script type="text/javascript" src="prettify.js"></script>

En su <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 es para el uso simple de la biblioteca. Si está usando otro JavaScript en su página, recomendaría otros métodos para habilitar la biblioteca Prettify (es decir, no use el atributo onload del elemento <body>). Por ejemplo, si está usando jQuery, escribí este jQuery plugin que lo general el uso de la sintaxis resaltar ciertos elementos:

// Extend jQuery functionality to support prettify as a prettify() method. 
jQuery.fn.prettify = function() { this.html(prettyPrintOne(this.html())); };

usados como esto:

$('#my-code-element').prettify();

Fuente

2009-08-13 05:51:48 Blixt

Spot on! ¡Funciona genial! Gracias. –

ésta es una cuestión de edad, pero a medida que se acercó por primera vez en Google para mí, pensé' d agrega otra opción. Mientras que Prettify sigue siendo una opción útil, muestra su edad un poco. Una biblioteca más nueva que encontré es Prism, y parece funcionar bastante bien. Es más semántico y proporciona un control más preciso sobre cómo formatear tu código. También admite complementos y sus temas se ven mejor desde el primer momento que los de Prettify.

Fuente

2013-12-01 05:59:41

Estaría muy inquieto al agregar algo llamado prisma a mi código ...: p –

OMYGOSH SO GOOD! ¡¡¡GRACIAS POR ESO!!! – Adam

Creo que una solución más simple y potente es highlight.js. Admite 169 idiomas en este momento y 77 estilos de código (como Solarizado oscuro y claro). Algunos más:

el idioma automático de detección de
código en varios idiomas destacando
disponible para Node.js
funciona con cualquier tipo de código
compatible con cualquier marco js

rápida configuración:

1 - En la cabeza 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 - En el contenido 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>

Puede comprobar los lenguajes y estilos here.

Fuente

2017-01-22 14:51:03

Cómo formatear el código en html/css/js/php

Respuesta

Cuestiones relacionadas