En este sitio hablaremos constantemente de Desarrollo Web y por ello vamos a necesitar incluir código fuente de diferentes lenguajes de programación, para ello veamos que con qué métodos podemos hacerlo.

Utilizando <pre></pre>

La forma mas sencilla de incluir código fuente es hacerlo entre los tags HTML <pre> ... </pre> que se utilizan para mostrar texto pre-formateado (Respetando saltos de línea, espacios y tabulaciones). Veamos un ejemplo con un archivo de configuración de Docker:

version: "2"
services:
  mysql:
    image: mysql:5.6
    container_name: kodetop.mysql
    environment:
      - MYSQL_DATABASE=kodedb
      - MYSQL_USER=kodeuser
      - MYSQL_PASSWORD=********
      - MYSQL_ROOT_PASSWORD=********
    ports:
      - "3306:3306"
    restart: always

  php:
    build: ./docker/php
    container_name: kodetop.http
    ports:
      - "80:80"
    volumes:
      - ./www:/var/www/html
    links:
      - mysql

Se puede leer correctamente, pero al estilo de un editor de texto aunque sería mejor si se colorea el código al estilo de un editor de código.

Utilizando Gists

GitHub mediante su servicio Gists ofrece la posibilidad de compartir bloques de código sin necesidad de crear repositorios, con la ventaja de que el código fuente se resalta automáticamente, mantener un historial de cambios e incluirlo con una sola línea de código.

Para utilizarlo necesitas una cuenta en GitHub y seguir los siguientes pasos:

• Entrar a la sección Gists
• Agregar una descripción breve del código.
• Agregar un nombre de archivo y su extensión.
• Escribir o pegar el código fuente que deseas compartir.
• Guardar tu código como público o privado.

Una vez guardado verás la opción para compartir: copias el código y lo pegas en tu web. Veamos el ejemplo anterior pero esta ves en Gist.

Cómo puedes ver es sencillo de utilizar y bien ordenado.

Extras

Si no quieres usar Gist, existen varias librerías Javascript para resaltar código, todas ellas debes incluirla en tu web antes de utilizarlas. Algunas de las mas interesantes son: highlight.js, rainbow o prism.js.