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.
Envíar Comentario
En este sitio los comentarios se publican previa aprobación del equipo de Kodetop. Evita los comentarios ofensivos, obscenos o publicitarios. Si deseas publicar código fuente puedes hacerlo entre las etiquedas
<pre></pre>