Not seeing line breaks in CSS code .load()ed via jQuery

Question

I am using jQuery to .load() the contents of a CSS file into a div. But when the contents of that file are loaded, all the line breaks, tabs, etc. are gone. Is there a way to do a load of a css file while still preserving the line breaks?

Thanks in advance!

Answer 1

Instead of a <div> just use a <pre> element to preserve formatting, you can .load() into it the exact same way.

The default behavior of HTML is to display without line-breaks, extra white-space, etc (except in a <pre></pre>), from the HTML4 spec:

For all HTML elements except PRE, sequences of white space separate "words" (we use the term "word" here to mean "sequences of non-white space characters"). When formatting text, user agents should identify these words and lay them out according to the conventions of the particular written language (script) and target medium.

Answer 2

I do not get this issue myself:

$('<textarea>').load('./styles/style.css').appendTo('body');

I insert that into the page:

http://www.balupton.com/sandbox/jquery-sparkle/demo/

And it displays as expected.

The issue probably lays with the line endings used. The web uses "\n" while some versions of mac use "\r", and windows uses "\r\n".

Or if you are trying to display it in a DIV, you will have to use the CSS white-space: pre; to show the line spaces without converting them into BRs.

Edit: forgot the dash in white-space.

Answer 3

You can use a jQuery plugin to syntax highlight too: http://alexgorbatchev.com/SyntaxHighlighter/