Question

i have to display on my web page this code in this matter (7 rows in all). This <code> is only to display and best use is to copy and to paste for own use.

<script type="text/javascript">
wg_width = '250px';
wg_height = '250px';
wg_lines = '3';
wg_bgcolor = '#003366';
</script>
<script src="wg.js" type="text/javascript"></script>

my jquery function to display code is:

function upcode(rec,w,h,color) {
var wHTML = ""; 
wHTML += ('<scr' + 'ipt type="text/javascript">\n');
wHTML += ("wg_lines = '" + rec + "';\n");
wHTML += ("wg_width = '" + w + "';\n");
wHTML += ("wg_height = '" + h + "';\n");
wHTML += ("wg_bgcolor = '" + color + "';\n");
wHTML += ('</scr' + 'ipt>\n');
wHTML += ('<scr' + 'ipt src="wg.js" type="text/javascript"></scr' + 'ipt>');
$("#box_code").text(wHTML);
}

Unfortunately my output is on 1 row only and it is no good

<script type="text/javascript">wgppn_lines = '5'; wgppn_width ='250px'; wgppn_height = '250px';wgppn_bgcolor = '#FF0000';</script> <script src="wgppn.js" type="text/javascript"></script>

i tried also with html() method and <br> but this method strips out <script> tag displayng only

wg_width = '250px';
wg_height = '250px';
wg_lines = '3';
wg_bgcolor = '#003366';

Answer 1

You could enclose the text in <pre> tags:

wHTML = $('<div></div>').text(wHTML).html(); // let jQuery escape it for us
$('#box_code').html('<pre>'+wHTML+'</pre>');

You could make box code behave like a pre with the following CSS:

#box_code { white-space: pre; }

You could also change your syntax to use <script&gt instead of <script> and so on, then put in <br /> tags manually, but this seems a bit tedious.