I am trying to format some Javascript for display in my blog, so that users can copy and paste it into their own blog templates. However, as the <div> is not wide enough to display the longest line of code, line-breaks get inserted when the page is rendered, breaking the code.

I have tried using <textarea>s but the problem there is that < br /> tags get inserted automatically for every carriage-return/line-feed, again breaking the code.

Does anyone out there know of a way in which the code can be displayed without either resizing the <div>, making the font tiny, or having to add multiple calls to string output functions in order to shorten the lines of code?

I need some sort of joining entity which permits line-breaking the code when it is displayed but which keeps the original formatting intact when copied and pasted.

I'm totally stumped - there is probably a really simple solution, but I'm too glazed to see it right now.

Thanks in advance,

Saltire

Have you tried using <pre> ... </pre> tags?

Hey Spudley,

Genius!

Yes, I just gave it a go. While it works in preserving the formatting, it looks terrible, as the text is no longer confined to the <div>, and gets rendered on top of and behind other stuff.

Thanks for the reminder about <pre></pre>, though.

My blog is at http://theincomer.blogspot.com/ if you want to take a look at what I mean.

let me advertise http://www.gnu.org/software/src-highlite/

Ah well. Don't worry about it folks. I have removed the post containing the offending code.

I thinks this is a feature lacking in XHTML, and surely must affect coders and scripters the world over...

Perhaps something like this?

You can also use "overflow: scroll" to get a scroll bar if you want to still get to the end of the line somehow.

I think you've cracked it! Excellent: much thanks. Have you had the same issue?