New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

@bodystyle/show-code

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@bodystyle/show-code

Librería para resaltar el código fuente

latest
npmnpm
Version
2.5.2
Version published
Maintainers
1
Created
Source

Logo

Show Code

Descargar Version License Size npm

Acerca de • Inicio Rápido • Instalación • Uso • Temas • Contribuir • Licencia

Biblioteca dedicada a resaltar el código fuente en las páginas web

:book: Acerca de Show Code

Show Code es una biblioteca JavaScript liviana y eficiente para resaltar sintaxis de código en páginas web. Es una dependencia de BodyStyle, diseñada para proporcionar funcionalidades de resaltado de código de manera simple y elegante.

Lenguajes Soportados

  • :white_check_mark: JavaScript
  • :white_check_mark: Java
  • :white_check_mark: C
  • :white_check_mark: CSS
  • :white_check_mark: HTML
  • :white_check_mark: SQL

Características

  • :zap: Biblioteca liviana - Bundle de solo 20KB
  • :sparkles: Fácil de integrar - Sin configuración compleja
  • :art: Temas personalizables - Tema oscuro y claro incluidos
  • :rocket: Vanilla JavaScript - Sin dependencias externas
  • :package: Múltiples formatos - Disponible vía npm y CDN

:rocket: Inicio Rápido

La forma más rápida de usar Show Code es mediante CDN:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Tema claro -->
    <link rel="stylesheet" href="https://rawcdn.githack.com/FedeManzano/show-sintax/refs/heads/master/dist/css/tema-claro.min.css">
    
    <!-- Tema oscuro -->
    <link rel="stylesheet" href="https://rawcdn.githack.com/FedeManzano/show-sintax/refs/heads/master/dist/css/tema-oscuro.min.css">

    <title>Show Code Demo</title>
</head>
<body>
    <pre class="cod-js">
        // Código JavaScript
        console.log("¡Hola Mundo!");
    </pre>

    <script src="https://rawcdn.githack.com/FedeManzano/show-sintax/refs/heads/master/dist/js/sintax.min.js"></script>
    <script>
        Show.ShowJsInit()
    </script>
</body>
</html>

:package: Instalación

Via npm

npm install @bodystyle/show-code

Via CDN

<!-- CSS - Tema Oscuro -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/FedeManzano/show-code@main/dist/css/tema-oscuro.css">

<!-- CSS - Tema Claro -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/FedeManzano/show-code@main/dist/css/tema-claro.css">

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/gh/FedeManzano/show-code@main/dist/js/sintax.js"></script>

Descarga Manual

Descarga los archivos desde el repositorio de GitHub y copia los archivos de la carpeta dist a tu proyecto.

:wrench: Uso

1. Incluir los archivos necesarios

<link rel="stylesheet" href="ruta/a/tema-oscuro.css">
<script src="ruta/a/sintax.js"></script>

2. Agregar el código HTML

Usa la etiqueta <pre> con la clase correspondiente al lenguaje:

<!-- JavaScript -->
<pre class="cod-js">
    const mensaje = "Hola Mundo";
    console.log(mensaje);
</pre>

<!-- Java -->
<pre class="cod-java">
    public class Main {
        public static void main(String[] args) {
            System.out.println("Hola Mundo");
        }
    }
</pre>

<!-- HTML -->
<pre class="cod-html">
    <div class="container">
        <h1>Título</h1>
        <p>Párrafo de ejemplo</p>
    </div>
</pre>

<!-- CSS -->
<pre class="cod-css">
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }
</pre>

<!-- C -->
<pre class="cod-c">
    #include <stdio.h>
    
    int main() {
        printf("Hola Mundo\n");
        return 0;
    }
</pre>

<!-- SQL -->
<pre class="cod-sql">
    SELECT id, nombre, email 
    FROM usuarios 
    WHERE estado = 'activo' 
    ORDER BY fecha_registro DESC;
</pre>

3. Inicializar Show Code

<script>
    // Inicializar todos los lenguajes
    Show.ShowJavaInit()
    Show.ShowJsInit()
    Show.ShowHtmlInit()
    Show.ShowCssInit()
    Show.ShowCInit()
    Show.ShowSqlInit()
</script>

O inicializa solo los lenguajes que necesites:

<script>
    // Solo JavaScript
    Show.ShowJsInit()
</script>

:art: Temas

Show Code incluye dos temas predefinidos:

Tema Oscuro

<link rel="stylesheet" href="dist/css/tema-oscuro.css">

Tema Claro

<link rel="stylesheet" href="dist/css/tema-claro.css">

:hammer_and_wrench: Desarrollo

Requisitos

  • Node.js >= 14
  • npm >= 6

Instalación de dependencias

npm install

Scripts disponibles

# Modo desarrollo
npm run dev

# Build de producción
npm run build

:handshake: Contribuir

Las contribuciones son bienvenidas. Si deseas contribuir:

  • Fork el proyecto
  • Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
  • Commit tus cambios (git commit -m 'Add some AmazingFeature')
  • Push a la rama (git push origin feature/AmazingFeature)
  • Abre un Pull Request

:page_facing_up: Licencia

Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.

:bust_in_silhouette: Autor

Federico Manzano

:link: Proyectos Relacionados

  • BodyStyle - Biblioteca CSS para desarrollo Front-End

Hecho con :heart: por Federico Manzano

Keywords

librería
sintaxis
code
colores
resaltar

FAQs

Package last updated on 28 Jan 2026

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

The Hidden Blast Radius of the Axios Compromise

Security News

The Hidden Blast Radius of the Axios Compromise

The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.

By Ahmad Nassri  -  Apr 01, 2026