Descargar pretty print json - Descarga del código fuente de pretty print json

pretty print json

Otro código fuente

v3.0.3

Descargar

bonita-impresión-json

Imprima datos JSON en HTML para sangrar y colorear

La fuente está escrita en TypeScript funcional y Pretty-print-json.min.js (minimizado) pesa 2,1 KB.

Captura de pantalla

A) Pruébelo

Herramienta interactiva en línea para formatear JSON:
https://pretty-print-json.js.org

B) Configuración

1. Navegador web

Cargar desde la CDN de jsdelivr.com:

 <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/[email protected]/dist/css/pretty-print-json.css>...<script src=https:// cdn.jsdelivr.net/npm/[email protected]/dist/pretty-print-json.min.js></script>

El archivo JS minimizado es de 2 KB.

Para el modo oscuro , reemplace pretty-print-json.css con pretty-print-json.dark-mode.css en la etiqueta <link> .

O para detectar automáticamente el modo oscuro según la función multimedia CSS prefers-color-scheme , utilice en su lugar pretty-print-json.prefers.css .

2. Servidor Node.js

Instalar paquete para el nodo:

 $ npm instala Pretty-print-json

Importe a su aplicación:

 importar {prettyPrintJson} desde 'pretty-print-json';

C) Uso

1.API

 const html = PrettyPrintJson.toHtml(datos, opciones?);

2. Ejemplo

HTML:

 <pre id=clase de cuenta=json-container></pre>

JavaScript:

Pase datos a prettyPrintJson.toHtml(data, options) y muestre los resultados.

 datos constantes = {
   activo: verdadero,
   modo:   '?',
   códigos: [48348, 28923, 39080],
   ciudad: 'Londres',
   };const elem = document.getElementById('cuenta');elem.innerHTML = PrettyPrintJson.toHtml(datos);

3. Opciones

Nombre (clave)	Tipo	Por defecto	Descripción
`indent`	entero	`3`	Número de espacios para sangría.
`lineNumbers`	booleano	`false`	Envuelva HTML en una etiqueta `<ol>` para admitir números de línea. *
`linkUrls`	booleano	`true`	Cree etiquetas de anclaje para URL.
`linksNewTab`	booleano	`true`	Agregue una configuración de atributo `target=_blank` a las etiquetas de anclaje.
`quoteKeys`	booleano	`false`	Siempre comillas dos veces los nombres de las claves.
`trailingCommas`	booleano	`true`	Agregue una coma después del último elemento en matrices y objetos.

* Al configurar lineNumbers en true , no utilice la etiqueta <pre> como white-space: pre; El estilo se aplica a cada línea ( <li> ).

Captura de pantalla

D) Declaraciones mecanografiadas

Consulte las declaraciones de TypeScript en la parte superior del archivo Pretty-print-json.ts.

Personalice la salida de la función prettyPrintJson.toHtml(data: unknown, options?: FormatOptions) usando el parámetro options .

El parámetro options es un objeto FormatOptions :

 tipo Opciones de formato = {
   ¿sangría?: número, //número de espacios para sangría
   lineNumbers?: booleano, //envuelve HTML en una etiqueta <ol> para admitir números de línea
   linkUrls?: booleano, //crear etiquetas de anclaje para URL
   linksNewTab?: booleano, //agrega una configuración de atributo target=_blank para anclar etiquetas
   quoteKeys?: booleano, //siempre los nombres de las claves con comillas dobles
   trailingCommas?: booleano, //agrega una coma después del último elemento en matrices y objetos
   };

Ejemplo de uso de TypeScript con tipos explícitos:

 importar {prettyPrintJson, FormatOptions} desde 'pretty-print-json'; datos constantes = {
   activo: verdadero,
   modo:   '?',
   códigos: [48348, 28923, 39080],
   ciudad: 'Londres',
   };opciones constantes: FormatOptions = { linkUrls: true };const html: cadena = PrettyPrintJson.toHtml(datos, opciones);

E) Entorno de construcción

Consulte la sección runScriptsConfig en package.json para obtener un enfoque interesante para organizar las tareas de compilación.

Herramientas de compilación CLI para package.json

? add-dist-header: anteponga un comentario de banner de una línea (con aviso de licencia) a los archivos de distribución.
? copy-file-util: copia o cambia el nombre de un archivo con el número de versión del paquete opcional
copy-folder-util: copia archivos de forma recursiva de una carpeta a otra carpeta
? recursive-exec: ejecuta un comando en cada archivo de una carpeta y sus subcarpetas
? replacer-util: busque y reemplace cadenas o resultados de plantillas en archivos de texto
? rev-web-assets: Revisión de nombres de archivos de recursos web con huellas dactilares de hash de contenido que eliminan la caché
? run-scripts-util: organiza los scripts npm package.json en grupos de comandos fáciles de administrar
? w3c-html-validator: verifique la validez del marcado de archivos HTML utilizando el validador W3C