readme.md

Colors Configurations

A todo color!!! 🎨

Sintaxis

prettyJson(myObject, myConfig, myColors);

Hay dos formas de configurar los colores de prettyJson, sobrescribiendo las clases CSS por defecto o pasando por tercer parámetro un objeto detallando cada color elegido.

✏️ Con archivo CSS

El script carga automáticamente los archivos css necesarios para su funcionamiento. Puede preparar su propia hoja de estilos sobrescribiendo las clases que se describen aquí abajo. Todas las clases usadas por prettyJson tienen el prefijo CM-, para evitar que entren en conflicto con otras hojas de estilo.

Colores y detalles de uso de las clases CSS

como color general de todo el código, aplicara a todo lo que no se halla establecido un color diferente. Afectara a signos de puntuacion como por ejemplo ,.:{}[], etc.

para el nombre de las propiedades del objeto a parsear, su valor por defecto es inherit, por lo que toma el color de su padre: CM-all.

background-color del bloque de código. prettyJson aplicará esta clase al elemento donde se coloca su retorno.

para los numeros de linea. Se debe establecer el uso de index del objeto de configuraciones.

para todos los tipo string, tanto como valor de un atributo como para valores en variables dentro de las funciones.

para valores numericos.

para valores booleanos.

para códigos HTTP. No tendrá efecto si no se establece api en el objeto de configuraciones.

para valores null.

para valores undefined. Solo surgira efecto si se establece el parseo de valores no permitidos.

para los operadores matematicos y lógicos en general, ejemplo <>=+/%&!?, etc.

para nombres de metodos, ya sean propios de javascript o creados por el usuario. Solo sera visible si se acepta el parseo de valores no permitidos.

para palabras reservadas de control de bloques y bucles, ejemplo for, while, try-catch, break, if-else, etc.

para palabras reservadas propias del lenguaje que no sean de control de bloques, ejemplo function, class, let, const, this, etc.

para los argumentos de las funciones.

para commentarios en el código. Solo afecta a los establecido dentro de funciones, no detecta comentarios multilinea (/*...*/), solo comentarios de una linea (//...), aun asi, si el comentario sobrepasa los 50 caracteres se le agregaran /* y */ al principio y final.

✏️ Con objeto (no recomendado)

Puede elegir un conjunto de colores distinto cada vez que utilice la función prettyJson y pasarlo como tercer parametro. Tenga en cuenta que al hacerlo de esta manera se estará estableciendo estilos inline, con sus respectivos pros y contras.

Ejemplo de objeto

let myColors={                // clases CSS que representan
      all: '#775392',         // CM-all
      string: '#721140',      // CM-txt
      number: '#f75db0',      // CM-num
      boolean: '#f75db0',     // CM-bool
      null: '#894723',        // CM-null
      undef: '#850382',       // CM-udf
      key: '#775392',         // CM-key
      x: '#738944',           // CM-x
      words: '#759267',       // CM-w
      words_ctrl: '#775235',  // CM-wc
      words_user: '#721140',  // CM-wu
      args: '#759267',        // CM-args
      index: '#123689',       // CM-index
      comment: '#478952',     // CM-comm
      back: '#180018'         // CM-back
  }

prettyJson(myObject, myConfig, myColors);

ℹ️ Para llevar a cabo cada estilo independiente, prettyJson utiliza expresiones regulares, por lo que existe una pequeña posibilidad de haber confusiones entre estilos en linea y palabras reservadas del lenguaje.
⚠️ Se ruega encarecidamente usar valores hexadecimales para minimizar coincidencias indeseadas con RegExp.
ℹ️ Se recomienda solo usar este método para el parseo de objetos JSON válidos.

---

Hecho con amor por CrystalMoon ❤️