这是我的模板文件：
{% extends '::base.html.twig' %}
{% block title %}Quote Metadata{% endblock %}
{% block css_js %}
<link href="{{ asset('bundles/acmequotes/css/bootstrap.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
{% block body %}
<div class="metadata">
<script>
var obj = {{ data|raw }};
document.write(JSON.stringify(obj, null, 4));
</script>
</div>
{% endblock %}
和base.html.twig：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block css_js %}{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>
这是在我的CSS：
.metadata {
white-space: pre-wrap;
}
这是我从浏览器中看到页面代码时得到的html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Quote Metadata</title>
<link href="/my-quotes/web/bundles/acmequotes/css/bootstrap.css" type="text/css" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="/my-quotes/web/favicon.ico" />
</head>
<body>
<div class="metadata">
<script>
var obj = {"hello":"world", "Test":["hello"]};
document.write(JSON.stringify(obj, null, 4));
</script>
</div>
</body>
</html>
这是输出：http://s18.postimage.org/ebcuii3i1/hello.jpg
我要更改的是第一个显示在左上角的
" { "，不是原样-有点向下，有点在右侧。有什么建议么？
最佳答案
为什么要使用document.write？您将在标签和缩进中引入多余的空白字符。
<div id="output" class="metadata"></div>
<script>
var obj = {"hello":"world", "Test":["hello"]};
document.getElementById("output").innerHTML = JSON.stringify(obj, null, 4);
</script>
另外，为什么不使用pre？
埃里克