Librería para resaltar el código fuente en páginas web.
En esta versión se incorparan los lenguajes c, java.
Los lenguajes incluidos son html, js, css, java, c.
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.
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.
Luego debemos agregar el CDN del archivos sintax.js encima de la etiqueta de cierre del </body> en
nuestro documento html.
<!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/FedericoManzano/show-code/a5e13aa03697269a68b185b555034f8476fa6a22/dist/css/tema-claro.min.css">
<!-- Tema oscuro -->
<link rel="stylesheet" href="https://rawcdn.githack.com/FedericoManzano/show-code/a5e13aa03697269a68b185b555034f8476fa6a22/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://rawcdn.githack.com/FedericoManzano/show-code/a5e13aa03697269a68b185b555034f8476fa6a22/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.
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
Podemos disponer de la librería a través de los gestores de paquetes de NodeJs a través de los siguientes comandos.
npm i show-sintaxyarn add show-sintaxCuando 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()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.
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.
<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.
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>