Blogger: Editor de texto para códigos de programación con Syntax Highlighter

Si eres un programador que le gusta compartir sus conocimientos, Blogger es una de esas herramientas que te facilitará el trabajo y aquí te enseñamos como publicar esos códigos que serían de mucha ayuda para nuevos en esta área.

En esta oportunidad mostraré como publicar en Blogger esos códigos con formato o sintaxis de un IDE y pueda tener una mejor apreciación. Para ello utilizaremos una extensión 

PASO 1. Nos dirigimos a Tema y después presionamos en el botón Editar HTML, nos aparecerá un cuadro con todo el código fuente de la apariencia de nuestro Blogger. Presionamos Ctrl + F para iniciar una búsqueda del final del "head".

Editar HTML de nuestro Blogger

Búsqueda de la etiqueta


PASO 2. Copiamos el siguiente código antes de la etiqueta que ubicamos
y presionamos en Guardar Tema.
Copiamos los códigos antes de la etiqueta
 


  
 <!-- Syntax Highlighter Additions START -->
  
 <link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/androidstudio.min.css' rel='stylesheet'/>
 <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js'/>
 <script>hljs.initHighlightingOnLoad();</script>

 <!-- Syntax Highlighter Additions END -->

PASO 3. Para publicar solo debes agregar las etiquetas "pre" y después especificar que lenguaje es "brush: xml" en mi caso pongo XML porque es el lenguaje que estoy publicando. Ustedes escribir java, sql, js, php según corresponda.

El código que se encuentra dentro del cuadro azul solo está de ejemplo


  
<pre>

   <code class="html">  

      <!-- Escribir tu contenido debajo de este comentario -->

   </code> 

</pre>

Recomendación: Si tienes problemas con algunos signos que no se muestran o marca algún error porque el fragmento que deseas mostrar se compila antes de mostrarse, utiliza este conversor de HTML a cadena de texto. 

Comentarios

Publicar un comentario

Entradas más populares de este blog

Evaluar funciones matemáticas en Java con librería JEP

Imagen
La Programación nos puede facilitar muchas tareas en ellas incluidas las Matemáticas, si muy bien muchos conocerán que existen librerías que se importan a nuestro Proyecto Java donde existen un conjunto de Clases, que poseen una serie de Métodos y Atributos. En pocas palabras estas librerías contienen códigos que nos facilitan en la elaboración del Proyecto. Para este pequeño Proyecto utilizaremos la librería JEP.jar en el Entorno de Desarrollo NetBeans Utilizaremos la versión:  jep-java-3.4-trial.jar        Descargar 1. IMPORTAR LIBRERÍA JEP. 2. INSERTAR CÓDIGO JAVA. *Como ejemplo hallaremos el "sin(x^2) + x" cuando x =25  package Ejemplos; import com.singularsys.jep.JepException; import org.nfunk.jep.JEP; public class Evaluar_Funcion { public static void main(String[] args) throws JepException { JEP j = new JEP(); j.addStandardConstants(); j.addStandardFunctions(); j.addVariable("x", 25); //("var
Leer más

Aprendizaje supervisado - Árbol de decisión para diagnóstico de enfermedades con Python

Imagen
Hola, en esta oportunidad voy a mostrar un ejemplo de Aprendizaje Supervisado, para cual usaremos el algoritmo de Árbol de decisión con el lenguaje de programación Python. ¿Qué es el aprendizaje supervisado? En aprendizaje supervisado es una técnica para deducir una función a partir de datos de entrenamiento, las cuales consisten de pares de objetos (normalmente vectores): una componente del par son los datos de entrada y el otro, los resultados deseados. Caso práctico: DIAGNÓSTICO DE ENFERMEDADES Este tipo de aprendizaje es típicamente utilizado para diagnosticar enfermedades. En la siguiente tabla se muestra una base de datos de un centro médico a modo de ejemplo (el ejemplo solo tiene fines ilustrativos ya que el número de instancias es muy bajo). En la primera fila se muestran los nombres de los atributos. «Número de paciente», «Fiebre», «Dolor de garganta», «Congestión» y «Dolor de cabeza» corresponden a los atributos de entrada y se refieren a los distintos síntomas present
Leer más

Cambiar tamaño (redimensionar) imagen en Laravel 8 con librería ImageManagerStatic de Intervention

Imagen
En este post escribiré de la importancia de redimensionar las imágenes subidas desde un formulario o API de Laravel 8 u otro Framework que trabaje con PHP, uno de los principales motivos por el cual se busca redimensionar es el peso de la imágenes. Actualmente vengo trabajando con reportes en PDF (dompdf.wrapper) y las imágenes subidas directamente desde teléfonos móviles. Al pasar del tiempo los smartphones suelen mejorar sus cámaras con mayor resolución y tamaño. Con la finalidad de no restringir el tamaño de la imagen o poner como requisitos los tamaños máximos que se deben subir, se implementa este tipo de soluciones donde podamos reducir en gran parte el tamaño y obtenerlo del tamaño ideal para el trabajo que estés realizando. En mi experiencia las imágenes reducen una cantidad considerable sin perder una buena calidad para una impresión en un reporte u otras partes donde desees utilizar la imagen redimensionada. Aquí les dejo el código completo para que lo puedas implementar si
Leer más