How to Preserve Line Breaks in <Code> Block

How to preserve line breaks in code block?

Check your doctype is valid and on the first line. Maybe it's slipping into quirks mode?

Markdown stripping out line breaks in code block nested within list

You should indent the code block with 8 spaces to preserve the ordering of the list, as suggested by Chris under another question.

# Instructions #
1. Add the following configuration element:

        {  
            "A": 1,  
            "B": 2,  
            "C": 3
        }

2. Second list item

This also indents the code block to appear like it's within the list:

Screenshot of the result

How do I preserve line breaks when getting text from a textarea?

The easiest solution is to simply style the element you're inserting the text into with the following CSS property:

white-space: pre-wrap;

This property causes whitespace and newlines within the matching elements to be treated in the same way as inside a <textarea>. That is, consecutive whitespace is not collapsed, and lines are broken at explicit newlines (but are also wrapped automatically if they exceed the width of the element).

Given that several of the answers posted here so far have been vulnerable to HTML injection (e.g. because they assign unescaped user input to innerHTML) or otherwise buggy, let me give an example of how to do this safely and correctly, based on your original code:

document.getElementById('post-button').addEventListener('click', function () {  var post = document.createElement('p');  var postText = document.getElementById('post-text').value;  post.append(postText);  var card = document.createElement('div');  card.append(post);  var cardStack = document.getElementById('card-stack');  cardStack.prepend(card);});

#card-stack p {  background: #ddd;  white-space: pre-wrap;  /* <-- THIS PRESERVES THE LINE BREAKS */}textarea {  width: 100%;}

<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required>Group Schedule:
Tuesday practice @ 5th floor (8pm - 11 pm)
Thursday practice @ 5th floor (8pm - 11 pm)
Sunday practice @ (9pm - 12 am)</textarea><br><input type="button" id="post-button" value="Post!"><div id="card-stack"></div>

How to retain line breaks in the HTML5 code block?

If you don't mind everything inside <code> tags respecting whitespace, use this CSS:

code {
    white-space: pre;
}

Demo.

Prevent automatic line breaks in a code tag

The problem was caused by twitter bootstrap.
For whatever reason, they added the following styles to the code tag:

white-space:pre;
white-space:pre-wrap;
word-break:break-all;
word-wrap:break-word;

By overwriting the styles with:

white-space: pre;
word-break: normal;
word-wrap: normal;

The problem was fixed.

Render a string in HTML and preserve spaces and linebreaks

Just style the content with white-space: pre-wrap;.

div {    white-space: pre-wrap;}

<div>This is some text   with some extra spacing    and afew newlines along with some trailing spaces             and five leading spaces thrown infor                                              goodmeasure                                              </div>

How to preserve a line break

The line breaks are still there, it is just that the browser tries to render them.

If you still want to see the "\n" try this:

var v = $('td:first-of-type').attr('title').replace(/\n/g, "\\n");

Else, if what you want is NOT to see the "\n" and instead see the line breaks, you could do it this way:

var v = $('td:first-of-type').attr('title').replace(/\n/g, "<br/>");

Check this JSBin

How to Preserve Line Breaks in <Code> Block