Tutorial Convertir código fuente a HTML coloreado

En muchos sitios Web y blogs he visto que cada vez que publican código fuente en una página, lo hacen con un formato colorido para resaltar la sintaxis. Siempre he querido una herramienta así para mi blog, pero nada de cargar scripts js desde sitios de terceros ¬_¬

Hay infinitas herramientas, plugins y sitios Web que ofrecen servicios para darle formato HTML al código fuente, basta con hacer una búsqueda rápida en Google para comprobarlo:


De las que he visto y probado, hasta ahora la que más me gusta es hilite.me, por su flexibilidad, cantidad de lenguajes de programación que soporta, y amplia variedad de estilos predefinidos:


hilite.me toma el código fuente y lo convierte a código HTML para pegar en nuestras páginas.

Por ejemplo, para convertir código SQL a formato HTML, pegar el código fuente en el recuadro superior de la izquierda (debajo de la leyenda "Source code:"), luego seleccionar el lenguaje de programación (SQL) y seleccionar un estilo de colores:


Luego, al presionar el botón "Highlight!", aparece la vista previa en la parte inferior, y el código HTML para copiar en el recuadro superior de la derecha:


Ejemplos

Código SQL con estilo "trac":
CREATE DATABASE IF NOT EXISTS pepe;      

USE pepe;

CREATE TABLE IF NOT EXISTS prueba (
        id BIGINT AUTO_INCREMENT,  
        texto VARCHAR(255),        
        PRIMARY KEY(id)            
) Type=InnoDB;

Código PHP con estilo "colorful":

<?php

echo "<h4>PRUEBA</h4>";

// Parámetros de conexión a la base de datos
$host = "localhost";
$db = "pepe";
$user = "root";
$pass = "root";
$link = "";

// Conectar al servidor MySQL
if (!$link = mysql_connect($host,$user,$pass)) {
    exit("Imposible conectar a la base de datos.");
}

// Seleccionar base de datos
if (!mysql_select_db($db,$link)) {
    exit("Imposible seleccionar base de datos: ".mysql_error($link));
}

// Insertar una nueva fila en la tabla "prueba"
/*
+-------+--------------+------+-----+---------+----------------+
| Field | Type         | Null | Key | Default | Extra          |
+-------+--------------+------+-----+---------+----------------+
| id    | bigint(20)   | NO   | PRI | NULL    | auto_increment |
| texto | varchar(255) | NO   |     | NULL    |                |
+-------+--------------+------+-----+---------+----------------+
*/
$date = new DateTime("NOW");
$fdate = $date->format(DateTime::RFC850);
$query = "INSERT INTO prueba (texto) VALUES ('$fdate');";
if (!mysql_query($query,$link)) {
    exit("Error al insertar en la base de datos: ".mysql_error($link));
}

// Seleccionar datos de la tabla "pepe"
$query = "SELECT id,texto FROM prueba;";
if (!$result = mysql_query($query,$link)) {
    exit("Error al seleccionar datos de la base de datos: ".mysql_error($link));
}

// Imprimir tabla
?>
<p>Ultimos Accesos:</p>
<table style="border: 1px solid #fff;">
<tr><th>ID</th><th>Fecha</th></tr>
<?php

while ($row = mysql_fetch_array($result)) {
    echo "<tr><td>" . $row['id'] . "</td><td>" . $row['texto'] . "</td></tr>";
}

?>
</table>
<?php

// Cerrar conexión MySQL
mysql_close();

?>
<p>-- FIN --</p>

0 comentarios: sobre Tutorial Convertir código fuente a HTML coloreado

Publicar un comentario para Tutorial Convertir código fuente a HTML coloreado

:a   :b   :c   :d   :e   :f   :g   :h   :i   :j   :k   :l   :m   :n   :o   :p   :q   :r   :s   :t

Calculando Tiempo
Alienspace Theme © Copyright 2017 By Proxor
Mi Ping en TotalPing.com FeedBurner FeedBurner FeedBurner FeedBurner FeedBurner