Cómo aplicar resaltado de sintaxis en el lado del servidor con PHP en Laravel

La función de resaltado de sintaxis es esencial para todos los blogs o proyectos de programación donde hay algún código para compartir con otra persona. Debido a la simplicidad, los desarrolladores utilizan bibliotecas de JavaScript para resaltar el código en el navegador del cliente sin ningún tipo de problema o estrés. Pero a veces, es posible que desee una solución que funcione en todas partes donde, incluso con JavaScript desactivado, obtendrá un efecto de resaltado de sintaxis increíble.

En este artículo, le mostraremos cómo resaltar código en el lado del servidor sin ningún tipo de herramienta de línea de comandos, sino simplemente PHP simple en su proyecto Laravel.

Requisitos

Para resaltar código en el lado del servidor con PHP puro (sin necesidad de pigmentos u otras herramientas de línea de comando), le recomendamos que utilice la biblioteca Highlight.php. highlight.php es un resaltador de código del lado del servidor escrito en PHP que actualmente admite más de 135 idiomas. Es un puerto de highlight.js de Ivan Sagalaev escrito por Geert Bergman que hace un uso completo del lenguaje y las definiciones de estilo del proyecto original de JavaScript.

composer require scrivo/highlight.php

Después de la instalación, podrá utilizar la clase Highlighter de la biblioteca en su proyecto Laravel. Visite el repositorio oficial de la biblioteca en Github para obtener más información.

A. Desde un controlador a la vista

La primera forma de lograrlo es a través de la sencilla vista del controlador de procesos:

1. Prepare el marcado listo para resaltar en su controlador

La biblioteca funciona de la siguiente manera: cree una instancia de la clase de resaltado, use el método de resaltado para crear el marcado listo para resaltar en la vista. El método de resaltado espera como primer argumento el identificador del lenguaje de programación a resaltar y como segundo argumento el código que será resaltado.

En su controlador, deberá incluir la clase Highlighter en la parte superior de su controlador y seguir el proceso mencionado anteriormente. Tenga en cuenta que en el siguiente ejemplo estamos enviando el marcado listo para resaltar a una vista de hoja:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

// Include the Highlighter class
use Highlight\Highlighter;

class DefaultController extends Controller
{
    /**
    * Ruta índice
    *
    * @return Response
    */
    public function index()
    {
        // Crea una nueva instancia de Highlighter
        $highlighter = new Highlighter();

        // Defina el idioma que desea usar para resaltar
        $language = "javascript";

        /**
         * Algún código de ejemplo para resaltar en JavaScript
         */
        $code = <<<EOF
var DebugLibExample = {
    toggleDebug = function(s) {
        _f.debug = s ? !!s.debug : false;
    },
    logger = function(msg, type) {
        if (_f.debug) {
            type = type || 'log';
        
            var logAction = {
                'error': function(m) {
                    console.error('Chameleon.js:', m);
                },
                'warn': function(m) {
                    console.warn('Chameleon.js:', m);
                },
                'log': function(m) {
                    console.log('Chameleon.js:', m);
                }
            };
        
            if (typeof msg === 'undefined') {
                logAction.error('Msg given to logger is undefined!');
            } else {
                if (logAction.hasOwnProperty(type)) {
                    logAction[type](msg);
                } else {
                    logAction.error(['Unknown logAction type!', type]);
                }
            }
        }
    }
};
EOF;

        // Cree el marcado con estilos listos para resaltar en la vista
        // como primer argumento el tipo de idioma y como segundo el código
        $markupHighlightedCodeObject = $highlighter->highlight($language, $code);

         // Envíe el marcado con estilos a alguna vista de hoja (default.blade.php) que desee
         // En este caso el parámetro "código" contiene nuestro código en la vista
        return view("default", [
            "code" => $markupHighlightedCodeObject
        ]);
    }
}

Como puede ver, envía un parámetro codea la siguiente vista de Twig. Este valor se utilizará en la vista Twig del siguiente paso.

2. Renderizado y marcado de estilo en Blade View

Esta vista renderizará el marcado siguiendo las pautas de Highlight.js ( codeetiqueta con clase hljs <lang>dentro de una preetiqueta). El parámetro de código accesible en twig debido a nuestro controlador es un objeto que contiene 2 propiedades, a saber, el idioma y el valor que contiene el idioma utilizado para resaltar el código en el servidor y el código generado respectivamente.

Es importante ver que una vez que renderice el marcado listo para resaltar en la vista, debe usar el filtro sin procesar de twig. El filtro sin formato marca el valor como "seguro", lo que significa que en un entorno con el escape automático habilitado, esta variable no se escapará (el HTML generado será realmente HTML en lugar de entidades HTML).

{{-- 
     Insertar estilos Highlight.js desde CDN
     o su propio archivo css local
--}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atelier-heath-dark.min.css" />

{{--
    Renderice el elemento pre con la etiqueta de código dentro y las clases respectivas.
    Nota: no olvide imprimir el código generado por la biblioteca sin
    escapando de su contenido. Con la hoja puede imprimirlo fácilmente usando {!! wont_escaped !!}
--}}
<pre>
    <code class="hljs {{ $code->language }}">{!! $code->value !!}</code>
</pre>

Como resultado en la vista, nuestro código resaltado se verá así:

Impresionante, ¿no? y no necesitaba JavaScript para obtener el mismo resultado para su código. Recuerde que hay más de 135 idiomas admitidos, así que eche un vistazo a los lenguajes admitidos en el proyecto aquí.

Que te diviertas ❤️!