pretty print json 다운로드 - pretty print json 소스 코드 다운로드

pretty print json

기타 소스코드

v3.0.3

다운로드

예쁜 인쇄-json

들여쓰기 및 색상화를 위해 JSON 데이터를 HTML로 예쁘게 인쇄합니다.

소스는 기능성 TypeScript로 작성되었으며, Pretty-print-json.min.js (최소화)는 2.1KB입니다.

스크린샷

A) 한번 시도해 보세요

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 파일은 2KB입니다.

다크 모드 의 경우 <link> 태그에서 pretty-print-json.css pretty-print-json.dark-mode.css 로 바꾸세요.

또는 prefers-color-scheme CSS 미디어 기능을 기반으로 다크 모드를 자동으로 감지하려면 대신 pretty-print-json.prefers.css 사용하세요.

2. Node.js 서버

노드용 패키지 설치:

 $ npm은 Pretty-print-json을 설치합니다.

애플리케이션으로 가져오기:

 import { PrettyPrintJson } from 'pretty-print-json';

다) 용도

1. API

 const html = PrettyPrintJson.toHtml(데이터, 옵션?);

2. 예시

HTML:

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

자바스크립트:

prettyPrintJson.toHtml(data, options) 에 데이터를 전달하고 결과를 표시합니다.

 const 데이터 = {
   활성: 사실,
   모드: '?',
   코드: [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 선언

Pretty-print-json.ts 파일 상단에 있는 TypeScript 선언을 참조하세요.

options 매개변수를 사용하여 prettyPrintJson.toHtml(data: unknown, options?: FormatOptions) 함수의 출력을 사용자 정의합니다.

options 매개변수는 FormatOptions 객체입니다.

 형식 옵션 = {
   indent?: 숫자, //들여쓰기할 공백 수
   lineNumbers?: 부울, //줄 번호를 지원하기 위해 <ol> 태그에 HTML을 래핑합니다.
   linkUrls?: 부울, //URL용 앵커 태그 생성
   linkNewTab?: 부울, //앵커 태그에 target=_blank 속성 설정 추가
   quoteKeys?: 부울, //항상 큰따옴표 키 이름
   trailingCommas?: 부울, //배열 및 객체의 마지막 항목 뒤에 쉼표를 추가합니다.
   };

명시적 유형을 사용한 TypeScript 사용 예:

 import { PrettyPrintJson, FormatOptions } from 'pretty-print-json';const 데이터 = {
   활성: 사실,
   모드: '?',
   코드: [48348, 28923, 39080],
   도시: '런던',
   };const 옵션: FormatOptions = { linkUrls: true };const html: string = PrettyPrintJson.toHtml(data, options);