ดาวน์โหลด pretty print json - ดาวน์โหลดซอร์สโค้ด pretty print json

pretty print json

ซอร์สโค้ดอื่น ๆ

v3.0.3

ดาวน์โหลด

สวยพิมพ์-json

พิมพ์ข้อมูล JSON ลงใน HTML เพื่อเยื้องและใส่สี

แหล่งที่มาเขียนด้วย TypeScript ที่ใช้งานได้และ Pretty-print-json.min.js (ย่อเล็กสุด) คือ 2.1 KB

ภาพหน้าจอ

ก) ลองเลย

เครื่องมือออนไลน์แบบโต้ตอบเพื่อจัดรูปแบบ JSON:
https://pretty-print-json.js.org

ข) การตั้งค่า

1. เว็บเบราว์เซอร์

โหลดจาก jsdelivr.com CDN:

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

ไฟล์ JS ที่ย่อขนาดคือ 2 KB

สำหรับ โหมดมืด ให้แทนที่ pretty-print-json.css ด้วย pretty-print-json.dark-mode.css ในแท็ก <link>

หรือหากต้องการตรวจจับ โหมดมืด โดยอัตโนมัติตามฟีเจอร์สื่อ CSS prefers-color-scheme ให้ใช้ pretty-print-json.prefers.css แทน

2. เซิร์ฟเวอร์ Node.js

ติดตั้งแพ็คเกจสำหรับโหนด:

 $ npm ติดตั้ง Pretty-print-json

นำเข้าสู่แอปพลิเคชันของคุณ:

 นำเข้า { PrettyPrintJson } จาก 'pretty-print-json';

ค) การใช้งาน

1. เอพีไอ

 const html = PrettyPrintJson.toHtml (ข้อมูล, ตัวเลือก?);

2. ตัวอย่าง

HTML:

 <pre id=คลาสบัญชี=json-container></pre>

จาวาสคริปต์:

ส่งข้อมูลไปที่ prettyPrintJson.toHtml(data, options) และแสดงผลลัพธ์

 ข้อมูล const = {
   ใช้งานอยู่: จริง,
   โหมด:   '?',
   รหัส: [48348, 28923, 39080],
   เมือง: 'ลอนดอน',
   };const elem = document.getElementById('account');elem.innerHTML = PrettyPrintJson.toHtml(ข้อมูล);

3. ตัวเลือก

ชื่อ (กุญแจ)	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
`indent`	จำนวนเต็ม	`3`	จำนวนช่องว่างสำหรับการเยื้อง
`lineNumbers`	บูลีน	`false`	ล้อม HTML ในแท็ก `<ol>` เพื่อรองรับหมายเลขบรรทัด -
`linkUrls`	บูลีน	`true`	สร้างแท็กจุดยึดสำหรับ URL
`linksNewTab`	บูลีน	`true`	เพิ่มการตั้งค่าแอตทริบิวต์ `target=_blank` ให้กับแท็กจุดยึด
`quoteKeys`	บูลีน	`false`	ชื่อคีย์เครื่องหมายคำพูดคู่เสมอ
`trailingCommas`	บูลีน	`true`	เติมเครื่องหมายจุลภาคต่อท้ายรายการสุดท้ายในอาร์เรย์และวัตถุ

* เมื่อตั้ง lineNumbers เป็น true อย่าใช้แท็ก <pre> เป็น white-space: pre; ใช้สไตล์กับแต่ละบรรทัด ( <li> )

ภาพหน้าจอ

D) การประกาศ TypeScript

ดูการประกาศ TypeScript ที่ด้านบนของไฟล์ Pretty-print-json.ts

ปรับแต่งเอาต์พุตของฟังก์ชัน prettyPrintJson.toHtml(data: unknown, options?: FormatOptions) โดยใช้พารามิเตอร์ options

พารามิเตอร์ options คือวัตถุ FormatOptions :

 พิมพ์ FormatOptions = {
   เยื้อง?: หมายเลข // จำนวนช่องว่างสำหรับการเยื้อง
   lineNumbers?: boolean, //ตัด HTML ในแท็ก <ol> เพื่อรองรับหมายเลขบรรทัด
   linkUrls?: บูลีน // สร้างแท็กจุดยึดสำหรับ URL
   linksNewTab?: บูลีน //เพิ่มการตั้งค่าแอตทริบิวต์ target=_blank ให้กับแท็กจุดยึด
   quoteKeys?: บูลีน // ใส่ชื่อคีย์เครื่องหมายคำพูดคู่เสมอ
   trailingCommas?: boolean, // เติมลูกน้ำต่อท้ายรายการสุดท้ายในอาร์เรย์และอ็อบเจ็กต์
   -

ตัวอย่างการใช้งาน TypeScript ที่มีประเภทที่ชัดเจน:

 นำเข้า { PrettyPrintJson, FormatOptions } จาก 'pretty-print-json';const data = {
   ใช้งานอยู่: จริง,
   โหมด:   '?',
   รหัส: [48348, 28923, 39080],
   เมือง: 'ลอนดอน',
   };ตัวเลือก const: FormatOptions = { linkUrls: true };const html: string = PrettyPrintJson.toHtml(data, options);

E) สร้างสิ่งแวดล้อม

ลองดูส่วน runScriptsConfig ใน package.json เพื่อดูแนวทางที่น่าสนใจในการจัดระเบียบงานบิลด์

เครื่องมือสร้าง CLI สำหรับ package.json

- add-dist-header: เพิ่มความคิดเห็นแบนเนอร์หนึ่งบรรทัด (พร้อมประกาศใบอนุญาต) ต่อไฟล์การแจกจ่าย
- copy-file-util: คัดลอกหรือเปลี่ยนชื่อไฟล์ด้วยหมายเลขเวอร์ชันแพ็คเกจเพิ่มเติม
copy-folder-util: คัดลอกไฟล์จากโฟลเดอร์หนึ่งไปยังอีกโฟลเดอร์หนึ่งซ้ำ ๆ
- recursive-exec: เรียกใช้คำสั่งในแต่ละไฟล์ในโฟลเดอร์และโฟลเดอร์ย่อย
- replacementr-util: ค้นหาและแทนที่สตริงหรือเอาต์พุตเทมเพลตในไฟล์ข้อความ
- rev-web-assets: แก้ไขชื่อไฟล์สินทรัพย์เว็บด้วยลายนิ้วมือแฮชเนื้อหาที่ป้องกันแคช
- run-scripts-util: จัดระเบียบสคริปต์ npm package.json ให้เป็นกลุ่มคำสั่งที่จัดการได้ง่าย
- w3c-html-validator: ตรวจสอบความถูกต้องของมาร์กอัปของไฟล์ HTML โดยใช้เครื่องมือตรวจสอบ W3C