Загрузить pretty print json - Скачать Исходный код pretty print json

pretty print json

Другой исходный код

v3.0.3

Скачать

довольно-print-json

Красиво распечатайте данные JSON в HTML, чтобы сделать отступы и раскрасить их.

Исходный код написан на функциональном TypeScript, а размер Pretty-print-json.min.js (миниатюрный) составляет 2,1 КБ.

Скриншот

А) Попробуйте

Интерактивный онлайн-инструмент для форматирования JSON:
https://pretty-print-json.js.org

Б) Настройка

1. Веб-браузер

Загрузите из 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>

Минимизированный файл 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. API

 const html = PrettyPrintJson.toHtml(данные, параметры?);

2. Пример

HTML:

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

JavaScript:

Передайте данные в 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> ).

Скриншот

D) Объявления TypeScript

См. объявления TypeScript в верхней части файла Pretty-print-json.ts.

Настройте вывод функции prettyPrintJson.toHtml(data: unknown, options?: FormatOptions) используя параметр options .

Параметр options представляет собой объект FormatOptions :

 введите FormatOptions = {
   отступ?: число, //количество пробелов для отступа
   lineNumbers?: boolean, //заключаем HTML в тег <ol> для поддержки номеров строк
   linkUrls?: boolean, //создаем теги привязки для URL-адресов
   linkNewTab?: boolean, //добавим настройку атрибута target=_blank к тегам привязки
   quoteKeys?: boolean, //всегда имена ключей в двойных кавычках
   TrailingCommas?: boolean, // добавляем запятую после последнего элемента в массивах и объектах
   };

Пример использования TypeScript с явными типами:

 импортировать { PrettyPrintJson, FormatOptions } из 'pretty-print-json';const data = {
   активный: правда,
   режим:   '?',
   коды: [48348, 28923, 39080],
   город: 'Лондон',
   }; параметры const: FormatOptions = { linkUrls: true }; const html: string = PrettyPrintJson.toHtml (данные, параметры);

Д) Среда создания

Ознакомьтесь с разделом runScriptsConfig в package.json, где представлен интересный подход к организации задач сборки.

Инструменты сборки CLI для package.json

? add-dist-header: добавить однострочный комментарий к баннеру (с уведомлением о лицензии) к файлам распространения.
? copy-file-util: скопировать или переименовать файл с дополнительным номером версии пакета.
copy-folder-util: рекурсивно копировать файлы из одной папки в другую папку.
? recursive-exec: запустить команду для каждого файла в папке и ее подпапках.
? replacer-util: поиск и замена строк или выходных данных шаблона в текстовых файлах.
? rev-web-assets: изменить имена файлов веб-ресурсов с помощью хеш-отпечатков содержимого, разрушающих кэш.
? run-scripts-util: организация сценариев npm package.json в группы простых в управлении команд.
? w3c-html-validator: проверьте правильность разметки HTML-файлов с помощью валидатора W3C.