如何保留 HTML 中包含的文本的空白缩进不包括 当前缩进级别的标签文档中的标签?
当前缩进级别的标签文档中的标签?
我正在尝试在网站上显示我的代码,但在正确保留空格缩进方面遇到问题。
例如,给出以下代码片段:
<html>
<body>
Here is my code:
<pre>
def some_funtion
return 'Hello, World!'
end
</pre>
<body>
</html>
这在浏览器中显示为:
Here is my code:
def some_funtion
return 'Hello, World!'
end
当我希望它显示为:
Here is my code:
def some_funtion
return 'Hello, World!'
end
区别在于 HTML 预标记的当前缩进级别被添加到代码的缩进中。我使用 nanoc 作为静态网站生成器,并且使用 google prettify 来添加语法突出显示。
有人可以提供任何建议吗?
I'm trying to display my code on a website but I'm having problems preserving the whitespace indentation correctly.
For instance given the following snippet:
<html>
<body>
Here is my code:
<pre>
def some_funtion
return 'Hello, World!'
end
</pre>
<body>
</html>
This is displayed in the browser as:
Here is my code:
def some_funtion
return 'Hello, World!'
end
When I would like it displayed as:
Here is my code:
def some_funtion
return 'Hello, World!'
end
The difference is that that current indentation level of the HTML pre tag is being added to the indentation of the code. I'm using nanoc as a static website generator and I'm using google prettify to also add syntax highlighting.
Can anyone offer any suggestions?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(11)
缩进注释
由于浏览器会忽略注释,因此您可以使用它们来缩进
pre
标记内容。解决方案
注意:添加了一个主包装器,以便为注释提供足够的空间。
优点
缺点
节点删除缩进
更好的解决方案是使用构建过程或后端渲染过程删除前导空白。如果您使用的是 Node.js,那么您可以使用我编写的名为 predentation 的流。您可以使用任何您想要的语言来构建类似的工具。
Before
After
优点
pre
标签缺点
white-space: pre 的非
由 CSS 添加pre
元素使用 JavaScript 删除缩进
查看此答案以使用 JavaScript 删除缩进
优点
缺点
Indenting With Comments
Since browsers ignore comments, you can use them to indent your
pre
tag contents.Solution
NOTE: a main wrapper was added to provide enough space for the comments.
Advantages
Disadvantages
Removing Indentation With Node
A better solution is to remove the leading white-space using either your build process or back-end rendering process. If you are using node.js, then you can use a stream I wrote called predentation. You can use any language you want to build a similar tool.
Before
After
Advantages
pre
tagsDisadvantages
pre
elements withwhite-space: pre
added by CSSRemoving Indentation With JavaScript
See this answer to remove indentation with JavaScript
Advantages
white-space: pre
Disadvantages
PRE
旨在准确地保留空白(除非被 CSS 中的white-space
更改,因为 CSS 没有足够的灵活性来支持格式化代码)。Before
格式被保留,但
PRE
标记之外的所有缩进也被保留。如果能够以标签的位置作为起点来保留空白,那就太好了。之后
内容的格式仍与声明的一样,但由以下原因引起的无关前导空格文档中
PRE
标记的位置被删除。我想出了以下插件来解决想要删除由缩进引起的多余空格的问题文档大纲的内容。此代码使用 PRE 标记内的第一行来确定纯粹由于文档缩进而缩进了多少。
此代码适用于 IE7、IE8、IE9、Firefox 和 Chrome。我已经使用 Prettify 库对其进行了简要测试,以将保留的格式与漂亮的内容结合起来印刷。确保
PRE
中的第一行实际上代表您要忽略的缩进基线级别(或者,您可以修改插件以使其更加智能)。这是粗略的代码。如果您发现错误或者它没有按照您想要的方式工作,请修复/评论;不要只是投反对票。我编写此代码是为了解决我遇到的问题,并且我正在积极使用它,因此我希望它尽可能可靠!
然后可以使用标准 jQuery 选择器应用该插件:
PRE
is intended to preserve whitespace exactly as it appears (unless altered bywhite-space
in CSS, which doesn't have enough flexibility to support formatting code).Before
Formatting is preserved, but so is all the indentation outside of the
PRE
tag. It would be nice to have whitespace preservation that used the location of the tag as a starting point.After
Contents are still formatted as declared, but the extraneous leading whitespace caused by the position of the
PRE
tag within the document is removed.I have come up with the following plugin to solve the issue of wanting to remove superfluous whitespace caused by the indentation of the document outline. This code uses the first line inside the PRE tag to determine how much it has been indented purely due to the indentation of the document.
This code works in IE7, IE8, IE9, Firefox, and Chrome. I have tested it briefly with the Prettify library to combine the preserved formatting with pretty printing. Make sure that the first line inside the
PRE
actually represents the baseline level of indenting that you want to ignore (or, you can modify the plugin to be more intelligent).This is rough code. If you find a mistake or it does not work the way you want, please fix/comment; don't just downvote. I wrote this code to fix a problem that I was having and I am actively using it so I would like it to be as solid as possible!
This plugin can then be applied using a standard jQuery selector:
设法用 JavaScript 来做到这一点。它适用于 Internet Explorer 9 和 Chrome 15,我尚未测试旧版本。添加对
outerHTML
的支持后,它应该可以在 Firefox 11 中运行(请参阅 此处),同时网络上有一些自定义实现。读者的一个练习是去掉尾随缩进(直到我腾出时间完成它并更新这个答案)。我还将其标记为社区 wiki,以便于编辑。
请注意,您必须重新格式化示例以使用制表符作为缩进,或更改正则表达式以使用空格。
Managed to do this with JavaScript. It works in Internet Explorer 9 and Chrome 15, I haven't tested older versions. It should work in Firefox 11 when support for
outerHTML
is added (see here), meanwhile there are some custom implementations available on the web. An excercise for the reader is to get rid of trailing indentation (until I make time to finish it and update this answer).I'll also mark this as community wiki for easy editing.
Please note that you'll have to reformat the example to use tabs as indentation, or change the regex to work with spaces.
这可以通过四行 JavaScript 完成:
This can be done in four lines of JavaScript:
如果您同意更改元素的
innerHTML
:给定:
呈现为:
以下普通 JS:
将导致:
并将呈现为:
If you're okay with changing the
innerHTML
of the element:Given:
Which renders as:
The following vanilla JS:
Will result in:
And will render as:
我还发现,如果您使用 haml,则可以使用
preserve
方法。例如:这将保留生成的
yield
中的空白,它通常是包含代码块的 markdown。I also found that if you're using haml you can use the
preserve
method. For example:This will preserve the whitespace in the produced
yield
which is usually markdown containing the code blocks.我决定提出一些比改变
pre
或code
工作方式更具体的方法。所以我做了一些正则表达式来获取第一个换行符\n
(前面可能有空格 -\s*
用于清除一行末尾的额外空格代码和换行符之前(我注意到你有))并找到其后面的制表符或空白字符[\t\s]*
(这意味着制表符,空白字符(0个或更多)并将该值设置为一个变量,然后在正则表达式替换函数中使用该变量来查找它的所有实例,并将其替换为\n
(换行符)。 pattern 被设置)没有全局标志(正则表达式后面的g
),它将找到\n
换行符的第一个实例,并且将pattern
变量设置为该值,因此在换行符后跟 2 个制表符的情况下,pattern
的值在技术上将为\n\t。 \t
,它将在pre code
元素中找到每个\n
字符(因为它在每个函数中运行)时被替换,并替换为 <代码>\nI decided to come up with something more concrete than changing the way
pre
orcode
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 (wherepattern
gets set) doesn't have the global flag (ag
after the regex), it will find the first instance of the\n
newline character and set thepattern
variable to that value. So in the case of a newline, followed by 2 tab characters, the value ofpattern
will technically be\n\t\t
, which will be replaced where every\n
character is found in thatpre code
element (since it's running through the each function) and replaced with\n
这很麻烦,但如果代码折叠对您很重要,那么它会起作用:
在 css 中,
在 vim 中,正常编写代码然后执行:
for every line 就可以了。
This is cumbersome, but it works if code folding is important to you:
In your css,
In vim, writing your code normally and then executing:
for each line would work.
如果您在如下代码块上使用它:
您可以使用这样的 css 来抵消前面的大量空白。
If you are using this on a code block like:
You can just use css like this to offset that large amount of white space in the front.
pre 标签保留您在正文中写入时使用的所有空格。通常,如果您不使用 pre,它会正常显示文本...(HTML 将使浏览器忽略那些空格)这里尝试一下,我使用了段落标签。
输出:-
这是我的代码:
def some_function
结束
<html>
<body>
Here is my code:
<p>
def some_function<br>
<pre> return 'Hello, World!'<br></pre>
end
</p>
</body>
</html>
The pre tag preserves all the white spaces you have used while writing in the body. Where as normally if you do not use pre it will display the text normally...(HTML will make the browser to neglect those white spaces) Here try this I have used the paragraph tag.
Output:-
Here is my code:
def some_function
end
<html>
<body>
Here is my code:
<p>
def some_function<br>
<pre> return 'Hello, World!'<br></pre>
end
</p>
</body>
</html>