PDA

View Full Version : Posting code in webpage



UltimateCoder
Feb 23rd, 2012, 08:20 PM
I have a site, and I would like to be able to post example code on a page.
So far I have been just putting the code inside a text area, but users are able to delete it, and it looks bad.

How can I get it so I can post code in a div that looks ok? I was wondering if there was a handy CSS line or tag that ment that all code between it was not executed.

Any help?

Riku
Feb 23rd, 2012, 09:24 PM
First way came into my mind is encoding< and > characters example;

&lt;html&gt;<br>
&lt;body&gt;<br><br>
&lt;h1&gt;My First Heading&lt;/h1&gt;<br>
<br>
&lt;p&gt;My first paragraph.&lt;/p&gt;<br>
<br>
&lt;/body&gt;<br>
&lt;/html&gt;

would be

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>


More info about this;
http://en.wikipedia.org/wiki/Character_encodings_in_HTML

- Riku

UltimateCoder
Feb 23rd, 2012, 09:36 PM
Surley there must be an easier method that that?

Riku
Feb 23rd, 2012, 09:49 PM
Well there are plenty softwares that will encode text for you, also most CMS has this feature for your posts. But if you are building your site HTML/CSS style, I can't think anyother way to do this.

-Riku

tracknut
Feb 23rd, 2012, 09:57 PM
Can you use PHP? You could easily convert the code via htmlspecialchars() and then output it in your div.

Dave

Donkey
Feb 24th, 2012, 02:21 AM
What's wrong with using
<code> your code goes here</code>?

felgall
Feb 24th, 2012, 02:35 AM
Why not just add a readonly attribute to your textarea (or readonly="readonly" if you are using XHTML).

UltimateCoder
Feb 24th, 2012, 09:31 AM
Is there a way I can style my textbox so it dosn't have the inner bevel thing, and just looks like coloured box?

LearningCoder
Feb 24th, 2012, 02:07 PM
I believe it is something like:


input[type="text"] {

/*CSS CODE GOES HERE*/

}

This will style all text input tags.

For a textarea it's:


textarea {

/*CSS CODE GOES HERE*/
border: 1px solid #76ce0f;
background: #2ed9b7;

}

This will style the textarea(s) on your page.

Regards

LC.

VIPStephan
Feb 24th, 2012, 02:51 PM
No, no, no! If you want to post code in an HTML document, use the <code></code> element, that’s what it is there for. A textarea is a form control and only meant for this purpose, not to showcase code.

You can use code elements together with the <pre> element for preformatted text so that line breaks and spaces are preserved. And you can style your code (or pre) elements any way you like to look as you prefer. And in any case, you need to encode HTML special characters with respective entities (like < as &gt; etc.), no matter which element you use. Regular HTML will be parsed, not printed.

teedoff
Feb 24th, 2012, 04:33 PM
Surley there must be an easier method that that?

Thats about as easy as it gets..lol

As donkey and Stephan said, using html entities along with <code> or <pre> tags works great!

Depending on which text editor you use, most have a way to create snippets which would allow one click insertion of code. So for example you could create a snippet that inserts the html entity &lt;html&gt; all with one click or drag and drop. Or the old fashioned way of typing it over and over again. You'll get pretty fast at it soon...lol

