Menu
I have the following HTML:
<body> Here is some code: <pre><code> Here is some fun code! </code></pre> </body> But when I preview it, because the code is indented, the pre is all out of whack. I can fix that by bringing the contents back against the indent, but it looks silly. Can I make that above text look non-indented?
917
white-space: normal; removes all the spaces. I had to use white-space: pre-line; as that removed only the spaces from the beginning.
We can also remove white space by setting parent element font-size to 0 and child elements font-size to 17px .
So, while the default in HTML is to ignore multiple spaces and line breaks, you can override this using the <pre> tag. (X)HTML also allows the use of the non-breaking space ( ). If you want to string together multiple spaces that you don't want to collapse, you can use the non-breaking space.
Many developers choose to use 4-space or 2-space indentation. In HTML, each nested tag should be indented exactly once inside of its parent tag. Place a line break after every block element.
You could try this maybe:
pre, code{ white-space:normal; } Fiddle
150
Here you go, 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
