Minitutorial de Prism

Sencillos ejemplos para comprobar como funciona la librería PrismJS descargada en mayo 2023 (no tiene número de versión).

Para los colores se escoge el tema estándar 'Okaidia' y además marco estos ajustes:

Partiendo de los ajustes base predeterminados:

Markup + HTML + XML + SVG + MathML + SSML + Atom + RSS
CSS
C-like
JavaScript

Otros lenguajes añadidos opcionalmente:

Bash+Shell+Shell de zeitgeist87
Docker de JustinBeckwith
PHP de milesj
Markup templating Golmote

Para aligerar el peso de PrismJS deben descargarse sólo los complementos realmente necesarios.

Forma de uso

Incluir el archivo 'prism.css' y 'prism.js' descargado desde PrismJS con nuestras preferencias de lenguajes, temas, etc.

<!-- Incluir la biblioteca de Prismjs y sus componentes necesarios -->
<link rel="stylesheet" href="./css/prism.css"/>   
<script src="./js/prism.js"></script>

También existen varios CDN para incluir la biblioteca sin necesidad de descargarla, así como una gran colección de temas y extras creados por desarrolladores independientes.

Los códigos que se quieren resaltar en la web irán dentro de pre y code y la clase con el lenguaje utilizado. Ejemplo:

Para HTML, usar class="language-html"; para JavaScript, usar class="language-js"; etc.

La lista de lenguajes y tipos de código es muy grande. Consultar en Lenguajes PrismJS

<pre><code class="language-xxxx">
// sustituir xxxx según el contenido a resaltar
</code></pre>

HTML

Usando class="language-html"

<!DOCTYPE html>
<html>
<head>
    <title>Un formulario cualquiera</title>
</head>
<body>
<form action="" method="post" name="datos_usuario" id="datos_usuario">
<table width="15%" align="center">
    <tr>
        <td>Nombre:</td>
        <td><label for="nombre_usuario"></label>
            <input type="text" name="nombre_usuario" id="nombre_usuario_id"></td>
    </tr>
    <tr>
        <td>Edad:</td>
        <td><label for="edad_usuario"></label>
            <input type="text" name="edad_usuario" id="edad_usuario_id"></td>
    </tr>
    <tr>
        <td colspan="2" align="center"><input type="submit" name="boton_enviando" id="enviando_id" value="Enviar"></td>
    </tr>
</table>
</form>

</body>
</html>

Resaltar comandos dentro de una caja en la misma línea.

Se usa class="language-none". El código de está línea es el siguiente:

<p>Se usa <code class="language-none">class="language-none"</code>. El código de está línea es el siguiente:</p>

PHP

Usando class="language-php"

<?php

require "20Conexion.php";

class DevuelveProductos extends Conexion {

public function DevuelveProductos() {

    parent::Conexion();
}

public function getProductos() {
    $sql = "SELECT * FROM articulos";
    $consultaprep = $this->conexion_db->prepare($sql);
    $consultaprep->execute(array());
    $resultado = $consultaprep->fetchAll(PDO::FETCH_ASSOC);

    $consultaprep->closeCursor();

    return $resultado;

    $this->conexion_db = null;
}

/* mysqli------------------------------------------------------------------
  $resultado= $this->conexion_db->query('SELECT * FROM articulos');
  $productos=$resultado->fetch_all(MYSQLI_ASSOC);
  return $productos;
  ------------------------------------------------------------------------- */
}
?>

Javascript

Usando class="language-js"

<script type="text/javascript">
var onloadCallback = function() {
alert("Hola mundo!");
};
</script>

Bash y terminales Linux

Usando class="language-bash"

pedro@tallerdeapps:~$ ls
apachedockerfile  directorio        fichero1.txt   nginxdockerfile
borrar.txt        ejemplo.txt.save  fichero2.txt   texto.txt
destino.txt       ejemplo2.txt      get-docker.sh
pedro@tallerdeapps:~$ cd ..
pedro@tallerdeapps:/home$ ls
pedro  tallerdeapps  usuario1  usuario2
pedro@tallerdeapps:/home$ cd pedro
pedro@tallerdeapps:~$ echo "hola" > borrar.txt
pedro@tallerdeapps:~$ ls
apachedockerfile  directorio        fichero1.txt   nginxdockerfile
borrar.txt        ejemplo.txt.save  fichero2.txt   texto.txt
destino.txt       ejemplo2.txt      get-docker.sh
pedro@tallerdeapps:~$ rm borrar.txt

Script en Bash

for (( i=0;i<$ELEMENTS;i++)); do
echo ${ARRAY[${i}]}
done
while read LINE; do
ARRAY[$count]=$LINE
((count++))
done
if [ -d $directory ]; then
echo "Directory exists"
else
echo "Directory does not exists"

Git

Usando class="language-bash" (me gusta más que el específico 'language-git' también disponible)

$ git checkout
M       demoPrismJS.html
Your branch is up to date with 'origin/main'.
$ git status
On branch main
Your branch is up to date with 'origin/main'.

Changes to be committed:
(use "git restore --staged ..." to unstage)
    modified:   demoPrismJS.html

Changes not staged for commit:
(use "git add ..." to update what will be committed)
(use "git restore ..." to discard changes in working directory)
    modified:   demoPrismJS.html