问题描述
我尝试在网站上显示我的代码，但我在正确保留空格缩进时遇到问题。
例如，给出以下代码片段：
在CSS中被 white-space 所修改，它没有足够的灵活性来支持格式化代码）。 strong>之前
格式保留，但 PRE 标签之外的所有缩进也一样。以标签位置为起点的空白保存会很好。
After
内容仍然按声明格式化，但文档中由 PRE 标签位置引起的外部前导空白将被删除。
此代码适用于IE7，IE8， IE9，Firefox和Chrome。我已经使用库对其进行了简短测试，将保留的格式与漂亮打印。确保 PRE 中的第一行实际表示要忽略的缩进基线级别（或者，您可以修改插件以使其更加智能）。 p>
这是粗略的代码。如果您发现错误或无法按照您的方式工作，请修复/评论;不要只是冷静下来。我编写了这段代码来解决我遇到的问题，并且我正在积极使用它，所以我希望它尽可能地坚实！
/ *！
*** prettyPre *** /
（函数（$）{
$ .fn.prettyPre =函数（方法）{
var defaults = {
ignoreExpression：/ \s / //应忽略的内容？
};
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;
//一些浏览器支持innerText ...有些不...某些只有使用innerText。
if（typeof text ==undefined）{$ b $ text = $ obj.html（）;
usingInnerText = false;
}
//使用第一行作为多少不需要的前导空白的基线字符存在
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（\\\
）;
var reformattedText =;
// reconstruct
var length = parts.length;
for（var i = 0; i< length; i ++）{
//清理，如果我们在最后一行，不要附加尾随的换行符
reformattedText + =部分[i] .substring（superfluousSpaceCount）+（i == length - 1？：\\\
）;
}
//修改原始的
if（usingInnerText）{
$ obj.get（0）.innerText = reformattedText;
}
else {
//这不会在任何浏览器中执行代码，但开发人员的责任不在于
//将用户的原始输入放在任何地方一个页面，即使它不执行！
$ 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 +在jQuery.prettyPre中不存在）;
}
}
}）（jQuery）;
然后可以使用标准的jQuery选择器应用此插件：
< script>
$（function（）{$（PRE）。prettyPre（）;}）;
< / script>
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!' endWhen I would like it displayed as:
Here is my code: def some_funtion return 'Hello, World!' endThe 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?
解决方案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).
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!
/*! *** 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:
<script> $( function() { $("PRE").prettyPre(); } ); </script>
这篇关于如何保留HTML中包含的文本的空格缩进< pre>不包括< pre>当前缩进级别的标签。标签在文件中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！