unduh pretty print json - unduh kode sumber pretty print json

pretty print json

Kode sumber lainnya

v3.0.3

Unduh

cantik-cetak-json

Cetak cantik data JSON ke dalam HTML untuk membuat indentasi dan warna

Sumber ditulis dalam TypeScript fungsional, dan Pretty-print-json.min.js (diperkecil) berukuran 2,1 KB.

Tangkapan layar

A) Cobalah

Alat online interaktif untuk memformat JSON:
https://pretty-print-json.js.org

B) Pengaturan

1. peramban web

Muat dari CDN jsdelivr.com:

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

File JS yang diperkecil berukuran 2 KB.

Untuk mode gelap , ganti pretty-print-json.css dengan pretty-print-json.dark-mode.css di tag <link> .

Atau untuk secara otomatis merasakan mode gelap berdasarkan fitur media CSS prefers-color-scheme , gunakan pretty-print-json.prefers.css sebagai gantinya.

2. Server Node.js

Instal paket untuk node:

 $ npm instal cantik-print-json

Impor ke aplikasi Anda:

 impor { PrettyPrintJson } dari 'pretty-print-json';

C) Penggunaan

1.API

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

2. Contoh

HTML:

 <pre id=kelas akun=json-container></pre>

JavaScript:

Masukkan data ke dalam prettyPrintJson.toHtml(data, options) dan tampilkan hasilnya.

 data konstan = {
   aktif: benar,
   modus: '?',
   kode: [48348, 28923, 39080],
   kota: 'London',
   };const elem = document.getElementById('account');elem.innerHTML = PrettyPrintJson.toHtml(data);

3. Pilihan

Nama (kunci)	Jenis	Bawaan	Keterangan
`indent`	bilangan bulat	`3`	Jumlah ruang untuk lekukan.
`lineNumbers`	boolean	`false`	Bungkus HTML dalam tag `<ol>` untuk mendukung nomor baris. *
`linkUrls`	boolean	`true`	Buat tag jangkar untuk URL.
`linksNewTab`	boolean	`true`	Tambahkan pengaturan atribut `target=_blank` ke tag jangkar.
`quoteKeys`	boolean	`false`	Selalu kutip ganda nama kunci.
`trailingCommas`	boolean	`true`	Tambahkan koma setelah item terakhir dalam array dan objek.

* Saat menyetel lineNumbers ke true , jangan gunakan tag <pre> sebagai white-space: pre; gaya diterapkan ke setiap baris ( <li> ).

Tangkapan layar

D) Deklarasi TypeScript

Lihat deklarasi TypeScript di bagian atas file Pretty-print-json.ts.

Sesuaikan keluaran fungsi prettyPrintJson.toHtml(data: unknown, options?: FormatOptions) menggunakan parameter options .

Parameter options adalah objek FormatOptions :

 ketik FormatOpsi = {
   indent?: nomor, //jumlah spasi untuk indentasi
   lineNumbers?: boolean, //bungkus HTML dalam tag <ol> untuk mendukung nomor baris
   linkUrls?: boolean, //membuat tag jangkar untuk URL
   linksNewTab?: boolean, //tambahkan pengaturan atribut target=_blank ke tag jangkar
   quoteKeys?: boolean, //selalu kutip ganda nama kunci
   trailingCommas?: boolean, //menambahkan koma setelah item terakhir dalam array dan objek
   };

Contoh penggunaan TypeScript dengan tipe eksplisit:

 import { PrettyPrintJson, FormatOptions } dari 'pretty-print-json';const data = {
   aktif: benar,
   modus: '?',
   kode: [48348, 28923, 39080],
   kota: 'London',
   };opsi const: FormatOptions = { linkUrls: true };const html: string = PrettyPrintJson.toHtml(data, opsi);

E) Membangun Lingkungan

Lihat bagian runScriptsConfig di package.json untuk mengetahui pendekatan menarik dalam mengatur tugas pembangunan.

Alat Pembuatan CLI untuk package.json

? add-dist-header: Tambahkan komentar banner satu baris (dengan pemberitahuan lisensi) ke file distribusi
? copy-file-util: Menyalin atau mengganti nama file dengan nomor versi paket opsional
copy-folder-util: Menyalin file secara rekursif dari satu folder ke folder lain
? recursive-exec: Jalankan perintah pada setiap file dalam folder dan subfoldernya
? replacer-util: Temukan dan ganti string atau keluaran templat dalam file teks
? rev-web-assets: Revisi nama file aset web dengan sidik jari hash konten penghilang cache
? run-scripts-util: Atur skrip npm package.json ke dalam kelompok perintah yang mudah dikelola
? w3c-html-validator: Periksa validitas markup file HTML menggunakan validator W3C