Poner codigo de programacion en colores en una pagina web

[Aeros]

Lo que dice el titulo, hay algún script o programa que me transforme el código que hago copy past y se coloque en colores en mi pagina web??

los códigos de programación son java y python


Gracias

[madpitbull_99]

El mas conocido y usado en los blogs es este: SyntaxHighlighter.

Aquí tienes las referencias de como implementarlo.

[Aeros]

El mas conocido y usado en los blogs es este: SyntaxHighlighter.

Aquí tienes las referencias de como implementarlo.

muchas graciassss, estaba cansado de buscar en google, pero para paginas web sirve tambien no?

edito por segunda ves

si se puede D:D

[Spider-Net]

Pues yo me quedo con Geshi que es el que usa este foro: http://qbnz.com/highlighter/

[Aeros]

El mas conocido y usado en los blogs es este: SyntaxHighlighter.

Aquí tienes las referencias de como implementarlo.

me andubo perfeectoo

pero mi problema es q queda el code muy grandee, se puede achicar?

[madpitbull_99]

Si, se puede achicar. Para cambiarle las dimensiones tienes que editar el fichero: /styles/shCoreDefault.css o shCore.css, depende cual estés usando (en el ejemplo que viene con el script hay que modificar shCoreDefault.css ).

Para ajustarle el ancho buscas la linea 56 (la clase .syntaxhighlighter) y le cambias el valor.

Código (css,2) [Seleccionar] Expandir

.syntaxhighlighter {
   width: 10% !important;
   margin: 1em 0 1em 0 !important;
   position: relative !important;
   overflow: auto !important;
   font-size: 1em !important;
}

En el ejemplo de arriba es la linea resaltada. Si el código es demasiado largo y no cabe te agregara una barra de scroll (de desplazamiento).

Prueba y cuéntanos.

[Aeros]

bien pero esa es la barra de abajo no la otra ^^, queda horrible

cual linea tengo q tokar para modificar el % de la otra barra?

no conozco nada de css, perdon!!

excelente pagina web tienes

[madpitbull_99]

bien pero esa es la barra de abajo no la otra ^^, queda horrible

Entonces supongo que te refieres a la altura a al tamaño de la fuente. El tamaño se define en la propriedad font-size en la misma clase (bloque de código).

Prueba cambiando el valor de la linea resaltada por el valor que he puesto aquí.

Código (css ,6) [Seleccionar] Expandir

.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 0.7em !important;
}

Juega un poco con el valor hasta llegar al resultado que quieres. Supongo que a eso te refieres con "la otra barra".

Otra cosa que puedes hacer es indicarle una altura máxima. Te quedara algo como en la imagen de abajo:



Para cambiarle la altura máxima permitida usas la propriedad height seguido del valor y la unidad.

Te dejo el código que he utilizado para el ejemplo de la imagen de arriba:

Código (css ,2,3,7) [Seleccionar] Expandir

.syntaxhighlighter {
  width: 30% !important; //Es el ancho
  height: 100px !important; //Es la altura medida en pixels
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 0.7em !important; //El tamanio de la fuente
}

Te sugiero la pagina: LibrosWeb y el tutorial de CSS.

[Aeros]

de 10

ahora voy a investigar como pongo fondo negro y letras grises y las setencias verdes

Gracias!

[Nakp]

talvez te interesen los ultimos 4

http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/