Mostrar Códigos Fuentes con Colores

Mostrar Códigos Fuentes con Colores

 Seguramente viste que en nuestros tutoriales los códigos fuentes que mostramos están con sus respectivos colores. Tal como se mostraría en un editor de códigos.

Hacer esto es muy fácil. Sin complicarnos demaciado, nosotros solo insertamos el código fuente en nuestro editor. Obvio que podemos hacerlo manualmente pero que mejor que un plugin que elimine caracteres de modo que pueda ser visto y leído verdaderamente como un Código fuente.

Por ejemplo voy a copiar un código sin usar el plugin, otro directamente en el editor html y el último utilizando el Plugin.

1. Sin usar plugin ni herrameinta codigo fuente.

 <script type="text/javascript" language="javascript">

function ejemplo(){

Alert('hola Mundo');

}

</script>

2. Usando Herramienta codigo fuente de TinyMCE.

<script type="text/javascript" language="javascript">
function ejemplo(){
	Alert('hola Mundo');
}
</script>

En realidad el codigo de arriba(2) no se vería ya que sería reconocido como código javascript que debería ejecutarse. Hemos modificado las etiquetas <> para que se muestre a ustedes.

3. Usando Plugin PrettyPrint

<script type="text/javascript" language="javascript">
function ejemplo(){
	Alert('hola Mundo');
}
</script>

Este código se debería mostrar con los colores correspondientes similar a un editor de Codigos como en dreamweaver u otro programa.

Nuestro trabajo solo es insertar ese código y no tenemos que estar diseñando los colores ni nada. El trabajo duro lo hará prettyprint

lo único que debes hacer es insertar el archivo javascript en tu pagina.

<script language="javascript" src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js" type="text/javascript"></script>

Puedes descargar ambos archivos si quieres y colocarlo como un archivo local de tu web. Por si necesitas modificar los colores este codigo hace referencia a https://google-code-prettify.googlecode.com/svn/loader/prettify.css descargalo y colocalo en tu pagina.

Una vez colocado esto, dentro de tu contenido los codigo debes pegarlo en la etiqueta pre y colocarlo como clase "prettyprint" entonces quedaría asi:

<pre class="prettyprint">
<script type="text/javascript" language="javascript">
function ejemplo(){
	Alert('hola Mundo');
}
</script>
</pre>

Y el archivo run_prettify.js se encargará de colocarle los colores automáticamente. Que facil no?.

Si deseas el plugin para tinymce 4 deberías ver el artículo.

 http://semsoft-peru.com/editor/tinymce_4_crear_plugin_pre_prettyprint.html