在HTML中漂亮地打印JSON字符串

Question

我有一个字符串，如下所示：{ "a": "1", "b": "2", "c": "3", "asefw": "Chintan" }。我需要对它进行正确的缩进以便在HTML中打印出来。

目前，我正在使用google-code-prettify（用于语法高亮）和Ruby的JSON对象将其打印出来，但是缩进略有偏差： 以下是我Rails视图中相关的代码：

.container
  .row.demo-samples
    .span9{:style => "\n-moz-border-radius: 8px 8px 6px 6px;\nborder-radius: 8px 8px 6px 6px;"}
      [e-mail] do |content|
        %pre
          %code.prettyprint
            =JSON.pretty_generate(JSON[content.content])

看起来除了第一行，其他都缩进太多了。有什么办法可以解决这个问题吗？

- chintanparikh

Answer 1

这个常见问题解答或许能帮到你... http://haml.info/docs/yardoc/file.FAQ.html#q-preserve

- Philip Hallstrom

---

完美，我从未意识到问题是由于 Haml 引起的。 - chintanparikh

Answer 2

我遇到了相同的问题，于是我写了这段小代码：

var pretty_json = function (ele, level, key) {
    var cls = [];
    if (key) {
        cls.push('pretty-json-key');
        ele = ele + ':';
    } else if (typeof ele === 'number') {
        cls.push('pretty-json-number');
    } else if (typeof ele === 'boolean' && ele) {
        cls.push('pretty-json-true');
    } else if (typeof ele === 'boolean' && !ele) {
        cls.push('pretty-json-false');
    } else if (typeof ele === 'string') {
        cls.push('pretty-json-string');
    } else {
        cls.push('pretty-json-null');
        ele = '<i class="fa fa-ban"></i>';
    }

    var output = '<span ';
    if (key) output += 'style="margin-left:' + (INDENT * level) + 'px" ';
    output += ('class="' + cls.join(' ') + '">' + ele + '</span>');
    console.log(output);
    return output;
};

var eachRecursive = function (obj, level, s) {
    for (var k in obj) {
        if (!obj.hasOwnProperty(k)) continue;
        if (typeof obj[k] == "object" && obj[k] !== null) {
            s.push(pretty_json(k, level, true));
            s.push("<br>");
            eachRecursive(obj[k], level + 1, s);
        } else {
            s.push(pretty_json(k, level, true));
            s.push(pretty_json(obj[k], level));
            s.push("<br>");
        }
    }
};

var make_pretty_json = function (json_str) {
    var json_obj = JSON.parse(json_str);
    var output = [];
    eachRecursive(json_obj, 1, output);
    return output.join('');
};

http://jsfiddle.net/qwwqwwq/kefn7/37/

基本策略是递归遍历对象，并将每个键和值替换为一个带有适当类 (即，键、数字、字符串、布尔值、空值都有自己的类) 的HTML标签。缩进根据使用内联样式属性深度设置在对象树中。

- qwwqwwq