@bodystyle/show-code

v2.0.0

Published

21 days ago

Librería para resaltar el código fuente

0High
0Medium
0Low

bodystyle

librería sintaxis code colores resaltar

: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

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 oscuro -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/FedeManzano/show-code@main/dist/css/tema-oscuro.css">
    <title>Show Code Demo</title>
</head>
<body>
    <pre class="cod-js">
        // Código JavaScript
        console.log("¡Hola Mundo!");
    </pre>

    <script src="https://cdn.jsdelivr.net/gh/FedeManzano/show-code@main/dist/js/sintax.js"></script>
    <script>
        Show.ShowJsInit()
    </script>
</body>
</html>

:package: Instalación

Via npm

npm install 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>

3. Inicializar Show Code

<script>
    // Inicializar todos los lenguajes
    Show.ShowJavaInit()
    Show.ShowJsInit()
    Show.ShowHtmlInit()
    Show.ShowCssInit()
    Show.ShowCInit()
</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

GitHub: @FedeManzano

:link: Proyectos Relacionados

BodyStyle - Biblioteca CSS para desarrollo Front-End