pretty print json Télécharger - pretty print json Téléchargement du code source

pretty print json

Autre code source

v3.0.3

Télécharger

joli-print-json

Imprimez joliment les données JSON en HTML pour indenter et coloriser

La source est écrite en TypeScript fonctionnel et Pretty-print-json.min.js (minifié) fait 2,1 Ko.

Capture d'écran

A) Essayez-le

Outil interactif en ligne pour formater JSON :
https://pretty-print-json.js.org

B) Configuration

1. Navigateur Internet

Charger depuis le CDN 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>

Le fichier JS minifié fait 2 Ko.

Pour le mode sombre , remplacez pretty-print-json.css par pretty-print-json.dark-mode.css dans la balise <link> .

Ou pour détecter automatiquement le mode sombre en fonction de la fonctionnalité multimédia CSS prefers-color-scheme , utilisez plutôt pretty-print-json.prefers.css .

2. Serveur Node.js

Package d'installation pour le nœud :

 $ npm installer joli-print-json

Importez dans votre application :

 importer { PrettyPrintJson } depuis 'pretty-print-json' ;

C) Utilisation

1. API

 const html = PrettyPrintJson.toHtml(données, options ?);

2. Exemple

HTML :

 <pre id=account class=json-container></pre>

Javascript :

Transmettez les données dans prettyPrintJson.toHtml(data, options) et affichez les résultats.

 données const = {
   actif : vrai,
   mode : '?',
   codes : [48348, 28923, 39080],
   ville : « Londres »,
   };const elem = document.getElementById('account');elem.innerHTML = PrettyPrintJson.toHtml(data);

3.Options

Nom (clé)	Taper	Défaut	Description
`indent`	entier	`3`	Nombre d'espaces pour l'indentation.
`lineNumbers`	booléen	`false`	Enveloppez le HTML dans une balise `<ol>` pour prendre en charge les numéros de ligne. *
`linkUrls`	booléen	`true`	Créez des balises d'ancrage pour les URL.
`linksNewTab`	booléen	`true`	Ajoutez un paramètre d'attribut `target=_blank` aux balises d'ancrage.
`quoteKeys`	booléen	`false`	Toujours guillemets les noms de clés.
`trailingCommas`	booléen	`true`	Ajoutez une virgule après le dernier élément des tableaux et des objets.

* Lorsque vous définissez lineNumbers sur true , n'utilisez pas la balise <pre> comme white-space: pre; le style est appliqué à chaque ligne ( <li> ).

Capture d'écran

D) Déclarations TypeScript

Consultez les déclarations TypeScript en haut du fichier Pretty-print-json.ts.

Personnalisez la sortie de la fonction prettyPrintJson.toHtml(data: unknown, options?: FormatOptions) à l'aide du paramètre options .

Le paramètre options est un objet FormatOptions :

 tapez OptionsFormat = {
   indentation ? : nombre, //nombre d'espaces pour l'indentation
   lineNumbers? : booléen, //envelopper le HTML dans une balise <ol> pour prendre en charge les numéros de ligne
   linkUrls? : booléen, //créer des balises d'ancrage pour les URL
   linksNewTab ? : booléen, //ajoute un paramètre d'attribut target=_blank aux balises d'ancrage
   quoteKeys? : booléen, //toujours les noms de clés entre guillemets
   trailingCommas? : booléen, //ajoute une virgule après le dernier élément des tableaux et des objets
   } ;

Exemple d'utilisation de TypeScript avec des types explicites :

 importer { PrettyPrintJson, FormatOptions } depuis 'pretty-print-json'; const data = {
   actif : vrai,
   mode : '?',
   codes : [48348, 28923, 39080],
   ville : « Londres »,
   };const options : FormatOptions = { linkUrls : true };const html : string = PrettyPrintJson.toHtml(data, options);

E) Environnement de construction

Consultez la section runScriptsConfig dans package.json pour une approche intéressante de l'organisation des tâches de construction.

Outils de construction CLI pour package.json

? add-dist-header : ajoutez un commentaire de bannière d'une ligne (avec avis de licence) aux fichiers de distribution
? copy-file-util : copiez ou renommez un fichier avec le numéro de version du package facultatif
copy-folder-util : copier récursivement des fichiers d'un dossier à un autre dossier
? recursive-exec : Exécuter une commande sur chaque fichier d'un dossier et de ses sous-dossiers
? replacer-util : rechercher et remplacer des chaînes ou des sorties de modèles dans des fichiers texte
? rev-web-assets : Révision des noms de fichiers des ressources Web avec les empreintes digitales de hachage du contenu de contournement du cache
? run-scripts-util : Organisez les scripts npm package.json en groupes de commandes faciles à gérer
? w3c-html-validator : Vérifiez la validité du balisage des fichiers HTML à l'aide du validateur W3C