漂亮的印刷在HTML

Question

JSON字符串我有一個像{ "a": "1", "b": "2", "c": "3", "asefw": "Chintan" }一個字符串，我需要正確縮進它打印出來的HTML。

現在，我使用的組合谷歌代碼，美化（語法高亮）和紅寶石的JSON對象打印出來，但壓痕稍微偏離：

下面是有關代碼從我的Rails視圖：

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

它看起來像一切，但第一行縮進太多。任何想法如何解決這個問題？

Answer 1

此FAQ條目可能幫助....

http://haml.info/docs/yardoc/file.FAQ.html#q-preserve

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標記，用適當的類（即按鍵，數字，S trings，布爾型，空值都有自己的類）。壓痕取決於深淺分爲使用內嵌樣式屬性的對象樹設置。