Highlight.js - Mostrar código fuente

Para mostrar código fuente en Blogger con las opciones de nombre del tipo de código, copiar, pegar, resaltado de sintaxis y enumeración de líneas usando Highlight.js, sigue estos pasos detallados:


1. Incluir Highlight.js en Blogger

Primero, necesitas añadir Highlight.js a tu plantilla de Blogger para que funcione el resaltado de sintaxis.

Paso 1: Accede a la plantilla de Blogger

  1. Inicia sesión en Blogger.
  2. Dirígete a Tema en el panel lateral izquierdo.
  3. Haz clic en Editar HTML para acceder al código fuente de la plantilla.

Paso 2: Añade los archivos CSS y JavaScript de Highlight.js

  1. Encuentra la etiqueta </head> en tu plantilla y justo antes de esta, pega los siguientes códigos para incluir los archivos necesarios:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/javascript.min.js"></script>

Puedes cambiar el tema de Highlight.js usando otros archivos CSS si prefieres un estilo diferente. Para ver más opciones de estilos, puedes visitar la documentación de Highlight.js.

Activar Highlight.js:

  • Justo después de agregar los enlaces anteriores, agrega el siguiente bloque de script para que Highlight.js se inicie automáticamente en todos los bloques de código:
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightElement(block);});
});
</script>

Paso 2: Mostrar Bloques de Código en tus Entradas de Blogger

  1. Escribe una entrada de Blogger:

    • Crea o edita una entrada de tu blog donde quieras mostrar el código.

  2. Añade el bloque de código en la entrada:

    • Cambia al modo HTML de la entrada.
    • Usa las etiquetas <pre> y <code> para encerrar el bloque de código que deseas mostrar. Por ejemplo, si quieres mostrar un código HTML, puedes hacerlo de la siguiente manera:
<div class="container" style="margin-top: 20px;">
<pre><code class="language-html" id="code">
	Agregar el código AQUI
</code></pre>
</div>

Nota: La clase del bloque de código debe coincidir con el lenguaje que estás mostrando (por ejemplo, html, css, javascript, etc.).


Resaltado del Lenguaje de Programación:
    Asegúrate de especificar el lenguaje de programación en la clase del elemento <code> (como class="html", class="css", class="javascript", etc.).
    Ejemplos para otros lenguajes:


<pre><code class="css">/* Tu código CSS */</code></pre>
<pre><code class="javascript">// Tu código JavaScript</code></pre>
<pre><code class="php"><?php // Tu código PHP ?></code></pre>

 

Paso 3: Añadir Enumeración de Líneas

Para enumerar líneas de código, puedes hacer uso de un estilo CSS personalizado. Agrega este código CSS en tu sección <head> o en el CSS de tu tema (en "Tema" → "Personalizar" → "Avanzado" → "Añadir CSS"):

<style>
  pre {
    counter-reset: line-numbering;
  }
  pre code {
    display: block;
    padding-left: 2.5em;
    position: relative;
  }
  pre code:before {
    counter-increment: line-numbering;
    content: counter(line-numbering);
    position: absolute;
    left: 0;
    padding-right: 1em;
    text-align: right;
    color: #888;
  }
</style>

Este código añadirá números de línea en el margen izquierdo del bloque de código.

Paso 4: Añadir la Funcionalidad de Copiar

Para añadir un botón de copiar al portapapeles, puedes usar JavaScript. Aquí te muestro cómo hacerlo:

  1. Añadir el botón de copiar: En cada bloque de código, puedes agregar un botón de copiar manualmente en tus entradas, o puedes automatizarlo.

    Agrega el siguiente código dentro de la sección <head>:


  <!-- Botón de Copiar Clipboard   -->
  <script>
    document.querySelectorAll('.copy-button').forEach((button) => {
      button.addEventListener('click', () => {
        const code = button.previousElementSibling.querySelector('code');
        navigator.clipboard.writeText(code.innerText)
          .then(() => {
            button.textContent = 'Copiado!';
            setTimeout(() => button.textContent = 'Copiar', 2000);
          });
      });
    });
  </script>

Estilo del botón de copiar: Añade este código CSS en la sección de estilo:

  <style>
    .copy-button {
  position: absolute;
  right: 10px;
  top: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px;
}
.copy-button:hover {
  background-color: #45a049;
}
  </style>

Este script colocará un botón de "Copiar" en cada bloque de código, permitiendo copiar el contenido al portapapeles.

Paso Final: Guardar y Probar

  1. Guarda los cambios en el tema de Blogger.
  2. Crea una entrada de prueba donde uses el código que agregaste.
  3. Publica la entrada y verifica que el código aparezca correctamente resaltado, con números de línea y el botón de copiar funcionando.

....