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. 网页浏览器

从 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 安装 Pretty-print-json

导入到您的应用程序中：

从'pretty-print-json'导入{prettyPrintJson}；

C) 用途

1. 接口

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 声明

请参阅 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);