pretty print json تحميل - pretty print json تنزيل كود المصدر

pretty print json

شفرة المصدر الأخرى

v3.0.3

تنزيل

جميلة طباعة json

قم بطباعة بيانات JSON بشكل جميل في HTML لوضع مسافة بادئة وتلوين

المصدر مكتوب بلغة TypeScript وظيفية، ويبلغ حجم Pretty-print-json.min.js (المصغر) 2.1 كيلوبايت.

لقطة الشاشة

أ) جربه

أداة تفاعلية عبر الإنترنت لتنسيق JSON:
https://pretty-print-json.js.org

ب) الإعداد

1. متصفح الويب

التحميل من jsdelivr.com CDN:

 <الرابط 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 كيلو بايت.

بالنسبة إلى الوضع المظلم ، استبدل 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(data, options?);

2. مثال

HTML:

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

جافا سكريبت:

قم بتمرير البيانات إلى prettyPrintJson.toHtml(data, options) وعرض النتائج.

 بيانات ثابتة = {
   نشط: صحيح،
   وضع:   '؟'،
   الرموز: [48348، 28923، 39080]،
   المدينة: "لندن"،
   };const elem = document.getElementById('account');elem.innerHTML = PrettyPrintJson.toHtml(data);

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

لقطة الشاشة

د) إعلانات TypeScript

راجع إعلانات TypeScript أعلى ملف Pretty-print-json.ts.

قم بتخصيص مخرجات الدالة prettyPrintJson.toHtml(data: unknown, options?: FormatOptions) باستخدام معلمة options .

معلمة options هي كائن FormatOptions :

 اكتب خيارات التنسيق = {
   المسافة البادئة؟: الرقم، // عدد المسافات البادئة
   أرقام الأسطر؟: منطقية، // التفاف HTML في علامة <ol> لدعم أرقام الأسطر
   linkUrls?: منطقي، // أنشئ علامات ربط لعناوين URL
   linksNewTab?: منطقي، // أضف إعداد السمة target=_blank إلى علامات الربط
   quoteKeys؟: منطقية، // دائمًا أسماء مفاتيح الاقتباس المزدوج
   TrailingCommas ؟: منطقي، // ألحق فاصلة بعد العنصر الأخير في المصفوفات والكائنات
   };

مثال لاستخدام TypeScript مع أنواع صريحة:

 استيراد { PrettyPrintJson، FormatOptions } من 'pretty-print-json'؛ بيانات const = {
   نشط: صحيح،
   وضع:   '؟'،
   الرموز: [48348، 28923، 39080]،
   المدينة: "لندن"،
   };خيارات const: FormatOptions = { linkUrls: true };const html: string = PrettyPrintJson.toHtml(data, options);

ه) بناء البيئة

راجع قسم runScriptsConfig في package.json للحصول على طريقة مثيرة للاهتمام لتنظيم مهام البناء.

أدوات بناء واجهة سطر الأوامر (CLI) لـ package.json

؟ add-dist-header: قم بإضافة تعليق بانر من سطر واحد (مع إشعار الترخيص) إلى ملفات التوزيع
؟ Copy-file-util: نسخ أو إعادة تسمية ملف برقم إصدار الحزمة الاختياري
Copy-folder-util: نسخ الملفات بشكل متكرر من مجلد إلى مجلد آخر
؟ Recursive-exec: قم بتشغيل أمر على كل ملف في مجلد ومجلداته الفرعية
؟ استبدال الاستخدام: البحث عن واستبدال السلاسل أو مخرجات القالب في الملفات النصية
؟ rev-web-assets: قم بمراجعة أسماء ملفات أصول الويب باستخدام بصمات تجزئة المحتوى التي تخرق ذاكرة التخزين المؤقت
؟ run-scripts-util: تنظيم البرامج النصية npm package.json في مجموعات من الأوامر سهلة الإدارة
؟ w3c-html-validator: تحقق من صحة ترميز ملفات HTML باستخدام مدقق W3C