How can I remove leading whitespace in my
/ `block without removing indentation in my HTML?`

Question

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?

Is that what you want [JsFiddle](http://jsfiddle.net/Lwypjea6/1/) ? — Zakaria Acharki, Jul 31 '15 at 19:20
@ZakariaAcharki If I'm reading the question correctly, that's what we want visually, but without having to remove the indentation from the markup. — Maximillian Laumeister, Jul 31 '15 at 19:24
Maybe a picture of exactly what you want would help us help you... — perennial_, Jul 31 '15 at 19:37
This question is a bit unclear. Can you be a bit more specific? — Michael Benjamin, Jul 31 '15 at 19:37
You can add `pre{margin-left: -55px;}` to fix it's position. Advantage: minimum code to add. Disadvantage: it's a bypass and it is needed to be changed in every particular case. I like the `` way that Paul Roub have mentioned above. Both do not require any JS code. — Cheslab, Jul 31 '15 at 19:42

score 29 · Answer 1 · answered Jul 31 '15 at 19:57

29

You could try this maybe:

pre, code{
    white-space:normal;
}

Fiddle

answered Jul 31 '15 at 19:57

zgood

12,181
2
25
26

1
I upvoted, because it works. Set `
```
`'s white-space to normal, but ``'s white-space should be `pre`.
```
– Reza Hajianpour Aug 13 '16 at 20:44
21

It worked for me!. `white-space: normal;` removes all the spaces. I had to use `white-space: pre-line;` as that removed only the spaces from the beginning. – Diego Jancic Nov 18 '16 at 19:16

ctwheels · Answer 2 · 2015-07-31T20:55:46.177

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>

Works very well, I've wrote a ES6 version without jQuery if sb. needs it https://gist.github.com/wintersolutions/4f3471954db73bf2d8f4e0ab541cf724 — wintersolutions, Jan 28 '21 at 22:03

score 2 · Answer 3 · answered Jul 31 '15 at 20:10

This works, assuming indentation should be based on the first line of code:

//get the code element:
var code= document.querySelector('pre code');

//insert a span in front of the first letter.  (the span will automatically close.)
code.innerHTML= code.textContent.replace(/(\w)/, '<span>$1');       

//get the new span's left offset:
var left= code.querySelector('span').getClientRects()[0].left;      

//move the code to the left, taking into account the body's margin:
code.style.marginLeft= (-left + code.getClientRects()[0].left)+'px';

code {
  display: block;  //this is necessary for the JavaScript to work properly
}

<body>
    Here is some code:

    <pre><code>
        Here is some fun code!    
          And some more!
            Continuing
          Wrapping up
        Closing code now.
    </code></pre>
</body>

How can I remove leading whitespace in my
/ `block without removing indentation in my HTML?`

3 Answers3

Linked

How can I remove leading whitespace in my / block without removing indentation in my HTML?

3 Answers3

Linked

How can I remove leading whitespace in my
/ `block without removing indentation in my HTML?`