How to preserve whitespace indentation of text enclosed in HTML <pre> tags excluding the current indentation level of the <pre> tag in the document?
HtmlWhitespaceIndentationPreHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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>
Solution 2 - Html
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
- 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.
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
Removing Indentation With JavaScript
See this answer to remove indentation with JavaScript
Advantages
- Possible to target elements with
white-space: pre
Disadvantages
- JavaScript can be disabled
- White-space adds to the file size
Solution 3 - Html
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.
<!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>
Solution 4 - Html
This can be done in four lines of 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>
Solution 5 - Html
If you're okay with changing the innerHTML of the element:
Given:
<pre>
<code id="the-code">
def some_funtion
return 'Hello, World!'
end
</code
</pre>
Which renders as:
def some_funtion
return 'Hello, World!'
end
The following vanilla JS:
// get block however you want.
var block = document.getElementById("the-code");
// remove leading and trailing white space.
var code = block.innerHTML
.split('\n')
.filter(l => l.trim().length > 0)
.join('\n');
// find the first non-empty line and use its
// leading whitespace as the amount that needs to be removed
var firstNonEmptyLine = block.textContent
.split('\n')
.filter(l => l.trim().length > 0)[0];
// using regex get the first capture group
var leadingWhiteSpace = firstNonEmptyLine.match(/^([ ]*)/);
// if the capture group exists, then use that to
// replace all subsequent lines.
if(leadingWhiteSpace && leadingWhiteSpace[0]) {
var whiteSpace = leadingWhiteSpace[0];
code = code.split('\n')
.map(l => l.replace(new RegExp('^' + whiteSpace + ''), ''))
.join('\n');
}
// update the inner HTML with the edited code
block.innerHTML = code;
Will result in:
<pre>
<code id="the-code">def some_funtion
return 'Hello, World!'
end</code>
</pre>
And will render as:
def some_funtion
return 'Hello, World!'
end
Solution 6 - Html
I also found that if you're using haml you can use the preserve method. For example:
preserve yield
This will preserve the whitespace in the produced yield which is usually markdown containing the code blocks.
Solution 7 - Html
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
$("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>
Solution 8 - Html
<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>
Solution 9 - Html
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,
pre { margin:0 }
In vim, writing your code normally and then executing:
:s/\t\t\([^\n]\+\)/<pre>\1<\/pre>/
for each line would work.
Solution 10 - Html
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.
pre code {
position: relative;
left: -95px; // or whatever you want
}
Solution 11 - 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
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>