felgall
Feb 24th, 2012, 10:46 PM
[A textarea is a form control and only meant for this purpose, not to showcase code.

So what would you use to showcase 1000 lines of code - for anything over about 10 lines of code a textarea is a far more appropriate and useful way to display it so as to allow it to be easily copied - particularly if there are long lines in the code which can be far easier handled by a textarea than by using a code tag and a web page a million pixels wide.

VIPStephan
Feb 24th, 2012, 11:26 PM
So what would you use to showcase 1000 lines of code - for anything over about 10 lines of code a textarea is a far more appropriate and useful way to display it so as to allow it to be easily copied - particularly if there are long lines in the code which can be far easier handled by a textarea than by using a code tag and a web page a million pixels wide.

As I said: code (and pre) elements can be styled any way you like. That means you can also set a fixed width and height and apply overflow: auto with CSS to limit the size (in fact, this is how the code is displayed in this forum, too). And I donít see how a textarea would make displaying code easier and more appropriate. OK, you can use a keyboard shortcut to select all code (but not all text on the page) but thatís about the only thing. And as alternative to this, common practice in blogs etc. is to provide a link to the raw code in text format.

felgall
Feb 24th, 2012, 11:45 PM
As I said: code (and pre) elements can be styled any way you like. That means you can also set a fixed width and height and apply overflow: auto with CSS to limit the size

You can display 1000000 characters of code on one line in a textarea that can be copied and pasted without changing it into multiple lines (and hence breaking the code) you can set the textarea width to contain that line easily within say 50 or 60 characters width and so not end up with a humongous horizontal scroll to be able to see all the content as it can be wrapped within the textarea and still end up as one line when you copy/paste it.

The only ways to display 1000000 characters of code that are supposed to be on one line using code tags will either mean breaking it up into shorter lines or having a a humongous horizontal scroll in order to see it all. If you wrap the content of the line inside of a code tag then copying the code will insert the extra unwanted line breaks and stop the code from working.

Using code tags is only practical for lines less than say 200 characters each. For example consider the following code with a humongous horizontal scroll:


// $D Date Library
// copyright Stephen Chapman 6th May 2009, 16th February 2012
// instructions for use - http://javascriptexample.net/dollarD.php
// permission to use this JavaScript on your web page is granted
// provided that all of the code below in this script (including these
// comments) is used without any alteration

$D = function() {var _d, _this, _daysInMonth, _dow; _this = this; _dow = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']; if (arguments[6]!==undefined) {_d = new Date(arguments[0],arguments[1],arguments[2],arguments[3],arguments[4],arguments[5],arguments[6]);} else if (arguments[5]!==undefined) {_d = new Date(arguments[0],arguments[1],arguments[2],arguments[3],arguments[4],arguments[5]);} else if (arguments[4]!==undefined) {_d = new Date(arguments[0],arguments[1],arguments[2],arguments[3],arguments[4]);} else if (arguments[3]!==undefined) {_d = new Date(arguments[0],arguments[1],arguments[2],arguments[3]);} else if (arguments[2]!==undefined) {_d = new Date(arguments[0],arguments[1],arguments[2]);} else if (arguments[1]!==undefined) {_d = new Date(arguments[0],arguments[1]);} else if (arguments[0]!==undefined) {_d = new Date(arguments[0]);} else {_d = new Date;} this.getDay = function() {return _d.getDay()}; this.getDate = function() {return _d.getDate()}; this.getMonth = function() {return _d.getMonth()}; this.getFullYear = function() {return _d.getFullYear()}; this.getHours = function() {return _d.getHours()}; this.getMinutes = function() {return _d.getMinutes()}; this.getSeconds = function() {return _d.getSeconds()}; this.getMilliseconds = function() {return _d.getMilliseconds()}; this.getUTCDay = function() {return _d.getUTCDay()}; this.getUTCDate = function() {return _d.getUTCDate()}; this.getUTCMonth = function() {return _d.getUTCMonth()}; this.getUTCFullYear = function() {return _d.getUTCFullYear()}; this.getUTCHours = function() {return _d.getUTCHours()}; this.getUTCMinutes = function() {return _d.getUTCMinutes()}; this.getUTCSeconds = function() {return _d.getUTCSeconds()}; this.getUTCMilliseconds = function() {return _d.getUTCMilliseconds()}; this.setDate = function(t) {_d.setDate(t)}; this.setMonth = function(t) {if (arguments[1]) {_d.setMonth(t,arguments[1]);}else _d.setMonth(t)}; this.setFullYear = function(t) {if (arguments[2]) {_d.setFullYear(t,arguments[1],arguments[2]);} else if (arguments[1]) {_d.setFullYear(t,arguments[1]);}else _d.setFullYear(t)}; this.setHours = function(t) {if (arguments[3]) {_d.setHours(t,arguments[1],arguments[2],arguments[3]);} else if (arguments[2]) {_d.setHours(t,arguments[1],arguments[2]);} else if (arguments[1]) {_d.setHours(t,arguments[1]);}else _d.setHours(t)}; this.setMinutes = function(t) {if (arguments[2]) {_d.setMinutes(t,arguments[1],arguments[2]);} else if (arguments[1]) {_d.setMinutes(t,arguments[1]);}else _d.setMinutes(t)}; this.setSeconds = function(t) {if (arguments[1]) {_d.setSeconds(t,arguments[1]);}else _d.setSeconds(t)}; this.setMilliseconds = function(t) {_d.setMilliseconds(t)}; this.setUTCDate = function(t) {_d.setUTCDate()}; this.setUTCMonth = function(t) {if (arguments[1]) {_d.setUTCMonth(t,arguments[1]);}else _d.setUTCMonth(t)}; this.setUTCFullYear = function(t) {if (arguments[2]) {_d.setUTCFullYear(t,arguments[1],arguments[2]);} else if (arguments[1]) {_d.setUTCFullYear(t,arguments[1]);}else _d.setUTCFullYear(t)}; this.setUTCHours = function(t) {if (arguments[3]) {_d.setUTCHours(t,arguments[1],arguments[2],arguments[3]);} else if (arguments[2]) {_d.setUTCHours(t,arguments[1],arguments[2]);} else if (arguments[1]) {_d.setUTCHours(t,arguments[1]);}else _d.setUTCHours(t)}; this.setUTCMinutes = function(t) {if (arguments[2]) {_d.setUTCMinutes(t,arguments[1],arguments[2]);} else if (arguments[1]) {_d.setUTCMinutes(t,arguments[1]);}else _d.setUTCMinutes(t)}; this.setUTCSeconds = function(t) {if (arguments[1]) {_d.setUTCSeconds(t,arguments[1]);}else _d.setUTCSeconds(t)}; this.setUTCMilliseconds = function(t) {_d.setUTCMilliseconds(t)}; this.getTime = function() {return _d.getTime()}; this.getTimezoneOffset = function() {return _d.getTimezoneOffset()}; this.toLocaleString = function() {return _d.toLocaleString()}; this.toString = function() {return _d.toString()}; this.toGMTString = function() {return _d.toGMTString()}; this.toUTCString = function() {return _d.toUTCString()}; this.valueOf = function() {return _d.valueOf()}; this.addDays = function(days) {_this.setDate(_this.getDate()+days);}; this.addMonths = function(months) {_this.setMonth(_this.getMonth()+months);}; this.addYears = function(years) {_this.setFullYear(_this.getFullYear()+years);}; this.addHours = function(hours) {_this.setHours(_this.getHours()+hours);}; this.addMinutes = function(minutes) {_this.setMinutes(_this.getMinutes()+minutes);}; this.addSeconds = function(seconds) {_this.setSeconds(_this.getSeconds()+seconds);}; this.addPeriod = function(y,m,d,h,i,s) {_this.addYears(y); _this.addMonths(m); _this.addDays(d); _this.addHours(h); _this.addMinutes(i); _this.addSeconds(s);}; this.dayDiff = function(d2) {var d= Math.abs(this-d2);return Math.floor(d/(86400000));}; this.busDayDiff = function(d2) {var d = _this.dayDiff(d2); var t= d%7;if (_d < d2) {w1= _this.getDay(); w2= d2.getDay();}else {w2= _this.getDay(); w1= d2.getDay();} if (w1 > w2) t-=2;if ((w1 == 0 && w2 == 6) || w1 == 6) t--;return Math.abs((Math.floor(d/7)*5)+t);}; this.ageLastBirthday = function(dob) {var cy = _this.getFullYear();var by = dob.getFullYear();var db = new Date(dob);db.setFullYear(cy);var adj = (this-db<0) ? 1 : 0;return cy - by - adj;}; this.isBetween = function(d1, d2) {return (_d > Math.min(d1,d2) && _d < Math.max(d1,d2));}; this.getSDay = function() {return (_this.getDay() + 1) %7;}; this.getMDay = function() {return (_this.getDay() + 6) %7;}; this.getISOYear = function() {var thu = new Date(_this.getFullYear(),_this.getMonth(),_this.getDate()+3-_this.getMDay());return thu.getFullYear();}; this.getISOWeek = function() {var onejan = new Date(_this.getISOYear(),0,1);var wk = Math.ceil((((this - onejan) / 86400000) + onejan.getMDay()+1)/7);if (onejan.getMDay() > 3) wk--;return wk;}; this.getJulian = function() {return Math.floor((this / 86400000) - (_this.getTimezoneOffset()/1440) + 2440587.5);}; this.getMonthName = function() {var m = ['January','February','March','April','May','June','July','August','September','October','November',' December'];return m[_this.getMonth()];}; this.getMonthShort = function() {var m = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];return m[_this.getMonth()];}; this.getDayName = function() {var d = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];return d[_this.getDay()];}; this.getDayShort = function() {return _dow[_this.getDay()];}; this.getOrdinal = function() {var d = _this.getDate();switch(d) {case 1: case 21: case 31: return 'st'; case 2: case 22: return 'nd'; case 3: case 23: return 'rd'; default: return 'th';}}; this.getDOY = function() {var onejan = new Date(_this.getFullYear(),0,1); if (onejan.getDST()) onejan.addHours(1); if (_this.getDST()) onejan.addHours(-1); return Math.ceil((this - onejan + 1) / 86400000);}; this.getWeek = function() {var onejan = new Date(_this.getFullYear(),0,1); return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);}; this.getStdTimezoneOffset = function() {var jan = new Date(_this.getFullYear(), 0, 1); var jul = new Date(_this.getFullYear(), 6, 1); return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());}; this.getDST = function() {return _this.getTimezoneOffset() < _this.getStdTimezoneOffset();}; this.getSwatch = function() {var swatch = ((_this.getUTCHours() + 1)%24) + _this.getUTCMinutes()/60 + _this.getUTCSeconds()/3600; return Math.floor(swatch*1000/24);}; _daysInMonth = function(month,year) {var dd = new Date(year, month, 0);return dd.getDate();}; this.format = function(f) {var fmt = f.split(''); var res = ''; for (var i = 0, l = fmt.length; i < l; i++) {switch(fmt[i]) {case '^': res += fmt[++i]; break; case 'd': var d = _this.getDate(); res += ((d<10)?'0':'')+d; break; case 'D': res += _this.getDayShort(); break; case 'j': res += _this.getDate(); break; case 'l': res += _this.getDayName(); break; case 'S': res += _this.getOrdinal(); break; case 'w': res += _this.getDay(); break; case 'z': res += _this.getDOY() - 1; break; case 'R': var dy = _this.getDOY(); if (dy<9) dy = '0'+dy; res += (dy > 99)? dy : '0'+dy; break; case 'F': res += _this.getMonthName(); break; case 'm': var m = _this.getMonth()+1; res += ((m<10)?'0':'')+m; break; case 'M': res += _this.getMonthShort(); break; case 'n': res += (_this.getMonth()+1); break; case 't': res += _daysInMonth(_this.getMonth()+1, _this.getFullYear()); break; case 'L': res += (_daysInMonth(2, _this.getFullYear()) == 29)? 1:0; break; case 'Y': res += _this.getFullYear(); break; case 'y': var y = _this.getFullYear().toString().substr(3); res += ((y<10)?'0':'')+y; break; case 'a': res += (_this.getHours()>11)?'pm':'am'; break; case 'A': res += (_this.getHours()>11)?'PM':'AM'; break; case 'g': var h = _this.getHours()%12; res += (h==0)?12:h; break; case 'G': res += _this.getHours(); break; case 'h': var h = _this.getHours()%12; res += (h==0)?12:(h>9)?h:'0'+h; break; case 'H': var h = _this.getHours(); res += (h>9)?h:'0'+h; break; case 'i': var m = _this.getMinutes(); res += (m>9)?m:'0'+m; break; case 's': var s = _this.getSeconds(); res += (s>9)?s:'0'+s; break; case 'O': var m = _this.getTimezoneOffset(); var s = (m<0)?'+':'-'; m = Math.abs(m); var h = Math.floor(m/60); m = m%60; res += s + ((h>9)?h:'0'+h) + ((m>9)?m:'0'+m); break; case 'P': var m = _this.getTimezoneOffset(); var s = (m<0)?'+':'-'; m = Math.abs(m); var h = Math.floor(m/60); m = m%60; res += s + ((h>9)?h:'0'+h) + ':' + ((m>9)?m:'0'+m); break; case 'U': res += Math.floor(_this.getTime()/1000); break; case 'I': res += _this.getDST() ? 1:0; break; case 'K': res += _this.getDST() ? 'DST':'Std'; break; case 'c': res += _this.format('Y-m-d^TH:i:sP'); break; case 'r': res += _this.format('D, j M Y H:i:s P'); break; case 'Z': var tz = _this.getTimezoneOffset() * -60; res += tz; break; case 'W': res += _this.getISOWeek(); break; case 'X': res += _this.getWeek(); break; case 'x': var w = _this.getWeek();res += ((w<10)?'0':'')+w; break; case 'B': res += _this.getSwatch(); break; case 'N': var d = _this.getDay(); res += d?d:7; break; case 'u': res += _this.getMilliseconds()*1000; break; case 'o': res += _this.getISOYear(); break; case 'J': res += _this.getJulian(); break; case 'e': case 'T': break; default: res += fmt[i];}}return res;} this.toCalendar = function() {var tabl, row, i, j, r, n, w, x, mm, yy;mm = _this.getMonth();yy = _this.getFullYear();x = _daysInMonth(mm+1,yy);w = 1;n = (36+_this.getDay()-_this.getDate())%7;r = 1+((n+x)/7);tabl = document.createElement('table');tabl.createCaption();tabl.caption.innerHTML = _this.getMonthName()+' '+yy;tabl.createTHead();row = tabl.tHead.insertRow(-1);for (i=0; i < 7; i++) {row.insertCell(i); row.cells[i].innerHTML = _dow[i];}tabl.appendChild(document.createElement('tbody'));for (j=1; j < r; j++) {row = tabl.tBodies[0].insertRow(-1);for (i=0; i < 7; i++) {row.insertCell(i); if (w < n+1 || w-n > x) row.cells[i].innerHTML = '*'; else row.cells[i].innerHTML = w-n; if (_this.getDate()===w-n) row.cells[i].className='today';w++;}}return tabl;}; }

compared to in a textarea where all the code will wrap within the textarea and can still be copied to one line - as on http://javascriptexample.net/dollarD.php

You can't easily copy the code from above without actually scrolling all the way to the right whereas with the textarea it is simply a matter of pressing one button to highlight all the content and then selecting copy..

VIPStephan
Feb 25th, 2012, 12:02 AM
With a pre element you don’t need any HTML line breaks inside your code block. For example, consider the following code:


<pre>
<code>
// $D Date Library
// copyright Stephen Chapman 6th May 2009, 16th February 2012
// instructions for use - http://javascriptexample.net/dollarD.php
// permission to use this JavaScript on your web page is granted
// provided that all of the code below in this script (including these
// comments) is used without any alteration
$D = function() {
var _d, _this, _daysInMonth, _dow;
_this = this;
_dow = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
if (arguments[6] !== undefined) {
_d = new Date(arguments[0],arguments[1],arguments[2],arguments[3],arguments[4],arguments[5],arguments[6]);
} else if (arguments[5] !== undefined) {
_d = new Date(arguments[0],arguments[1],arguments[2],arguments[3],arguments[4],arguments[5]);
} else if (arguments[4] !== undefined) {
_d = new Date(arguments[0],arguments[1],arguments[2],arguments[3],arguments[4]);
} else if (arguments[3] !== undefined) {
_d = new Date(arguments[0],arguments[1],arguments[2],arguments[3]);
} else if (arguments[2] !== undefined) {
_d = new Date(arguments[0],arguments[1],arguments[2]);
} else if (arguments[1] !== undefined) {
_d = new Date(arguments[0],arguments[1]);
} else if (arguments[0] !== undefined) {
_d = new Date(arguments[0]);
} else {
_d = new Date;
}
this.getDay = function() {
return _d.getDay()
};
this.getDate = function() {
return _d.getDate()
};
this.getMonth = function() {
return _d.getMonth()
};
this.getFullYear = function() {
return _d.getFullYear()
};
this.getHours = function() {
return _d.getHours()
};
this.getMinutes = function() {
return _d.getMinutes()
};
this.getSeconds = function() {
return _d.getSeconds()
};
this.getMilliseconds = function() {
return _d.getMilliseconds()
};
this.getUTCDay = function() {
return _d.getUTCDay()
};
this.getUTCDate = function() {
return _d.getUTCDate()
};
this.getUTCMonth = function() {
return _d.getUTCMonth()
};
this.getUTCFullYear = function() {
return _d.getUTCFullYear()
};
this.getUTCHours = function() {
return _d.getUTCHours()
};
this.getUTCMinutes = function() {
return _d.getUTCMinutes()
};
this.getUTCSeconds = function() {
return _d.getUTCSeconds()
};
this.getUTCMilliseconds = function() {
return _d.getUTCMilliseconds()
};
this.setDate = function(t) {
_d.setDate(t)
};
this.setMonth = function(t) {
if (arguments[1]) {
_d.setMonth(t,arguments[1]);
} else _d.setMonth(t)
};
this.setFullYear = function(t) {
if (arguments[2]) {
_d.setFullYear(t,arguments[1],arguments[2]);
} else if (arguments[1]) {
_d.setFullYear(t,arguments[1]);
} else _d.setFullYear(t)
};
this.setHours = function(t) {
if (arguments[3]) {
_d.setHours(t,arguments[1],arguments[2],arguments[3]);
} else if (arguments[2]) {
_d.setHours(t,arguments[1],arguments[2]);
} else if (arguments[1]) {
_d.setHours(t,arguments[1]);
} else _d.setHours(t)
};
this.setMinutes = function(t) {
if (arguments[2]) {
_d.setMinutes(t,arguments[1],arguments[2]);
} else if (arguments[1]) {
_d.setMinutes(t,arguments[1]);
} else _d.setMinutes(t)
};
this.setSeconds = function(t) {
if (arguments[1]) {
_d.setSeconds(t,arguments[1]);
} else _d.setSeconds(t)
};
this.setMilliseconds = function(t) {
_d.setMilliseconds(t)
};
this.setUTCDate = function(t) {
_d.setUTCDate()
};
this.setUTCMonth = function(t) {
if (arguments[1]) {
_d.setUTCMonth(t,arguments[1]);
} else _d.setUTCMonth(t)
};
this.setUTCFullYear = function(t) {
if (arguments[2]) {
_d.setUTCFullYear(t,arguments[1],arguments[2]);
} else if (arguments[1]) {
_d.setUTCFullYear(t,arguments[1]);
} else _d.setUTCFullYear(t)
};
this.setUTCHours = function(t) {
if (arguments[3]) {
_d.setUTCHours(t,arguments[1],arguments[2],arguments[3]);
} else if (arguments[2]) {
_d.setUTCHours(t,arguments[1],arguments[2]);
} else if (arguments[1]) {
_d.setUTCHours(t,arguments[1]);
} else _d.setUTCHours(t)
};
this.setUTCMinutes = function(t) {
if (arguments[2]) {
_d.setUTCMinutes(t,arguments[1],arguments[2]);
} else if (arguments[1]) {
_d.setUTCMinutes(t,arguments[1]);
} else _d.setUTCMinutes(t)
};
this.setUTCSeconds = function(t) {
if (arguments[1]) {
_d.setUTCSeconds(t,arguments[1]);
} else _d.setUTCSeconds(t)
};
this.setUTCMilliseconds = function(t) {
_d.setUTCMilliseconds(t)
};
this.getTime = function() {
return _d.getTime()
};
this.getTimezoneOffset = function() {
return _d.getTimezoneOffset()
};
this.toLocaleString = function() {
return _d.toLocaleString()
};
this.toString = function() {
return _d.toString()
};
this.toGMTString = function() {
return _d.toGMTString()
};
this.toUTCString = function() {
return _d.toUTCString()
};
this.valueOf = function() {
return _d.valueOf()
};
this.addDays = function(days) {
_this.setDate(_this.getDate() + days);
};
this.addMonths = function(months) {
_this.setMonth(_this.getMonth() + months);
};
this.addYears = function(years) {
_this.setFullYear(_this.getFullYear() + years);
};
this.addHours = function(hours) {
_this.setHours(_this.getHours() + hours);
};
this.addMinutes = function(minutes) {
_this.setMinutes(_this.getMinutes() + minutes);
};
this.addSeconds = function(seconds) {
_this.setSeconds(_this.getSeconds() + seconds);
};
this.addPeriod = function(y,m,d,h,i,s) {
_this.addYears(y);
_this.addMonths(m);
_this.addDays(d);
_this.addHours(h);
_this.addMinutes(i);
_this.addSeconds(s);
};
this.dayDiff = function(d2) {
var d = Math.abs(this - d2);
return Math.floor(d/(86400000));
};
this.busDayDiff = function(d2) {
var d = _this.dayDiff(d2);
var t = d % 7;
if (_d < d2) {
w1 = _this.getDay();
w2 = d2.getDay();
} else {
w2 = _this.getDay();
w1 = d2.getDay();
}
if (w1 > w2) t -= 2;
if ((w1 == 0 && w2 == 6) || w1 == 6) t--;
return Math.abs((Math.floor(d/7) * 5) + t);
};
this.ageLastBirthday = function(dob) {
var cy = _this.getFullYear();
var by = dob.getFullYear();
var db = new Date(dob);
db.setFullYear(cy);
var adj = (this - db < 0) ? 1 : 0;
return cy - by - adj;
};
this.isBetween = function(d1, d2) {
return (_d > Math.min(d1,d2) && _d < Math.max(d1,d2));
};
this.getSDay = function() {
return (_this.getDay() + 1) % 7;
};
this.getMDay = function() {
return (_this.getDay() + 6) % 7;
};
this.getISOYear = function() {
var thu = new Date(_this.getFullYear(),_this.getMonth(),_this.getDate() + 3 - _this.getMDay());
return thu.getFullYear();
};
this.getISOWeek = function() {
var onejan = new Date(_this.getISOYear(),0,1);
var wk = Math.ceil((((this - onejan) / 86400000) + onejan.getMDay() + 1)/7);
if (onejan.getMDay() > 3) wk--;
return wk;
};
this.getJulian = function() {
return Math.floor((this / 86400000) - (_this.getTimezoneOffset()/1440) + 2440587.5);
};
this.getMonthName = function() {
var m = ['January','February','March','April','May','June','July','August','September','October','November',' December'];
return m[_this.getMonth()];
};
this.getMonthShort = function() {
var m = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
return m[_this.getMonth()];
};
this.getDayName = function() {
var d = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
return d[_this.getDay()];
};
this.getDayShort = function() {
return _dow[_this.getDay()];
};
this.getOrdinal = function() {
var d = _this.getDate();
switch(d) {
case 1: case 21: case 31: return 'st';
case 2: case 22: return 'nd';
case 3: case 23: return 'rd';
default: return 'th';
}
};
this.getDOY = function() {
var onejan = new Date(_this.getFullYear(),0,1);
if (onejan.getDST()) onejan.addHours(1);
if (_this.getDST()) onejan.addHours( - 1);
return Math.ceil((this - onejan + 1) / 86400000);
};
this.getWeek = function() {
var onejan = new Date(_this.getFullYear(),0,1);
return Math.ceil((((this - onejan) / 86400000) + onejan.getDay() + 1)/7);
};
this.getStdTimezoneOffset = function() {
var jan = new Date(_this.getFullYear(), 0, 1);
var jul = new Date(_this.getFullYear(), 6, 1);
return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
};
this.getDST = function() {
return _this.getTimezoneOffset() < _this.getStdTimezoneOffset();
};
this.getSwatch = function() {
var swatch = ((_this.getUTCHours() + 1) % 24) + _this.getUTCMinutes()/60 + _this.getUTCSeconds()/3600;
return Math.floor(swatch * 1000/24);
};
_daysInMonth = function(month,year) {
var dd = new Date(year, month, 0);
return dd.getDate();
};
this.format = function(f) {
var fmt = f.split('');
var res = '';
for (var i = 0, l = fmt.length; i < l; i++) {
switch(fmt[i]) {
case '^': res += fmt[++i];
break;
case 'd': var d = _this.getDate();
res += ((d < 10)?'0':'') + d;
break;
case 'D': res += _this.getDayShort();
break;
case 'j': res += _this.getDate();
break;
case 'l': res += _this.getDayName();
break;
case 'S': res += _this.getOrdinal();
break;
case 'w': res += _this.getDay();
break;
case 'z': res += _this.getDOY() - 1;
break;
case 'R': var dy = _this.getDOY();
if (dy < 9) dy = '0' + dy;
res += (dy > 99)? dy : '0' + dy;
break;
case 'F': res += _this.getMonthName();
break;
case 'm': var m = _this.getMonth() + 1;
res += ((m < 10)?'0':'') + m;
break;
case 'M': res += _this.getMonthShort();
break;
case 'n': res += (_this.getMonth() + 1);
break;
case 't': res += _daysInMonth(_this.getMonth() + 1, _this.getFullYear());
break;
case 'L': res += (_daysInMonth(2, _this.getFullYear()) == 29)? 1:0;
break;
case 'Y': res += _this.getFullYear();
break;
case 'y': var y = _this.getFullYear().toString().substr(3);
res += ((y < 10)?'0':'') + y;
break;
case 'a': res += (_this.getHours() > 11)?'pm':'am';
break;
case 'A': res += (_this.getHours() > 11)?'PM':'AM';
break;
case 'g': var h = _this.getHours() % 12;
res += (h == 0)?12:h;
break;
case 'G': res += _this.getHours();
break;
case 'h': var h = _this.getHours() % 12;
res += (h == 0)?12:(h > 9)?h:'0' + h;
break;
case 'H': var h = _this.getHours();
res += (h > 9)?h:'0' + h;
break;
case 'i': var m = _this.getMinutes();
res += (m > 9)?m:'0' + m;
break;
case 's': var s = _this.getSeconds();
res += (s > 9)?s:'0' + s;
break;
case 'O': var m = _this.getTimezoneOffset();
var s = (m < 0)?'+':'-';
m = Math.abs(m);
var h = Math.floor(m/60);
m = m % 60;
res += s + ((h > 9)?h:'0' + h) + ((m > 9)?m:'0' + m);
break;
case 'P': var m = _this.getTimezoneOffset();
var s = (m < 0)?'+':'-';
m = Math.abs(m);
var h = Math.floor(m/60);
m = m % 60;
res += s + ((h > 9)?h:'0' + h) + ':' + ((m > 9)?m:'0' + m);
break;
case 'U': res += Math.floor(_this.getTime()/1000);
break;
case 'I': res += _this.getDST() ? 1:0;
break;
case 'K': res += _this.getDST() ? 'DST':'Std';
break;
case 'c': res += _this.format('Y-m-d^TH:i:sP');
break;
case 'r': res += _this.format('D, j M Y H:i:s P');
break;
case 'Z': var tz = _this.getTimezoneOffset() * - 60;
res += tz;
break;
case 'W': res += _this.getISOWeek();
break;
case 'X': res += _this.getWeek();
break;
case 'x': var w = _this.getWeek();
res += ((w < 10)?'0':'') + w;
break;
case 'B': res += _this.getSwatch();
break;
case 'N': var d = _this.getDay();
res += d?d:7;
break;
case 'u': res += _this.getMilliseconds() * 1000;
break;
case 'o': res += _this.getISOYear();
break;
case 'J': res += _this.getJulian();
break;
case 'e': case 'T': break;
default: res += fmt[i];
}
}
return res;
}
this.toCalendar = function() {
var tabl, row, i, j, r, n, w, x, mm
, yy;mm = _this.getMonth();
yy = _this.getFullYear();
x = _daysInMonth(mm + 1,yy);
w = 1;
n = (36 + _this.getDay() - _this.getDate()) % 7;
r = 1 + ((n + x)/7);
tabl = document.createElement('table');
tabl.createCaption();
tabl.caption.innerHTML = _this.getMonthName() + ' ' + yy;
tabl.createTHead();
row = tabl.tHead.insertRow( - 1);
for (i=0; i < 7; i++) {
row.insertCell(i);
row.cells[i].innerHTML = _dow[i];
}
tabl.appendChild(document.createElement('tbody'));
for (j=1; j < r; j++) {
row = tabl.tBodies[0].insertRow( - 1);
for (i=0; i < 7; i++) {
row.insertCell(i);
if (w < n + 1 || w - n > x) row.cells[i].innerHTML = '*';
else row.cells[i].innerHTML = w - n;
if (_this.getDate() === w - n) row.cells[i].className = 'today';
w++;
}
}
return tabl;
};
}
</code>
</pre>


With pre elements, spaces and line breaks are preserved. And as I said: this is how the code displayed in posts on this forum is formatted, too. Look at the source code. And without pre elements, any text/code inside the code elements will break, too, where possible (e. g. on whitespaces).