將 JSON 資料漂亮地列印到 HTML 中以進行縮排和著色
原始碼是用函數式 TypeScript 編寫的, pretty-print-json.min.js (縮小後)為 2.1 KB。
用於格式化 JSON 的互動式線上工具:
https://pretty-print-json.js.org
從 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
。
為節點安裝包:
$ npm 安裝 Pretty-print-json
匯入到您的應用程式中:
從'pretty-print-json'導入{prettyPrintJson};
const html = PrettyPrintJson.toHtml(數據,選項?);
<pre id=account class=json-container></pre>
將資料傳遞到prettyPrintJson.toHtml(data, options)
並顯示結果。
常量資料 = { 主動:真實, 模式: '? 代碼:[48348、28923、39080]、 城市:“倫敦”, };const elem = document.getElementById('account');elem.innerHTML = PrettyPrintJson.toHtml(data);
名稱(鍵) | 類型 | 預設 | 描述 |
---|---|---|---|
indent | 整數 | 3 | 縮排的空格數。 |
lineNumbers | 布林值 | false | 將 HTML 包裹在<ol> 標記中以支援行號。 * |
linkUrls | 布林值 | true | 為 URL 建立錨標記。 |
linksNewTab | 布林值 | true | 將target=_blank 屬性設定新增至錨標記。 |
quoteKeys | 布林值 | false | 始終用雙引號鍵名稱。 |
trailingCommas | 布林值 | true | 在陣列和物件中的最後一項後面加上逗號。 |
*當將lineNumbers
設為true
時,請勿使用<pre>
標籤作為white-space: pre;
樣式套用於每行 ( <li>
)。
請參閱 Pretty-print-json.ts 檔案頂部的 TypeScript 聲明。
使用options
參數自訂函數prettyPrintJson.toHtml(data: unknown, options?: FormatOptions)
的輸出。
options
參數是一個FormatOptions
物件:
類型格式選項 = { indent?: number, //縮排的空格數 lineNumbers?: boolean, //將 HTML 包裹在 <ol> 標籤中以支援行號 linkUrls?: boolean, //為 URL 建立錨標記 linksNewTab?: boolean, //為錨標籤新增 target=_blank 屬性設定 quoteKeys?: boolean, //總是雙引號鍵名稱 TrailingCommas?: boolean, //在陣列和物件的最後一項後面加上一個逗號 };
顯式類型的 TypeScript 用法範例:
從 'pretty-print-json' 導入 { PrettyPrintJson, FormatOptions };const data = { 主動:真實, 模式: '? 代碼:[48348、28923、39080]、 城市:“倫敦”, };const options: FormatOptions = { linkUrls: true };const html: string = PrettyPrintJson.toHtml(data, options);
請參閱 package.json 中的runScriptsConfig
部分,以了解組織建置任務的有趣方法。
package.json 的 CLI 建置工具
? add-dist-header:在分發文件前新增一行橫幅註解(附有許可證通知)
? copy-file-util:使用可選的套件版本號複製或重新命名文件
copy-folder-util:將檔案從一個資料夾遞歸複製到另一個資料夾
? recursive-exec:對資料夾及其子資料夾中的每個檔案執行命令
? Replacer-util:尋找並取代文字檔案中的字串或範本輸出
? rev-web-assets:使用快取清除內容雜湊指紋修訂 Web 資產檔名
? run-scripts-util:將 npm package.json 腳本組織成易於管理的命令群組
? w3c-html-validator:使用 W3C 驗證器檢查 HTML 檔案的標記有效性
若要查看一些範例 HTML 結果,請執行npm install
、 npm test
,然後執行node spec/examples.js
。
請隨時透過以下方式提交問題:
github.com/center-key/pretty-print-json/issues
麻省理工學院許可證|部落格文章