json-beautiful-render

中文 | English

支持两个功能：

• 将json数据美化成html，在原生javascript或react、vue等框架中使用。

• 将json数据格式化，加入换行符、缩进符等，方便阅读。

安装

NPM

npm add json-beautiful-render

UMD

<script src="//cdn.jsdelivr.net/npm/json-beautiful-render/lib/umd/index.js"></script>

umd模式暴露了全局变量jsonRender、jsonRenderNoStyle。

使用

• 基础使用

import jsonRender from 'json-beautiful-render';

const dom = jsonRender(document.querySelector('#container'), {
    name: 'hello world',
});

• 定制渲染的颜色

import jsonRender from 'json-beautiful-render';

jsonRender(
    document.querySelector('#container'),
    {
        name: 'hello world',
    },
    {
        valueColor: 'green',
    },
);

• 将json数据格式化，加入换行符、缩进符等，方便阅读。

import { jsonRenderNoStyle } from 'json-beautiful-render';

const result = jsonRenderNoStyle(document.querySelector('#your_textarea'), { name: 'hello world' });
console.log(result);

API

jsonRender

(el, json, options) => HTMLElement

美化渲染，如果el是HTMLElement，则将渲染结果挂载到el上。

参数	说明	类型	默认值
el	挂载的容器	HTMLElement | null | undefined	-
json	JSON数据	Object	-
options	配置	Options	-

Options

配置项

参数	说明	类型	默认值
activeBgColor	项目激活时，整行区域的背景色	string	-
activeHighLightColor	项目激活时，文字区域的背景色	string	-
levelHighLightColor	项目激活时，该项目所有父级键名的颜色	string	-
labelColor	键名的文本颜色	string	-
valueColor	键值的文本颜色	string	-
valueColors	不同变量类型的文本颜色	ValueColors	-
expand	允许展开和收缩功能	boolean	true
showItemsLength	显示子元素的长度，collapse表示收缩时显示，always表示始终显示，其他值则不显示	'collapse' | 'always' | false	'collapse'

ValueColors

不同变量类型的文本颜色

参数	说明	类型	默认值
string	字符串	string	-
number	数值	string	-
specialness	特殊值，如boolean、null	string	-

jsonRenderNoStyle

(el, json, options) => string

无样式的格式化渲染，如果el是HTMLElement，则将渲染结果挂载到el容器上。

参数	说明	类型	默认值
el	挂载的容器	HTMLElement | null | undefined	-
json	JSON数据	Object	-
options	配置	Options	-

Options

配置项

参数	说明	类型	默认值
indent	缩进字符	string	-

FAQ

渲染哪些类型的值？

支持渲染标准的json值如"123"、123，其余则渲染其类型如Date、Function等。

值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。详情见>>