[英]Removing leading whitespace from indented HTML source in pre/code tags
我目前在预代码块中有以下html:
<pre class="prettyprint"><code>
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".</p>
</body>
</html>
</code></pre>
它在html源代码中缩进,以便在文档中获得更好的结构。 如何删除前导空格? 通过使用javascript还是有一个更简单的方法。
我真的很喜欢Homam的想法,但我不得不改变它来处理这个问题:
<pre><code><!-- There's nothing on this line, so the script thinks the indentation is zero -->
foo = bar
</code></pre>
要解决这个问题,如果它是空的,我只需取出第一行:
[].forEach.call(document.querySelectorAll('code'), function($code) {
var lines = $code.textContent.split('\n');
if (lines[0] === '')
{
lines.shift()
}
var matches;
var indentation = (matches = /^[\s\t]+/.exec(lines[0])) !== null ? matches[0] : null;
if (!!indentation) {
lines = lines.map(function(line) {
line = line.replace(indentation, '')
return line.replace(/\t/g, ' ')
});
$code.textContent = lines.join('\n').trim();
}
});
(我也在处理<code>
标签而不是<pre>
标签。)
您可能只想更改输出方式,但使用JavaScript非常简单
var p = document.querySelector(".prettyprint");
p.textContent = p.textContent.replace(/^\s+/mg, "");
扩展上面的解决方案,这段代码假设<pre>
内第一行的缩进为0,它根据第一行重新排列所有行:
[].forEach.call(document.querySelectorAll('pre'), function($pre) {
var lines = $pre.textContent.split('\n');
var matches;
var indentation = (matches = /^\s+/.exec(lines[0])) != null ? matches[0] : null;
if (!!indentation) {
lines = lines.map(function(line) {
return line.replace(indentation, '');
});
return $pre.textContent = lines.join('\n').trim();
}
});
当您使用pre
,您应该将其内容格式化为您想要呈现的内容。 这就是pre
(预先格式化的文本)的想法。 但如果它只是缩进,你可以使用CSS: margin-left
和一个合适的负值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.