¿Cómo resaltar la sintaxis en archivos usando Node.js?

Node.js admite módulos y paquetes que se pueden instalar usando NPM , lo que nos permite explotar varias funcionalidades. Una de esas funcionalidades es el resaltado de sintaxis usando Node.js que nos ayuda a representar el código resaltado como HTML estático, o también podemos usarlo para el resaltado de sintaxis dinámica. El siguiente enfoque cubre cómo resaltar archivos de sintaxis en Node.js usando elmódulo de resaltado.js .

Highlight.js funciona como un resaltador de sintaxis con detección automática de idioma. Está escrito en JavaScript y es compatible tanto con el navegador como con el servidor.

Instalación del módulo: use el siguiente comando para instalar el módulo de resaltado.js usando npm desde su terminal.

npm install highlight.js

Después de instalar desde npm, podemos usar el paquete en nuestro código de la siguiente manera:

const hljs = require('highlight.js');

Importación de CDN: podemos usar la siguiente forma de importar el módulo en la página HTML.

<enlace rel=”hoja de estilo” href=”https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/default.min.css”>

Ejemplo: hemos resaltado el texto GeeksForGeeks en el siguiente ejemplo. Importamos Highlight.js a nuestro código usando CDN y luego escribimos el código deseado en la etiqueta <pre> .

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  
<head>
    <meta charset="utf-8">
  
    <!-- Using highlight.js through CDN link -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/default.min.css">
  
    <!-- Installing highlight.js through CDN -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/highlight.min.js">
    </script>
</head>
  
<body>
    <pre>
  
        <!-- Here we have used < and > 
        because using angle brackets will be
        interpreted as actual HTML code -->
        <code class="html">
            <strong>GeeksForGeeks</strong>
        </code>
    </pre>
  
    <script type="text/javascript">
  
        // Using highlightAll method to
        // highlight the code
        hljs.highlightAll();
    </script>
</body>
  
</html>

Producción:

Referencias: https://highlightjs.org/usage/

Publicación traducida automáticamente

Artículo escrito por greenblade29 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta