如何删除我的< pre> /< code>中的前导空格阻止而不删除我的HTML中的缩进？ [英] How can I remove leading whitespace in my <pre>/<code> block without removing indentation in my HTML?
问题描述
我有以下HTML：
< body&
下面是一些代码：
< pre>< code>
这里是一些有趣的代码！
< / code>< / pre>
< / body>
但是当我预览它，因为代码缩进，pre是全部。我可以解决这个问题，把内容带回缩进，但看起来很傻。
在这里，我决定拿出更具体的东西改变 pre 或代码的工作方式。所以我做了一些正则表达式获得第一个换行字符 \\\（前面有可能的空格 -
\s * 用于清除一行代码结束处之前和换行符之前（我注意到你的）的额外空格，并在其后找到标签或空白字符 [\t\s ] * （这意味着tab字符，空格字符（0或更多）并将该值设置为一个变量，然后在正则表达式替换函数中使用该变量来查找它的所有实例， \ n （换行符）由于第二行（ pattern 设置）没有全局标志（正则表达式后面的 g ），它会找到 \\\换行符的第一个实例，
pattern pattern pattern 将技术上 \\\替换，其中每个
\t\t \\\字符发现在
pre code 元素（因为它运行通过每个函数）并替换为 \\\
$（pre code）。each（function（）{var html = $（this）.html var pattern = html.match（/ \s * \\\
[\t\s] * /）; $（this）.html（html.replace（new RegExp（pattern，g），'\\\
'））;}）;
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min。 js>< / script>< body>这里是一些代码：< pre>< code>这里是一些有趣的代码！更多代码一个标签一个其他标签两个标签和一个额外的换行符在< / code>< / pre>之前< / body> / div>
I have the following HTML:
<body>
Here is some code:
<pre><code>
Here is some fun code!
</code></pre>
</body>
But when I preview it, because the code is indented, the pre is all out of whack. I can fix that by bringing the contents back against the indent, but it looks silly. Can I make that above text look non-indented?
Here you go, I decided to come up with something more concrete than changing the way pre or code work. So I made some regex to get the first newline character \n (preceded with possible whitespace - the \s* is used to cleanup extra whitespace at the end of a line of code and before the newline character (which I noticed yours had)) and find the tab or whitespace characters following it [\t\s]* (which means tab character, whitespace character (0 or more) and set that value to a variable. That variable is then used in the regex replace function to find all instances of it and replace it with \n (newline). Since the second line (where pattern gets set) doesn't have the global flag (a g after the regex), it will find the first instance of the \n newline character and set the pattern variable to that value. So in the case of a newline, followed by 2 tab characters, the value of pattern will technically be \n\t\t, which will be replaced where every \n character is found in that pre code element (since it's running through the each function) and replaced with \n
$("pre code").each(function(){
var html = $(this).html();
var pattern = html.match(/\s*\n[\t\s]*/);
$(this).html(html.replace(new RegExp(pattern, "g"),'\n'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
Here is some code:
<pre><code>
Here is some fun code!
More code
One tab
One more tab
Two tabs and an extra newline character precede me
</code></pre>
</body>
这篇关于如何删除我的< pre> /< code>中的前导空格阻止而不删除我的HTML中的缩进？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
