pretty print jsonダウンロード - pretty print jsonソースコードのダウンロード

pretty print json

その他のソースコード

v3.0.3

ダウンロード

プリティプリントjson

JSON データを HTML に整形してインデントし色付けする

ソースは関数型 TypeScript で書かれており、 pretty-print-json.min.js (縮小版) は 2.1 KB です。

スクリーンショット

A) 試してみる

JSON をフォーマットするための対話型オンラインツール:
https://pretty-print-json.js.org

B) セットアップ

1. Webブラウザ

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 です。

ダークモードの場合は、 <link>タグ内のpretty-print-json.cssをpretty-print-json.dark-mode.cssに置き換えます。

または、 prefers-color-scheme CSS メディア機能に基づいてダークモードを自動的に検知するには、代わりにpretty-print-json.prefers.cssを使用します。

2.Node.jsサーバー

ノードのパッケージをインストールします。

 $ npm install pretty-print-json

アプリケーションにインポートします。

 'pretty-print-json' から { prettyPrintJson } をインポートします。

C) 用途

1. API

 const html = prettyPrintJson.toHtml(データ、オプション?);

2. 例

HTML:

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

JavaScript:

データをprettyPrintJson.toHtml(data, options)に渡し、結果を表示します。

定数データ = {
   アクティブ: true、
   モード: '?'、
   コード: [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オブジェクトです。

 type FormatOptions = {
   indent?:number, //インデントのスペースの数
   lineNumbers?: boolean, //行番号をサポートするには、HTML を <ol> タグで囲みます
   linkUrls?: boolean, //URLのアンカータグを作成します
   linksNewTab?: boolean, //target=_blank 属性設定をアンカー タグに追加します
   quoteKeys?: boolean, //キー名は常に二重引用符で囲まれます
   trailingCommas?: boolean, //配列およびオブジェクトの最後の項目の後にカンマを追加します
   };

明示的な型を使用した TypeScript の使用例:

 import { prettyPrintJson, FormatOptions } from 'pretty-print-json';const data = {
   アクティブ: true、
   モード: '?'、
   コード: [48348、28923、39080]、
   都市: 「ロンドン」、
   };const オプション: FormatOptions = { linkUrls: true };const html: string = prettyPrintJson.toHtml(data, options);