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í.
.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:
.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.