npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

show-sintax

v1.1.1

Published

Librería para resaltar el código fuente

Downloads

7

Readme

Show Code (v1.1.0)

Librería para resaltar el código fuente en páginas web.

Código

En esta versión se incorparan los lenguajes c, java. Los lenguajes incluidos son html, js, css, java, c.

GetStarted

La forma más rápida de disponer de la librería es a través del CDN de los archivos de estilos css y el archivo con la lógica js.

Archivos de stilos (CSS)

Debemos elegir uno de los dos archivos de estilos para añadir a la cabecera de nuestro documento html. Disponemos de dos temas con colores claros y oscuros.

CDN Tema Claro

https://ghcdn.rawgit.org/FedericoManzano/show-code-v1.1.0-fuente/master/dist/css/tema-claro.min.css

CDN Tema Oscuro

https://ghcdn.rawgit.org/FedericoManzano/show-code-v1.1.0-fuente/master/dist/css/tema-oscuro.min.css

Archivos JS

Luego debemos agregar el CDN del archivos sintax.js encima de la etiqueta de cierre del </body> en nuestro documento html.

https://ghcdn.rawgit.org/FedericoManzano/show-code-v1.1.0-fuente/master/dist/js/sintax.min.js

Plantilla

<!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://ghcdn.rawgit.org/FedericoManzano/show-code-v1.1.0-fuente/master/dist/css/tema-claro.min.css">

    <!-- Tema claro -->
    <link rel="stylesheet" href="https://ghcdn.rawgit.org/FedericoManzano/show-code-v1.1.0-fuente/master/dist/css/tema-oscuro.min.css">


    <title>Plantilla Show V1.1.0</title>
</head>
<body>

    <pre class="cod-html">
        <!-- Aca va lo que queremos resaltar html --->
    </pre>
    
    <pre class="cod-css">
        <!-- Aca va lo que queremos resaltar css --->
    </pre>

     <pre class="cod-js">
        <!-- Aca va lo que queremos resaltar js --->
    </pre>

    <script src="https://ghcdn.rawgit.org/FedericoManzano/show-code-v1.1.0-fuente/master/dist/js/sintax.min.js"></script>
    <script>

        // Sólo inicializamos los lenguajes que queremos utilizar 
        // En este caso inicializa todos.
        Show.ShowHtmlInit()
        Show.ShowCssInit()
        Show.ShowJsInit()
        Show.ShowCInit()
        Show.ShowJavaInit()
    </script>
</body>
</html>

En esta plantilla tenemos que decidir que tema utilizar, el tema claro o el tema oscuro.

Precompilado

Podemos disponer de los archivos de la librería sin necesidad de utilizar su CDN descargando el archivo pre-compilado a través del siguiente enlace.

https://github.com/FedericoManzano/show-code-v1.1.0-precompilado/archive/master.zip

Node js

Podemos disponer de la librería a través de los gestores de paquetes de NodeJs a través de los siguientes comandos.

NPM

npm i show-sintax

yarn

yarn add show-sintax

Proyectos SPA

Cuando trabajamos con librería como react, angular o vue es necesario importar los módulos correspondientes a cada lenguaje e inicializarlo.

import CodigoHtml from "show-code/src/modulos/CodigoHtml";
import CodigoCss from "show-code/src/modulos/CodigoCss";
import CodigoJs from "show-code/src/modulos/CodigoJs";
import CodigoJava from "show-code/src/modulos/CodigoJava";
import CodigoC from "show-code/src/modulos/CodigoC";

Luego de esto lo inicializamos donde corresponda llamando a la función iniciar.

CodigoHtml.iniciar()
CodigoCss.iniciar()
CodigoJs.iniciar()

Interpolación

en proyectos SPA trabajamos con la interpolación de contenedo a través de la sintaxis de {{ contenido }} donde contenido es texto interpolado. Ahora bién en estos casos es necesario inicializar el módulo de html de la siguiente manera.

// Solo en proyectos SPA. Que utiliza interpolación
CodigoHtml.iniciar({tipo: "texto"})

Le añadimos el parámetro texto a la función de inicialización.

Utilización

Es bastante simple la utilización una vez que disponemos de todos los elementos inicializados de las formas antes descriptas.

Simplemente declaramos una etqueta de html pre y le agregamos la clase cod-html o cod-css o cod-js dependiendo del lenguaje a mostrar.

Ejemplo

<pre class="cod-html">
    <div>
        <h1>Esto es una muestra de código.</h1>
    </div>
</pre>

Las clases agregadas a la etiqueta pre sin cod-[lenguaje] => html js css java c.

Inicialización

Hasta el momento vimos como inicializar los módulos por defecto. Contamos desde la versión 1.1.0 la posibilidad de añadir la numeración a las lineas de código (por defecto aparacen) pero si queremos retirarlas los hacemos de la siguiente manera.

<script>
    // Con esto deshabilitamos números de linea de la parte izquierda.
    Show.ShowHtmlInit({lineas: false})
    Show.ShowCssInit({lineas: false})
    Show.ShowJsInit({lineas: false})
    Show.ShowCInit({lineas: false})
    Show.ShowJavaInit({lineas: false})
</script>