如何保留HTML中包含的文本的空格缩进< pre>不包括< pre>当前缩进级别的标签。标签在文件中？ [英] How to preserve whitespace indentation of text enclosed in HTML <pre> tags excluding the current indentation level of the <pre> tag in the document?
问题描述
我尝试在网站上显示我的代码，但我在正确保留空格缩进时遇到问题。
例如，给出以下代码片段：
< html>
< body>
这里是我的代码：
< pre>
def some_funtion
return'Hello，World！'
end
< / pre>
< body>
< / html>
这会在浏览器中显示为：
这是我的代码：
def some_funtion
return'Hello，World！'
end
当我希望显示为：
这是我的代码：
def some_funtion
return'Hello，World！'
end
所不同的是，HTML pre标签的当前缩进级别正被添加到代码的缩进中。我使用nanoc作为静态网站生成器，我使用谷歌美化来添加语法高亮。
任何人都可以提供任何建议吗？ 在CSS中被 white-space 所修改，它没有足够的灵活性来支持格式化代码）。 strong>之前
格式保留，但 PRE 标签之外的所有缩进也一样。以标签位置为起点的空白保存会很好。
After
内容仍然按声明格式化，但文档中由 PRE 标签位置引起的外部前导空白将被删除。
<我已经想出了以下插件来解决想要删除由文档大纲的缩进引起的多余空白的问题。此代码使用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!'
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?
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>当前缩进级别的标签。标签在文件中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
