Bootstrap nos permite mostrar código fuente dentro de una página web de una forma sencilla. Para poder mostrar código fuente en Bootstrap simplemente tendremos que apoyarnos en el elemento pre.
Lo utilizaremos de la siguiente manera:
Código Fuente</pre>
Aunque el uso es sencillo cuando vayamos a mostrar código fuente en Bootstrap tenemos que tener especial atención si escribimos código fuente que sea HTML. Ya que se mostrará la visualización de los elementos, en vez del texto de los elementos en sí. Para evitar esto deberemos de cambiar los símbolos mayor y menos por las entidades HTML > y < respectivamente.
Así podríamos volcar código fuente HTML de la siguiente forma:
<pre>
<html>
<body>
<h1>Hola Mundo</h1>
</body>
</html>
</pre>
Con el lenguaje HTML es recomendable que utilicemos los caracteres especiales como entidades. Aunque puede darse que también tengamos que hacerlo con otros lenguajes que utilicen caracteres especiales.
Además a la hora de mostrar código fuente en Bootstrap, si este es muy grande, podemos acotar su visualización y mostrarlo en una ventana más pequeña mediante un scroll. Para poder conseguirlo deberemos de utilizar la clase "pre-scrollable".
Así codificaremos de la siguiente manera:
Código Fuente</pre>
Por ejemplo podríamos escribir el siguiente código:
import java.applet.Applet;
import java.awt.event.*;
import java.awt.Label;
public class DobleClick extends Applet {
private static final long serialVersionUID = 1L;
private Label label1 = null;
public DobleClick() {
super();
}
public void init() {
label1 = new Label();
label1.setText("Haz doble click o triple click sobre el applet");
this.setSize(300, 200);
this.add(label1, null);
// Añadimos el manejador
ManejoClicks mC = new ManejoClicks();
this.addMouseListener(mC);
}
class ManejoClicks extends MouseAdapter {
public void mouseClicked(MouseEvent evt) {
if (evt.getClickCount() == 3) {
showStatus ("Se ha producido un triple click");
} else if (evt.getClickCount()==2) {
showStatus ("Se ha producido un doble click");
}
}
}
}</pre>
Veréis que aunque es un código muy grande, la visualización quedará reducida en nuestra web. Y así habremos conseguido mostrar código fuente con Bootstrap.
Publicaciones relacionadas:
