pretty print json Download - pretty print json Download do código-fonte

pretty print json

Outro código-fonte

v3.0.3

Baixar

impressão bonita-json

Imprima dados JSON em HTML para recuar e colorir

A fonte está escrita em TypeScript funcional e pretty-print-json.min.js (minificado) tem 2,1 KB.

Captura de tela

A) Experimente

Ferramenta online interativa para formatar JSON:
https://pretty-print-json.js.org

B) Configuração

1. Navegador

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

O arquivo JS reduzido tem 2 KB.

Para modo escuro , substitua pretty-print-json.css por pretty-print-json.dark-mode.css na tag <link> .

Ou para detectar automaticamente o modo escuro com base no recurso de mídia CSS prefers-color-scheme , use pretty-print-json.prefers.css .

2. Servidor Node.js.

Instale o pacote para o nó:

 $ npm instalar bonito-print-json

Importe para seu aplicativo:

 importar {prettyPrintJson} de 'pretty-print-json';

C) Uso

1. API

 const html = prettyPrintJson.toHtml(dados, opções?);

2. Exemplo

HTML:

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

JavaScript:

Passe os dados para prettyPrintJson.toHtml(data, options) e exiba os resultados.

 dados constantes = {
   ativo: verdadeiro,
   modo:   '?',
   códigos: [48348, 28923, 39080],
   cidade: 'Londres',
   };const elem = document.getElementById('conta');elem.innerHTML = prettyPrintJson.toHtml(dados);

3. Opções

Nome (chave)	Tipo	Padrão	Descrição
`indent`	inteiro	`3`	Número de espaços para recuo.
`lineNumbers`	booleano	`false`	Envolva o HTML em uma tag `<ol>` para suportar números de linha. *
`linkUrls`	booleano	`true`	Crie tags âncora para URLs.
`linksNewTab`	booleano	`true`	Adicione uma configuração de atributo `target=_blank` às tags âncora.
`quoteKeys`	booleano	`false`	Sempre coloque aspas duplas nos nomes das chaves.
`trailingCommas`	booleano	`true`	Acrescente uma vírgula após o último item em matrizes e objetos.

* Ao definir lineNumbers como true , não use a tag <pre> como white-space: pre; o estilo é aplicado a cada linha ( <li> ).

Captura de tela

D) Declarações TypeScript

Veja as declarações TypeScript na parte superior do arquivo pretty-print-json.ts.

Personalize a saída da função prettyPrintJson.toHtml(data: unknown, options?: FormatOptions) usando o parâmetro options .

O parâmetro options é um objeto FormatOptions :

 tipo FormatOptions = {
   recuo?: número, //número de espaços para recuo
   lineNumbers?: boolean, //envolve HTML em uma tag <ol> para suportar números de linha
   linkUrls?: boolean, //cria tags âncora para URLs
   linksNewTab?: boolean, //adiciona uma configuração de atributo target=_blank às tags âncora
   quoteKeys?: boolean, //sempre aspas duplas nos nomes das chaves
   trailingCommas?: boolean, //acrescenta uma vírgula após o último item em arrays e objetos
   };

Exemplo de uso de TypeScript com tipos explícitos:

 importar {prettyPrintJson, FormatOptions} de 'pretty-print-json';const data = {
   ativo: verdadeiro,
   modo:   '?',
   códigos: [48348, 28923, 39080],
   cidade: 'Londres',
   };opções const: FormatOptions = { linkUrls: true };const html: string = prettyPrintJson.toHtml(dados, opções);

E) Construir Ambiente

Confira a seção runScriptsConfig em package.json para uma abordagem interessante para organizar tarefas de construção.

Ferramentas de construção CLI para package.json

? add-dist-header: Anexe um comentário de banner de uma linha (com aviso de licença) aos arquivos de distribuição
? copy-file-util: Copie ou renomeie um arquivo com número de versão do pacote opcional
copy-folder-util: Copia recursivamente arquivos de uma pasta para outra pasta
? recursive-exec: executa um comando em cada arquivo em uma pasta e suas subpastas
? replacer-util: Encontre e substitua strings ou saídas de modelo em arquivos de texto
? rev-web-assets: Revisão de nomes de arquivos de ativos da web com impressões digitais de hash de conteúdo que impedem o cache
? run-scripts-util: Organize scripts npm package.json em grupos de comandos fáceis de gerenciar
? w3c-html-validator: Verifique a validade da marcação de arquivos HTML usando o validador W3C