Prism.js - Configurar el tema de resaltado

 Para mostrar código fuente en Blogger con opciones como resaltado de sintaxis, enumeración de líneas, y botones de copiar/pegar, se puede utilizar una biblioteca de resaltado de sintaxis Prism.js

Paso 1: Configurar el tema de resaltado (Prism.js)

  1. Ve a la página oficial de Prism.js: https://prismjs.com/.
  2. Personaliza el paquete seleccionando los lenguajes que deseas soportar (HTML, XML, CSS, JS, PHP, TypeScript, etc.), y elige un tema de resaltado de sintaxis.
  3. Descarga los archivos CSS y JS generados.

 

Paso 2: Subir los archivos a Blogger

  1. Entra a tu Blogger y ve a Tema > Editar HTML.
  2. En el encabezado (<head>) de tu plantilla de Blogger, inserta los siguientes enlaces para incluir los archivos descargados de Prism.js:
<link href="URL_DE_TU_ARCHIVO_PRISM_CSS" rel="stylesheet" />
<script src="URL_DE_TU_ARCHIVO_PRISM_JS"></script>

Si prefieres usar los archivos CDN oficiales de Prism.js, puedes usar:

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>

Archivos CDN, si quieres usar el Tema "prism-okaidia.css" debes Copiar y Agregar el siguiente codigo: 

<!-- Agregar "prism-okaidia.css" y "prism.js" debajo del Blogger Scripts -->
<link href='http://prismjs.com/themes/prism-okaidia.css' rel='stylesheet'/>
<script src='http://prismjs.com/prism.js' type='text/javascript'> </script>

 

Paso 3: Añadir el código fuente en las entradas

  1. En la entrada de Blogger, coloca tu código en un bloque <pre> con la clase correspondiente al lenguaje. Aquí tienes un ejemplo:

<pre class="line-numbers"><code class="language-html">
Aquí va el código. Se modifica el class="language--html" 
segun el tipo de codigo a mostrar: -html, -css, -js
</code></pre>

 Para otros lenguajes:

  • language-css para CSS.
  • language-js para JavaScript.
  • language-php para PHP.
  • language-typescript para TypeScript.

 

Paso 4: Agregar enumeración de líneas

Para mostrar números de líneas en el código, asegúrate de cargar el complemento de Prism.js para líneas:

<!-- complemento de Prism js para líneas-->
 <link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css' rel='stylesheet'/>
 <script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js'> </script>

  Luego añade esta clase CSS dentro de la etiqueta <pre>:

<pre class="line-numbers"><code class="language-js">
function sayHello() {
  console.log("Hello, world!");
}
</code></pre>

 

Paso 5: Botón de Copiar

Prism.js también permite agregar la funcionalidad de "Copiar al portapapeles". Para ello:

  1. Descarga e integra el complemento Prism Clipboard desde:

<!-- Botón de Copiar: Prism Clipboard -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js'> </script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js'> </script>

 

Paso 6: Guardar y probar

  1. Guarda los cambios en tu plantilla de Blogger.
  2. Publica una entrada con tu código para verificar que el resaltado de sintaxis, la numeración de líneas y el botón de copiar estén funcionando correctamente.
  3. Se observará de la siguiente manera: Mostrar código fuente en Blogger con Prism-Okaidia

Este proceso te permitirá mostrar código con todas las funcionalidades mencionadas en tu blog de Blogger.