Return to Answer

Here's a code block that's probably scrollable in both directions. If you're using a trackpad with Mac OS X 10.7 "Lion", you can install this user script that uses this code to prevent scroll bars from being hidden on code blocks.

Here's a code block that's probably scrollable in both directions. If you're using a trackpad with Mac OS X 10.7 "Lion", you can install this user script that uses this code to prevent scroll bars from being hidden on code blocks.

var canvas = document.createElement( "canvas" ), ctx = canvas.getContext( "2d" ); canvas.width = 640; canvas.height = 320; canvas.style.margin = "0 auto"; canvas.style.background = "rgb( 0, 0, 32 )"; ctx.lineWidth = 5; out.appendChild( canvas ); for ( var i = 0; i < 1024; ++i ) { ctx.strokeStyle = "rgba( 200, " + ((128 + Math.random() * 127)|0) + ", 0, " + 0.1 * Math.random() + " )"; ctx.beginPath(); ctx.arc( 320 - 40 * Math.random(), 160 - 20 * Math.random(), Math.random() * 256, Math.random() * Math.PI * 1.5, Math.random() * Math.PI * 0.5, true ); ctx.stroke(); } 

$( out ).append( $( "<p>Hello World</p>" ) ); 

var message = "Hello World", messageEl = document.createElement( "p" ); messageEl.textContent = message; out.appendChild( messageEl ); 

 <img src="https://i.sstatic.net/V6KuG.gif" width="480" height="1" /><sup><sup><sup><sup><sup>**[`  [ run with user script ]  `](http://scripts.jeremybanks.ca/run-stackexchange-code-0.0.user.js)**</sup></sup></sup></sup></sup> 

atest( "TO FAIL | return false", function () { return false; } ); atest( "TO FAIL | do nothing", function () { } ); atest( "TO FAIL | error", function () { throw new Error; } ); atest( "TO FAIL | don't let more than 2 seconds pass", function ( assert, pass, toCleanUp ) { var start = new Date; return function poll () { assert( ((new Date) - start) < 2000, "two seconds must not pass" ); return poll; } } ); atest( "return true", function () { return true; } ); atest( "Count to 10 Over 1 Second", function ( assert, pass, toCleanUp ) { var val = 0, incInterval = setInterval( incVal, 100 ); function incVal () { val += 1; } toCleanUp(function () { clearInterval( incInterval ); }) return function poll () { return ( val > 10 ) ? true : poll; }; }); atest( "Load /", function ( assert, pass, toCleanUp ) { jQuery.ajax( "/" ).done(function ( data ) { pass( "Loaded " + data.length + " chars." ); }); }); atest( "Adding even integers doesn't produce an odd one", function ( assert, pass, toCleanUp ) { for (var n = -10000; n < 10000; n += 2) { assert( n % 2 === 0, "" + n + " is not a multiple of two." ) } pass(); }); /*\ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * atest( name, body( assert, pass, toCleanUp ) ); * Declares an test with the specifed name and body. It will be * run synconously with other tests defined syncronously with it. * * runaTest( body( assert, pass, toCleanUp ) ); * Executes a test body and returns a promise of the result. * * A test body can return true to pass, false to fail or a function * to continue to it asyncronously. This happens with a delay, so it * can be used to poll some state. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * \*/ runaTest.timeout = 5000; runaTest.tickDelay = 100; atest.cooldown = 250; function atest ( name, body ) { if ( !atest.buffer ) { atest.buffer = []; setTimeout( triggerTests, 0 ); } atest.buffer.push( [ name, body ] ); function triggerTests () { var buffer = atest.buffer, i = 0; delete atest.buffer; triggerNext(); function triggerNext () { if ( i < buffer.length ) { var name = buffer[ i ][ 0 ], body = buffer[ i ][ 1 ], testRun = runaTest( body ); testRun.then(function passed () { $("<p/>").text( [ "pass [" + name + "]" ].concat( [].slice.call( arguments ) ).join(" - ") ).appendTo(out); }, function failed () { $("<p/>").text( [ "FAIL [" + name + "]" ].concat( [].slice.call( arguments ) ).join(" - ") ).css("color", "red").appendTo(out); }); testRun.always(function () { setTimeout( triggerNext, atest.cooldown ); }); ++i; } } } } function runaTest ( body ) { var result = new jQuery.Deferred, tickInterval = setInterval( tick, runaTest.tickDelay ), timeoutTimeout = setTimeout( result.reject, runaTest.timeout, "Timeout" ), active = body; return result.promise(); function assert ( condition, msg ) { if ( !condition ) { var failArgs = [ "Assertion failed" ].concat( [].slice.call( arguments, 1 ) ); result.reject.apply( result, failArgs ) ; } } function tick () { if ( result.state() === "pending" ) { if ( typeof active === "function" ) { try { active = active.call( result, assert, result.resolve, result.always ); } catch ( ex ) { result.reject( "Uncaught exception", ex ); $("<p/>").text(ex.stack).appendTo(out); } } else if ( active === true ) { result.resolve(); } else if ( active === false ) { result.reject(); } } else { clearInterval( tickInterval ); } } } 

var canvas = document.createElement( "canvas" ), ctx = canvas.getContext( "2d" ); canvas.width = 640; canvas.height = 320; canvas.style.margin = "0 auto"; canvas.style.background = "rgb( 0, 0, 32 )"; ctx.lineWidth = 5; out.appendChild( canvas ); for ( var i = 0; i < 1024; ++i ) { ctx.strokeStyle = "rgba( 200, " + ((128 + Math.random() * 127)|0) + ", 0, " + 0.1 * Math.random() + " )"; ctx.beginPath(); ctx.arc( 320 - 40 * Math.random(), 160 - 20 * Math.random(), Math.random() * 256, Math.random() * Math.PI * 1.5, Math.random() * Math.PI * 0.5, true ); ctx.stroke(); } 

$( out ).append( $( "<p>Hello World</p>" ) ); 

var message = "Hello World", messageEl = document.createElement( "p" ); messageEl.textContent = message; out.appendChild( messageEl ); 

 <img src="https://i.sstatic.net/V6KuG.gif" width="480" height="1" /><sup><sup><sup><sup><sup>**[`  [ run with user script ]  `](http://scripts.jeremybanks.ca/run-stackexchange-code-0.0.user.js)**</sup></sup></sup></sup></sup> 

atest( "TO FAIL | return false", function () { return false; } ); atest( "TO FAIL | do nothing", function () { } ); atest( "TO FAIL | error", function () { throw new Error; } ); atest( "TO FAIL | don't let more than 2 seconds pass", function ( assert, pass, toCleanUp ) { var start = new Date; return function poll () { assert( ((new Date) - start) < 2000, "two seconds must not pass" ); return poll; } } ); atest( "return true", function () { return true; } ); atest( "Count to 10 Over 1 Second", function ( assert, pass, toCleanUp ) { var val = 0, incInterval = setInterval( incVal, 100 ); function incVal () { val += 1; } toCleanUp(function () { clearInterval( incInterval ); }) return function poll () { return ( val > 10 ) ? true : poll; }; }); atest( "Load /", function ( assert, pass, toCleanUp ) { jQuery.ajax( "/" ).done(function ( data ) { pass( "Loaded " + data.length + " chars." ); }); }); atest( "Adding even integers doesn't produce an odd one", function ( assert, pass, toCleanUp ) { for (var n = -10000; n < 10000; n += 2) { assert( n % 2 === 0, "" + n + " is not a multiple of two." ) } pass(); }); /*\ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * atest( name, body( assert, pass, toCleanUp ) ); * Declares an test with the specifed name and body. It will be * run synconously with other tests defined syncronously with it. * * runaTest( body( assert, pass, toCleanUp ) ); * Executes a test body and returns a promise of the result. * * A test body can return true to pass, false to fail or a function * to continue to it asyncronously. This happens with a delay, so it * can be used to poll some state. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * \*/ runaTest.timeout = 5000; runaTest.tickDelay = 100; atest.cooldown = 250; function atest ( name, body ) { if ( !atest.buffer ) { atest.buffer = []; setTimeout( triggerTests, 0 ); } atest.buffer.push( [ name, body ] ); function triggerTests () { var buffer = atest.buffer, i = 0; delete atest.buffer; triggerNext(); function triggerNext () { if ( i < buffer.length ) { var name = buffer[ i ][ 0 ], body = buffer[ i ][ 1 ], testRun = runaTest( body ); testRun.then(function passed () { $("<p/>").text( [ "pass [" + name + "]" ].concat( [].slice.call( arguments ) ).join(" - ") ).appendTo(out); }, function failed () { $("<p/>").text( [ "FAIL [" + name + "]" ].concat( [].slice.call( arguments ) ).join(" - ") ).css("color", "red").appendTo(out); }); testRun.always(function () { setTimeout( triggerNext, atest.cooldown ); }); ++i; } } } } function runaTest ( body ) { var result = new jQuery.Deferred, tickInterval = setInterval( tick, runaTest.tickDelay ), timeoutTimeout = setTimeout( result.reject, runaTest.timeout, "Timeout" ), active = body; return result.promise(); function assert ( condition, msg ) { if ( !condition ) { var failArgs = [ "Assertion failed" ].concat( [].slice.call( arguments, 1 ) ); result.reject.apply( result, failArgs ) ; } } function tick () { if ( result.state() === "pending" ) { if ( typeof active === "function" ) { try { active = active.call( result, assert, result.resolve, result.always ); } catch ( ex ) { result.reject( "Uncaught exception", ex ); $("<p/>").text(ex.stack).appendTo(out); } } else if ( active === true ) { result.resolve(); } else if ( active === false ) { result.reject(); } } else { clearInterval( tickInterval ); } } } 

Canvas can do cool things!

var canvas = document.createElement( "canvas" ), ctx = canvas.getContext( "2d" ); canvas.width = 640; canvas.height = 320; canvas.style.margin = "0 auto"; canvas.style.background = "rgb( 32, 0, 0 )"; ctx.lineWidth = 5; ctx.strokeStyle = "rgba( 0, 200, 255, 0.1 )"; out.appendChild( canvas ); for ( var i = 0; i < 512; ++i ) { ctx.beginPath(); ctx.arc( 320, 160, Math.random() * 256, Math.random() * Math.PI * 2, Math.random() * Math.PI * 2, true ); ctx.stroke(); } 

^{[ run with user script ]}

You don't need all that crazy jQuery! It's simple enough!

var message = "Hello World", messageEl = document.createTextNode( message ); out.appendChild( messageEl ); 

  [ run with user script ]  

$( out ).append( $( "<p>Hello World</p>" ) ); 

  [ run with user script ]  

?

var message = "Hello World", messageEl = document.createElement( "p" ); messageEl.textContent = message; out.appendChild( messageEl ); 

  [ run with user script ]  

!

Want to be able to run your code like that? Just add this line below a code block:

<img src="https://i.sstatic.net/V6KuG.gif" width="480" height="1"><sup><sup><sup><sup>**[ `   [ run with user script ]  ` ](http://scripts.jeremybanks.ca/run-stackexchange-code-0.0.user.js)**</sup></sup></sup></sup></sup>

Your code's wrapped in a functon under the global context, only given the out element as an argument.

atest( "TO FAIL | return false", function () { return false; } ); atest( "TO FAIL | do nothing", function () { } ); atest( "TO FAIL | error", function () { throw new Error; } ); atest( "TO FAIL | don't let more than 2 seconds pass", function ( assert, pass, toCleanUp ) { var start = new Date; return function poll () { assert( ((new Date) - start) < 2000, "two seconds must not pass" ); return poll; } } ); atest( "return true", function () { return true; } ); atest( "Count to 10 Over 1 Second", function ( assert, pass, toCleanUp ) { var val = 0, incInterval = setInterval( incVal, 100 ); function incVal () { val += 1; } toCleanUp(function () { clearInterval( incInterval ); }) return function poll () { return ( val > 10 ) ? true : poll; }; }); atest( "Load /", function ( assert, pass, toCleanUp ) { jQuery.ajax( "/" ).done(function ( data ) { pass( "Loaded " + data.length + " chars." ); }); }); atest( "Adding even integers doesn't produce an odd one", function ( assert, pass, toCleanUp ) { for (var n = -10000; n < 10000; n += 2) { assert( n % 2 === 0, "" + n + " is not a multiple of two." ) } pass(); }); /*\ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * atest( name, body( assert, pass, toCleanUp ) ); * Declares an test with the specifed name and body. It will be * run synconously with other tests defined syncronously with it. * * runaTest( body( assert, pass, toCleanUp ) ); * Executes a test body and returns a promise of the result. * * A test body can return true to pass, false to fail or a function * to continue to it asyncronously. This happens with a delay, so it * can be used to poll some state. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * \*/ runaTest.timeout = 5000; runaTest.tickDelay = 100; atest.cooldown = 250; function atest ( name, body ) { if ( !atest.buffer ) { atest.buffer = []; setTimeout( triggerTests, 0 ); } atest.buffer.push( [ name, body ] ); function triggerTests () { var buffer = atest.buffer, i = 0; delete atest.buffer; triggerNext(); function triggerNext () { if ( i < buffer.length ) { var name = buffer[ i ][ 0 ], body = buffer[ i ][ 1 ], testRun = runaTest( body ); testRun.then(function passed () { $("<p/>").text( [ "pass [" + name + "]" ].concat( [].slice.call( arguments ) ).join(" - ") ).appendTo(out); }, function failed () { $("<p/>").text( [ "FAIL [" + name + "]" ].concat( [].slice.call( arguments ) ).join(" - ") ).css("color", "red").appendTo(out); }); testRun.always(function () { setTimeout( triggerNext, atest.cooldown ); }); ++i; } } } } function runaTest ( body ) { var result = new jQuery.Deferred, tickInterval = setInterval( tick, runaTest.tickDelay ), timeoutTimeout = setTimeout( result.reject, runaTest.timeout, "Timeout" ), active = body; return result.promise(); function assert ( condition, msg ) { if ( !condition ) { var failArgs = [ "Assertion failed" ].concat( [].slice.call( arguments, 1 ) ); result.reject.apply( result, failArgs ) ; } } function tick () { if ( result.state() === "pending" ) { if ( typeof active === "function" ) { try { active = active.call( result, assert, result.resolve, result.always ); } catch ( ex ) { result.reject( "Uncaught exception", ex ); $("<p/>").text(ex.stack).appendTo(out); } } else if ( active === true ) { result.resolve(); } else if ( active === false ) { result.reject(); } } else { clearInterval( tickInterval ); } } } 

  [ run with user script ]  

Runnable Code Blocks Using a User Script

var canvas = document.createElement( "canvas" ), ctx = canvas.getContext( "2d" ); canvas.width = 640; canvas.height = 320; canvas.style.margin = "0 auto"; canvas.style.background = "rgb( 0, 0, 32 )"; ctx.lineWidth = 5; out.appendChild( canvas ); for ( var i = 0; i < 1024; ++i ) { ctx.strokeStyle = "rgba( 200, " + ((128 + Math.random() * 127)|0) + ", 0, " + 0.1 * Math.random() + " )"; ctx.beginPath(); ctx.arc( 320 - 40 * Math.random(), 160 - 20 * Math.random(), Math.random() * 256, Math.random() * Math.PI * 1.5, Math.random() * Math.PI * 0.5, true ); ctx.stroke(); } 

  [ run with user script ]  

$( out ).append( $( "<p>Hello World</p>" ) ); 

  [ run with user script ]  

var message = "Hello World", messageEl = document.createElement( "p" ); messageEl.textContent = message; out.appendChild( messageEl ); 

  [ run with user script ]  

Want to be able to run your code like that? Just add this line following a code block:

 <img src="https://i.sstatic.net/V6KuG.gif" width="480" height="1" /><sup><sup><sup><sup><sup>**[`  [ run with user script ]  `](http://scripts.jeremybanks.ca/run-stackexchange-code-0.0.user.js)**</sup></sup></sup></sup></sup> 

Your code's wrapped in a function under the global context, only given the out element as an argument.

Prevent Scroll Bars From Being Hidden on Code Blocks on Mac OS X 10.7 "Lion"

Here's a code block that's probably scrollable in both directions. If you're using a trackpad with Mac OS X 10.7 "Lion", you can install this user script that uses this code to prevent scroll bars from being hidden on code blocks.

atest( "TO FAIL | return false", function () { return false; } ); atest( "TO FAIL | do nothing", function () { } ); atest( "TO FAIL | error", function () { throw new Error; } ); atest( "TO FAIL | don't let more than 2 seconds pass", function ( assert, pass, toCleanUp ) { var start = new Date; return function poll () { assert( ((new Date) - start) < 2000, "two seconds must not pass" ); return poll; } } ); atest( "return true", function () { return true; } ); atest( "Count to 10 Over 1 Second", function ( assert, pass, toCleanUp ) { var val = 0, incInterval = setInterval( incVal, 100 ); function incVal () { val += 1; } toCleanUp(function () { clearInterval( incInterval ); }) return function poll () { return ( val > 10 ) ? true : poll; }; }); atest( "Load /", function ( assert, pass, toCleanUp ) { jQuery.ajax( "/" ).done(function ( data ) { pass( "Loaded " + data.length + " chars." ); }); }); atest( "Adding even integers doesn't produce an odd one", function ( assert, pass, toCleanUp ) { for (var n = -10000; n < 10000; n += 2) { assert( n % 2 === 0, "" + n + " is not a multiple of two." ) } pass(); }); /*\ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * atest( name, body( assert, pass, toCleanUp ) ); * Declares an test with the specifed name and body. It will be * run synconously with other tests defined syncronously with it. * * runaTest( body( assert, pass, toCleanUp ) ); * Executes a test body and returns a promise of the result. * * A test body can return true to pass, false to fail or a function * to continue to it asyncronously. This happens with a delay, so it * can be used to poll some state. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * \*/ runaTest.timeout = 5000; runaTest.tickDelay = 100; atest.cooldown = 250; function atest ( name, body ) { if ( !atest.buffer ) { atest.buffer = []; setTimeout( triggerTests, 0 ); } atest.buffer.push( [ name, body ] ); function triggerTests () { var buffer = atest.buffer, i = 0; delete atest.buffer; triggerNext(); function triggerNext () { if ( i < buffer.length ) { var name = buffer[ i ][ 0 ], body = buffer[ i ][ 1 ], testRun = runaTest( body ); testRun.then(function passed () { $("<p/>").text( [ "pass [" + name + "]" ].concat( [].slice.call( arguments ) ).join(" - ") ).appendTo(out); }, function failed () { $("<p/>").text( [ "FAIL [" + name + "]" ].concat( [].slice.call( arguments ) ).join(" - ") ).css("color", "red").appendTo(out); }); testRun.always(function () { setTimeout( triggerNext, atest.cooldown ); }); ++i; } } } } function runaTest ( body ) { var result = new jQuery.Deferred, tickInterval = setInterval( tick, runaTest.tickDelay ), timeoutTimeout = setTimeout( result.reject, runaTest.timeout, "Timeout" ), active = body; return result.promise(); function assert ( condition, msg ) { if ( !condition ) { var failArgs = [ "Assertion failed" ].concat( [].slice.call( arguments, 1 ) ); result.reject.apply( result, failArgs ) ; } } function tick () { if ( result.state() === "pending" ) { if ( typeof active === "function" ) { try { active = active.call( result, assert, result.resolve, result.always ); } catch ( ex ) { result.reject( "Uncaught exception", ex ); $("<p/>").text(ex.stack).appendTo(out); } } else if ( active === true ) { result.resolve(); } else if ( active === false ) { result.reject(); } } else { clearInterval( tickInterval ); } } } 

  [ run with user script ]  

Tag Markup Castle