[英]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.