Fatal编程技术网
  • html/
  • 如何删除我的<；中的前导空格；预处理>/&书信电报；代码>；块而不删除HTML中的缩进？

如何删除我的<；中的前导空格；预处理>/&书信电报；代码>；块而不删除HTML中的缩进？

html css

如何删除我的<；中的前导空格；预处理>/&书信电报；代码>；块而不删除HTML中的缩进？,html,css,pre,Html,Css,Pre,我有以下HTML： <body> Here is some code: <pre><code> Here is some fun code! </code></pre> </body> 但是当我预览它时，因为代码缩进了，pre就完全不正常了。我可以通过将内容放回缩进来解决这个问题，但这看起来很愚蠢。我可以让上面的文字看起来不缩进吗？您可以尝试以下方法： 假设缩进应基于第一

我有以下HTML：

<body>
    Here is some code:

    <pre><code>
        Here is some fun code!    
    </code></pre>
</body>
但是当我预览它时，因为代码缩进了，pre就完全不正常了。我可以通过将内容放回缩进来解决这个问题，但这看起来很愚蠢。我可以让上面的文字看起来不缩进吗？

您可以尝试以下方法：

假设缩进应基于第一行代码，则此操作有效：

//获取代码元素：
var代码=document.querySelector（'pre-code'）；
//在第一个字母前面插入一个跨距。（跨度将自动关闭。）
code.innerHTML=code.textContent.replace（/（\w）/，“$1”）；
//获取新跨距的左偏移：
var left=code.querySelector（'span'）。getClientRects（）[0]。left；
//将代码向左移动，同时考虑主体的边距：
code.style.marginLeft=（-left+code.getClientRects（）[0]。left）+'px'

code{
display:block；//这是JavaScript正常工作所必需的
}



下面是一些代码：

pre, code{
    white-space:normal;
}



好了，我决定想出一些比改变
前期工作方式或
编码工作方式更具体的办法。因此，我制作了一些正则表达式来获取第一个换行符
\n
（前面有可能的空格-
\s*
用于清除一行代码末尾和换行符（我注意到您的换行符）之前的多余空格），并找到它后面的制表符或空格字符
[\t\s]*
（这意味着制表符、空格字符（0或更多）并将该值设置为一个变量。然后在regex replace函数中使用该变量来查找它的所有实例，并将其替换为
\n
（换行符）。由于第二行（其中
模式
已设置）没有全局标志（regex后面的
g
），它将找到
\n
换行符的第一个实例，并将
模式
变量设置为该值。因此，对于换行符，后跟2个制表符的情况，
模式
的值从技术上讲是
\n\t\t
，在
中找到每个
\n
字符时，将替换该值>预编码
元素（因为它正在每个函数中运行）并替换为
\n



$（“预编码”）。每个（函数（）{
var html=$（this.html（）；
var pattern=html.match（/\s*\n[\t\s]*/）；
$（this.html（html.replace（新的RegExp（模式，“g”），'\n'））；
})；



下面是一些代码：

pre, code{
    white-space:normal;
}



这就是你想要的吗？@ZakariaAcharki如果我正确地阅读了这个问题，这就是我们想要的视觉效果，但不必移除标记中的缩进。发生的事情有点像
pre
标记的作用……这个问题有点不清楚。你能更具体一点吗？你可以添加
pre{margin left:-55px；}
来修正它的位置。优点：要添加的代码最少。缺点：这是一个旁路，在每个特定情况下都需要更改。我喜欢Paul Roub上面提到的
方式。两者都不需要任何JS代码。我投了赞成票，因为它可以工作。将
的空白设置为正常，但
的空白设置为白色-空格应该是
pre
。它对我很有效！
空白：正常；
删除所有空格。我不得不使用
空白：pre-line；
，因为这样从一开始就只删除了空格。效果非常好，如果某人需要，我已经编写了一个没有jQuery的ES6版本