pretty print json -Download - pretty print json -Quellcode herunterladen

pretty print json

Anderer Quellcode

v3.0.3

Herunterladen

Pretty-Print-JSON

Drucken Sie JSON-Daten hübsch in HTML aus, um sie einzurücken und einzufärben

Die Quelle ist in funktionalem TypeScript geschrieben und Pretty-print-json.min.js (minimiert) ist 2,1 KB groß.

Screenshot

A) Probieren Sie es aus

Interaktives Online-Tool zum Formatieren von JSON:
https://pretty-print-json.js.org

B) Einrichtung

1. Webbrowser

Vom jsdelivr.com-CDN laden:

 <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>

Die minimierte JS-Datei ist 2 KB groß.

Ersetzen Sie für den Dunkelmodus pretty-print-json.css durch pretty-print-json.dark-mode.css im <link> -Tag.

Oder verwenden Sie stattdessen pretty-print-json.prefers.css , um den Dunkelmodus basierend auf der CSS-Medienfunktion prefers-color-scheme automatisch zu erkennen.

2. Node.js-Server

Paket für Knoten installieren:

 $ npm install Pretty-print-json

Importieren Sie in Ihre Anwendung:

 import { PrettyPrintJson } aus 'pretty-print-json';

C) Nutzung

1. API

 const html = PrettyPrintJson.toHtml(data, options?);

2. Beispiel

HTML:

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

JavaScript:

Übergeben Sie Daten an prettyPrintJson.toHtml(data, options) und zeigen Sie die Ergebnisse an.

 const data = {
   aktiv: wahr,
   Modus: '?',
   Codes: [48348, 28923, 39080],
   Stadt: 'London',
   };const elem = document.getElementById('account');elem.innerHTML = PrettyPrintJson.toHtml(data);

3. Optionen

Name (Schlüssel)	Typ	Standard	Beschreibung
`indent`	ganze Zahl	`3`	Anzahl der Leerzeichen für die Einrückung.
`lineNumbers`	Boolescher Wert	`false`	Binden Sie HTML in ein `<ol>` -Tag ein, um Zeilennummern zu unterstützen. *
`linkUrls`	Boolescher Wert	`true`	Erstellen Sie Ankertags für URLs.
`linksNewTab`	Boolescher Wert	`true`	Fügen Sie den Anker-Tags eine Attributeinstellung `target=_blank` hinzu.
`quoteKeys`	Boolescher Wert	`false`	Schlüsselnamen immer in doppelte Anführungszeichen setzen.
`trailingCommas`	Boolescher Wert	`true`	Fügen Sie in Arrays und Objekten nach dem letzten Element ein Komma hinzu.

* Wenn Sie lineNumbers auf true setzen, verwenden Sie das Tag <pre> nicht als white-space: pre; Das Styling wird auf jede Zeile angewendet ( <li> ).

Screenshot

D) TypeScript-Deklarationen

Sehen Sie sich die TypeScript-Deklarationen oben in der Datei „pretty-print-json.ts“ an.

Passen Sie die Ausgabe der Funktion prettyPrintJson.toHtml(data: unknown, options?: FormatOptions) mithilfe des options an.

Der options ist ein FormatOptions Objekt:

 Typ FormatOptions = {
   indent?: Zahl, //Anzahl der Leerzeichen für die Einrückung
   lineNumbers?: boolean, // HTML in ein <ol>-Tag einschließen, um Zeilennummern zu unterstützen
   linkUrls?: boolean, //Anker-Tags für URLs erstellen
   linksNewTab?: boolean, //eine target=_blank-Attributeinstellung zu Ankertags hinzufügen
   quoteKeys?: boolean, //Schlüsselnamen immer in doppelte Anführungszeichen setzen
   TrailingCommas?: boolean, //ein Komma nach dem letzten Element in Arrays und Objekten anhängen
   };

Beispiel für die Verwendung von TypeScript mit expliziten Typen:

 import { PrettyPrintJson, FormatOptions } from 'pretty-print-json';const data = {
   aktiv: wahr,
   Modus: '?',
   Codes: [48348, 28923, 39080],
   Stadt: 'London',
   };const-Optionen: FormatOptions = { linkUrls: true };const html: string = PrettyPrintJson.toHtml(data, options);

E) Umgebung erstellen

Sehen Sie sich den Abschnitt runScriptsConfig in package.json an, um einen interessanten Ansatz zum Organisieren von Build-Aufgaben zu finden.

CLI-Build-Tools für package.json

? add-dist-header: Fügt den Distributionsdateien einen einzeiligen Bannerkommentar (mit Lizenzhinweis) voran
? copy-file-util: Kopieren oder benennen Sie eine Datei mit optionaler Paketversionsnummer um
copy-folder-util: Dateien rekursiv von einem Ordner in einen anderen Ordner kopieren
? recursive-exec: Führen Sie einen Befehl für jede Datei in einem Ordner und seinen Unterordnern aus
? replacer-util: Suchen und ersetzen Sie Zeichenfolgen oder Vorlagenausgaben in Textdateien
? rev-web-assets: Überarbeitung der Dateinamen von Web-Assets mit Cache-Busing-Inhalts-Hash-Fingerabdrücken
? run-scripts-util: Organisieren Sie npm package.json-Skripte in Gruppen einfach zu verwaltender Befehle
? w3c-html-validator: Überprüfen Sie die Markup-Gültigkeit von HTML-Dateien mit dem W3C-Validator