[jQuery] highlight.js - 동적 json 표현

앞서 highlight.js에 대해 설명했다. 

이것을 이용하여 json을 prettify하여 표현하려고 한다.

정적인 경우, <pre> 태그나 <code> 태그에 class를 입력하면 되지만, 지금 설명하려는 작업은 ajax 등 이미 html이 loading 된 이후 추가하려는 경우이다.

ajax를 통해 json 형식의 데이터를 가지고 왔을 때 가독성이 떨어지는 단점이 있다.

그래서 이 데이터를 가공하여 html에 추가해야한다. 

우선 json 형식의 데이터를 stringify한다. 이 때 마지막에 들어가는 value(integer)는 tab 길이이다. 주로, 4나 8을 이용한다. 

stringify한 데이터를 highlightAuto에 넣고, 마지막으로 fixMarkUp하면 json이 이쁘게 출력되는 것을 볼 수 있다.

var stringify = JSON.stringify(data, undefined, 4); var prettify = hljs.highlightAuto(stringify).value; prettify = hljs.fixMarkup(prettify);