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.
区别在于HTML pre标记的当前缩进级别被添加到代码的缩进中。我正在使用nanoc作为静态网站生成器，我使用谷歌美化也添加语法高亮。
Can anyone offer any suggestions?
有人可以提供任何建议吗？
10 个解决方案
#1
22
PRE is intended to preserve whitespace exactly as it appears (unless altered by white-space in CSS, which doesn't have enough flexibility to support formatting code).
PRE旨在保留与显示的完全相同的空白（除非由CSS中的空格改变，因为它没有足够的灵活性来支持格式化代码）。
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.
保留格式，但PRE标记之外的所有缩进都是如此。使用标签位置作为起点的空白保留会很好。
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.
内容仍然按声明的格式进行格式化，但删除了由文档中PRE标记的位置引起的无关的前导空格。
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.
我想出了以下插件来解决想要删除文档大纲缩进造成的多余空白的问题。此代码使用PRE标记内的第一行来确定它纯粹由于文档的缩进而缩进了多少。
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).
此代码适用于IE7，IE8，IE9，Firefox和Chrome。我已经使用Prettify库对它进行了简单测试，将保留的格式与漂亮的打印相结合。确保PRE中的第一行实际上代表您要忽略的缩进的基线级别（或者，您可以修改插件以使其更加智能）。
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!
这是粗略的代码。如果您发现错误或无法正常工作，请修改/评论;不只是downvote。我写了这段代码来修复我遇到的问题，并且我正在积极地使用它，所以我希望它尽可能地坚固！
/*!
*** prettyPre ***/
(function( $ ) {
$.fn.prettyPre = function( method ) {
var defaults = {
ignoreExpression: /\s/ // what should be ignored?
};
var methods = {
init: function( options ) {
this.each( function() {
var context = $.extend( {}, defaults, options );
var $obj = $( this );
var usingInnerText = true;
var text = $obj.get( 0 ).innerText;
// some browsers support innerText...some don't...some ONLY work with innerText.
if ( typeof text == "undefined" ) {
text = $obj.html();
usingInnerText = false;
}
// use the first line as a baseline for how many unwanted leading whitespace characters are present
var superfluousSpaceCount = 0;
var currentChar = text.substring( 0, 1 );
while ( context.ignoreExpression.test( currentChar ) ) {
currentChar = text.substring( ++superfluousSpaceCount, superfluousSpaceCount + 1 );
}
// split
var parts = text.split( "\n" );
var reformattedText = "";
// reconstruct
var length = parts.length;
for ( var i = 0; i < length; i++ ) {
// cleanup, and don't append a trailing newline if we are on the last line
reformattedText += parts[i].substring( superfluousSpaceCount ) + ( i == length - 1 ? "" : "\n" );
}
// modify original
if ( usingInnerText ) {
$obj.get( 0 ).innerText = reformattedText;
}
else {
// This does not appear to execute code in any browser but the onus is on the developer to not
// put raw input from a user anywhere on a page, even if it doesn't execute!
$obj.html( reformattedText );
}
} );
}
}
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ) );
}
else if ( typeof method === "object" || !method ) {
return methods.init.apply( this, arguments );
}
else {
$.error( "Method " + method + " does not exist on jQuery.prettyPre." );
}
}
} )( jQuery );
This plugin can then be applied using a standard jQuery selector:
然后可以使用标准jQuery选择器应用此插件：
<script>
$( function() { $("PRE").prettyPre(); } );
</script>
#2
12
Indenting With Comments
Since browsers ignore comments, you can use them to indent your pre tag contents.
由于浏览器会忽略注释，因此您可以使用它们来缩进预标记内容。
Solution
<html>
<body>
<main>
Here is my code with hack:
<pre>
<!-- -->def some_function
<!-- --> return 'Hello, World!'
<!-- -->end
</pre>
Here is my code without hack:
<pre>
def some_function
return 'Hello, World!'
end
</pre>
</main>
<body>
</html>NOTE: a main wrapper was added to provide enough space for the comments.
注意：添加了一个主包装器，以便为注释提供足够的空间。
Advantages
- No JavaScript required
- 无需JavaScript
- Can be added statically
- 可以静态添加
- Minification won't affect the indentation and reduces file size
- 缩小不会影响缩进并减小文件大小
Disadvantages
- Requires a minimum amount of space for the comments
- 要求评论的最小空间
- Not very elegant unless build tools are used
- 除非使用构建工具，否则不是很优雅
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.
更好的解决方案是使用构建过程或后端渲染过程删除前导空白区域。如果您使用的是node.js，那么您可以使用我编写的名为predentation的流。您可以使用任何您想要构建类似工具的语言。
Before
之前
<html>
<body>
Here is my code:
<pre>
def some_function
return 'Hello, World!'
end
</pre>
</body>
</html>
After
后
<html>
<body>
Here is my code:
<pre>
def some_function
return 'Hello, World!'
end
</pre>
</body>
</html>
Advantages
- Seamless way to write
pretags - 无缝的方式来编写预标签
- Smaller output file size
- 较小的输出文件大小
Disadvantages
- Requires a build step in your workflow
- 需要在工作流程中构建步骤
- Does not handle non
preelements withwhite-space: preadded by CSS - 不处理带有空格的非pre元素：由CSS预先添加
Removing Indentation With JavaScript
See this answer to remove indentation with JavaScript
请参阅此答案以使用JavaScript删除缩进
Advantages
- Possible to target elements with
white-space: pre - 可以使用空格来定位元素：pre
Disadvantages
- JavaScript can be disabled
- 可以禁用JavaScript
- White-space adds to the file size
- 空格会增加文件大小
#3
5
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).
使用JavaScript进行管理。它适用于Internet Explorer 9和Chrome 15，我还没有测试旧版本。当添加对outerHTML的支持时（参见此处），它应该在Firefox 11中工作，同时在Web上有一些自定义实现。读者的练习是摆脱尾随缩进（直到我花时间完成它并更新这个答案）。
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.
请注意，您必须重新格式化示例以使用制表符作为缩进，或更改正则表达式以使用空格。
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<pre>
<html>
<head>
<title>Hello World Example</title>
</head>
<body>
Hello, World!
</body>
</html>
</pre>
<pre>
class HelloWorld
{
public static int Main(String[] args)
{
Console.WriteLine(&quot;Hello, World!&quot;);
return 0;
}
}
</pre>
<script language="javascript">
var pre_elements = document.getElementsByTagName('pre');
for (var i = 0; i < pre_elements.length; i++)
{
var content = pre_elements[i].innerHTML;
var tabs_to_remove = '';
while (content.indexOf('\t') == '0')
{
tabs_to_remove += '\t';
content = content.substring(1);
}
var re = new RegExp('\n' + tabs_to_remove, 'g');
content = content.replace(re, '\n');
pre_elements[i].outerHTML = '<pre>' + content + '</pre>';
}
</script>
</body>
</html>
#4
2
This can be done in four lines of JavaScript:
这可以通过四行JavaScript完成：
var pre= document.querySelector('pre');
//insert a span in front of the first letter. (the span will automatically close.)
pre.innerHTML= pre.textContent.replace(/(\w)/, '<span>$1');
//get the new span's left offset:
var left= pre.querySelector('span').getClientRects()[0].left;
//move the code to the left, taking into account the body's margin:
pre.style.marginLeft= (-left + pre.getClientRects()[0].left)+'px'; <body>
Here is my code:
<pre>
def some_funtion
return 'Hello, World!'
end
</pre>
<body>#5
2
<script>
$("pre[name='pre']").each(function () {
var html = $(this).html()
var blankLen = (html.split('\n')[0].match(/^\s+/)[0]).length
$(this).html($.trim(html.replace(eval("/^ {" + blankLen + "}/gm"), "")))
})
</script><div>
<pre name="pre">
1
2
3
</pre>
</div>#6
1
I also found that if you're using haml you can use the preserve method. For example:
我还发现，如果你使用haml，你可以使用preserve方法。例如：
preserve yield
This will preserve the whitespace in the produced yield which is usually markdown containing the code blocks.
这将保留生成的产量中的空白，通常是包含代码块的markdown。
#7
1
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
我决定提出一些比改变前期或代码工作更具体的方法。所以我做了一些正则表达式来获取第一个换行符\ n（前面有可能的空格 - \ s *用于清除一行代码末尾和换行符之前的额外空格（我注意到你的那个）（）并找到它后面的制表符或空白字符[\ t \ s] *（表示制表符，空格字符（0或更多）并将该值设置为变量。然后在正则表达式替换函数中使用该变量来查找所有它的实例并用\ n（换行符）替换它。由于第二行（设置模式的地方）没有全局标志（正则表达式之后的ag），它将找到\ n换行符的第一个实例和将模式变量设置为该值。因此，对于换行符，后跟2个制表符，模式的值在技术上将是\ n \ t \ t，将替换为在该前导符中找到每个\ n字符的位置代码元素（因为它正在运行每个函数）并替换为\ 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>#8
0
This is cumbersome, but it works if code folding is important to you:
这很麻烦，但如果代码折叠对您很重要，它会起作用：
<pre>def some_funtion</pre>
<pre> return 'Hello, World!'</pre>
<pre>end</pre>
In your css,
在你的CSS中，
pre { margin:0 }
In vim, writing your code normally and then executing:
在vim中，正常编写代码然后执行：
:s/\t\t\([^\n]\+\)/<pre>\1<\/pre>/
for each line would work.
对于每一行都可行。
#9
0
If you are using this on a code block like:
如果您在代码块上使用它，如：
<pre>
<code>
...
</code>
</pre>
You can just use css like this to offset that large amount of white space in the front.
您可以使用这样的css来抵消前面那么大的空白区域。
pre code {
position: relative;
left: -95px; // or whatever you want
}
#10
-1
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:-
pre标签保留了在体内书写时使用的所有空白区域。通常情况下如果你不使用pre它会正常显示文本...（HTML将使浏览器忽略那些空格）这里尝试这个我使用了段落标记。输出： -
Here is my code:
这是我的代码：
def some_function
def some_function
return 'Hello, World!'
end
结束
<html> <body> Here is my code: <p> def some_function<br> <pre> return 'Hello, World!'<br></pre> end </p> </body> </html>
#1
22
PRE is intended to preserve whitespace exactly as it appears (unless altered by white-space in CSS, which doesn't have enough flexibility to support formatting code).
PRE旨在保留与显示的完全相同的空白（除非由CSS中的空格改变，因为它没有足够的灵活性来支持格式化代码）。
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.
保留格式，但PRE标记之外的所有缩进都是如此。使用标签位置作为起点的空白保留会很好。
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.
内容仍然按声明的格式进行格式化，但删除了由文档中PRE标记的位置引起的无关的前导空格。
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.
我想出了以下插件来解决想要删除文档大纲缩进造成的多余空白的问题。此代码使用PRE标记内的第一行来确定它纯粹由于文档的缩进而缩进了多少。
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).
此代码适用于IE7，IE8，IE9，Firefox和Chrome。我已经使用Prettify库对它进行了简单测试，将保留的格式与漂亮的打印相结合。确保PRE中的第一行实际上代表您要忽略的缩进的基线级别（或者，您可以修改插件以使其更加智能）。
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!
这是粗略的代码。如果您发现错误或无法正常工作，请修改/评论;不只是downvote。我写了这段代码来修复我遇到的问题，并且我正在积极地使用它，所以我希望它尽可能地坚固！
/*!
*** prettyPre ***/
(function( $ ) {
$.fn.prettyPre = function( method ) {
var defaults = {
ignoreExpression: /\s/ // what should be ignored?
};
var methods = {
init: function( options ) {
this.each( function() {
var context = $.extend( {}, defaults, options );
var $obj = $( this );
var usingInnerText = true;
var text = $obj.get( 0 ).innerText;
// some browsers support innerText...some don't...some ONLY work with innerText.
if ( typeof text == "undefined" ) {
text = $obj.html();
usingInnerText = false;
}
// use the first line as a baseline for how many unwanted leading whitespace characters are present
var superfluousSpaceCount = 0;
var currentChar = text.substring( 0, 1 );
while ( context.ignoreExpression.test( currentChar ) ) {
currentChar = text.substring( ++superfluousSpaceCount, superfluousSpaceCount + 1 );
}
// split
var parts = text.split( "\n" );
var reformattedText = "";
// reconstruct
var length = parts.length;
for ( var i = 0; i < length; i++ ) {
// cleanup, and don't append a trailing newline if we are on the last line
reformattedText += parts[i].substring( superfluousSpaceCount ) + ( i == length - 1 ? "" : "\n" );
}
// modify original
if ( usingInnerText ) {
$obj.get( 0 ).innerText = reformattedText;
}
else {
// This does not appear to execute code in any browser but the onus is on the developer to not
// put raw input from a user anywhere on a page, even if it doesn't execute!
$obj.html( reformattedText );
}
} );
}
}
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ) );
}
else if ( typeof method === "object" || !method ) {
return methods.init.apply( this, arguments );
}
else {
$.error( "Method " + method + " does not exist on jQuery.prettyPre." );
}
}
} )( jQuery );
This plugin can then be applied using a standard jQuery selector:
然后可以使用标准jQuery选择器应用此插件：
<script>
$( function() { $("PRE").prettyPre(); } );
</script>
#2
12
Indenting With Comments
Since browsers ignore comments, you can use them to indent your pre tag contents.
由于浏览器会忽略注释，因此您可以使用它们来缩进预标记内容。
Solution
<html>
<body>
<main>
Here is my code with hack:
<pre>
<!-- -->def some_function
<!-- --> return 'Hello, World!'
<!-- -->end
</pre>
Here is my code without hack:
<pre>
def some_function
return 'Hello, World!'
end
</pre>
</main>
<body>
</html>NOTE: a main wrapper was added to provide enough space for the comments.
注意：添加了一个主包装器，以便为注释提供足够的空间。
Advantages
- No JavaScript required
- 无需JavaScript
- Can be added statically
- 可以静态添加
- Minification won't affect the indentation and reduces file size
- 缩小不会影响缩进并减小文件大小
Disadvantages
- Requires a minimum amount of space for the comments
- 要求评论的最小空间
- Not very elegant unless build tools are used
- 除非使用构建工具，否则不是很优雅
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.
更好的解决方案是使用构建过程或后端渲染过程删除前导空白区域。如果您使用的是node.js，那么您可以使用我编写的名为predentation的流。您可以使用任何您想要构建类似工具的语言。
Before
之前
<html>
<body>
Here is my code:
<pre>
def some_function
return 'Hello, World!'
end
</pre>
</body>
</html>
After
后
<html>
<body>
Here is my code:
<pre>
def some_function
return 'Hello, World!'
end
</pre>
</body>
</html>
Advantages
- Seamless way to write
pretags - 无缝的方式来编写预标签
- Smaller output file size
- 较小的输出文件大小
Disadvantages
- Requires a build step in your workflow
- 需要在工作流程中构建步骤
- Does not handle non
preelements withwhite-space: preadded by CSS - 不处理带有空格的非pre元素：由CSS预先添加
Removing Indentation With JavaScript
See this answer to remove indentation with JavaScript
请参阅此答案以使用JavaScript删除缩进
Advantages
- Possible to target elements with
white-space: pre - 可以使用空格来定位元素：pre
Disadvantages
- JavaScript can be disabled
- 可以禁用JavaScript
- White-space adds to the file size
- 空格会增加文件大小
#3
5
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).
使用JavaScript进行管理。它适用于Internet Explorer 9和Chrome 15，我还没有测试旧版本。当添加对outerHTML的支持时（参见此处），它应该在Firefox 11中工作，同时在Web上有一些自定义实现。读者的练习是摆脱尾随缩进（直到我花时间完成它并更新这个答案）。
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.
请注意，您必须重新格式化示例以使用制表符作为缩进，或更改正则表达式以使用空格。
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<pre>
<html>
<head>
<title>Hello World Example</title>
</head>
<body>
Hello, World!
</body>
</html>
</pre>
<pre>
class HelloWorld
{
public static int Main(String[] args)
{
Console.WriteLine(&quot;Hello, World!&quot;);
return 0;
}
}
</pre>
<script language="javascript">
var pre_elements = document.getElementsByTagName('pre');
for (var i = 0; i < pre_elements.length; i++)
{
var content = pre_elements[i].innerHTML;
var tabs_to_remove = '';
while (content.indexOf('\t') == '0')
{
tabs_to_remove += '\t';
content = content.substring(1);
}
var re = new RegExp('\n' + tabs_to_remove, 'g');
content = content.replace(re, '\n');
pre_elements[i].outerHTML = '<pre>' + content + '</pre>';
}
</script>
</body>
</html>
#4
2
This can be done in four lines of JavaScript:
这可以通过四行JavaScript完成：
var pre= document.querySelector('pre');
//insert a span in front of the first letter. (the span will automatically close.)
pre.innerHTML= pre.textContent.replace(/(\w)/, '<span>$1');
//get the new span's left offset:
var left= pre.querySelector('span').getClientRects()[0].left;
//move the code to the left, taking into account the body's margin:
pre.style.marginLeft= (-left + pre.getClientRects()[0].left)+'px'; <body>
Here is my code:
<pre>
def some_funtion
return 'Hello, World!'
end
</pre>
<body>#5
2
<script>
$("pre[name='pre']").each(function () {
var html = $(this).html()
var blankLen = (html.split('\n')[0].match(/^\s+/)[0]).length
$(this).html($.trim(html.replace(eval("/^ {" + blankLen + "}/gm"), "")))
})
</script><div>
<pre name="pre">
1
2
3
</pre>
</div>#6
1
I also found that if you're using haml you can use the preserve method. For example:
我还发现，如果你使用haml，你可以使用preserve方法。例如：
preserve yield
This will preserve the whitespace in the produced yield which is usually markdown containing the code blocks.
这将保留生成的产量中的空白，通常是包含代码块的markdown。
#7
1
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
我决定提出一些比改变前期或代码工作更具体的方法。所以我做了一些正则表达式来获取第一个换行符\ n（前面有可能的空格 - \ s *用于清除一行代码末尾和换行符之前的额外空格（我注意到你的那个）（）并找到它后面的制表符或空白字符[\ t \ s] *（表示制表符，空格字符（0或更多）并将该值设置为变量。然后在正则表达式替换函数中使用该变量来查找所有它的实例并用\ n（换行符）替换它。由于第二行（设置模式的地方）没有全局标志（正则表达式之后的ag），它将找到\ n换行符的第一个实例和将模式变量设置为该值。因此，对于换行符，后跟2个制表符，模式的值在技术上将是\ n \ t \ t，将替换为在该前导符中找到每个\ n字符的位置代码元素（因为它正在运行每个函数）并替换为\ 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>#8
0
This is cumbersome, but it works if code folding is important to you:
这很麻烦，但如果代码折叠对您很重要，它会起作用：
<pre>def some_funtion</pre>
<pre> return 'Hello, World!'</pre>
<pre>end</pre>
In your css,
在你的CSS中，
pre { margin:0 }
In vim, writing your code normally and then executing:
在vim中，正常编写代码然后执行：
:s/\t\t\([^\n]\+\)/<pre>\1<\/pre>/
for each line would work.
对于每一行都可行。
#9
0
If you are using this on a code block like:
如果您在代码块上使用它，如：
<pre>
<code>
...
</code>
</pre>
You can just use css like this to offset that large amount of white space in the front.
您可以使用这样的css来抵消前面那么大的空白区域。
pre code {
position: relative;
left: -95px; // or whatever you want
}
#10
-1
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:-
pre标签保留了在体内书写时使用的所有空白区域。通常情况下如果你不使用pre它会正常显示文本...（HTML将使浏览器忽略那些空格）这里尝试这个我使用了段落标记。输出： -
Here is my code:
这是我的代码：
def some_function
def some_function
return 'Hello, World!'
end
结束
<html> <body> Here is my code: <p> def some_function<br> <pre> return 'Hello, World!'<br></pre> end </p> </body> </html>