any method to auto format the extra json?

[LeiYangGH]

trafficstars

it would be nice if the extra json

1. can be auto formated(such as using browser plugin)
2. keywords are highlighted

but currently

1. cannot, because it is opened as offline file on local file system, so won't be auto formated(at least by my browser plugin in test).
2. this is currently ok. but to walkaround issue1, i have to convert it to formatted extra text, so no highlights any more.

[BeyondEvil]

Any suggestions on how to solve 1.? @LeiYangGH

[RonnyPfannschmidt]

Is there any react components that makes json fun to view /pretty view?

[BeyondEvil]

I have basically zero experience with React, so wouldn't know where to begin.

[LeiYangGH]

Can https://github.com/leezng/vue-json-pretty be integrated with pytest-html? i'm using this browser plugin https://chrome.google.com/webstore/detail/jsonvue/chklaanhfefbnpoihckbnefhakgolnmc and looks good enough. Does pytest html restrict react js? i'm not fluent js developer.

[BeyondEvil]

Currently, pytest-html is pure javascript (no frameworks like React or Vue).

I'm happy to review a PR that provides the wanted functionality as long as it doesn't require a heavy framework.

[harmin-parra]

Found in https://reqbin.com/code/javascript/ounkkzpp/javascript-pretty-print-json-example

const str = '{"outcome" : "success", "result" : {"name" : "messaging-sockets", "default-interface" : "external", "include" : [], "socket-binding" : {"messaging" : {"name" : "messaging", "interface" : null, "port" : 5445, "fixed-port" : null, "multicast-address" : null, "multicast-port" : null}, "messaging-throughput" : {"name" : "messaging-throughput", "interface" : null, "port" : 5455, "fixed-port" : null, "multicast-address" : null, "multicast-port" : null}}}, "compensating-operation" : null}';

const obj = JSON.parse(str);

console.log(JSON.stringify(obj, null, 2));