G41 Code Sample

Include:

Developer EOL

v0 Code box

Definition

A container to display code samples.

Usage

Used on destination pages to illustrate code samples.

v0 Code box

Sample
Code
Templates (0)

This is the basic code box component shown with the optional title. This component makes use of the google code prettifier triggered by the "prettyprint" class on the PRE tag. The google code is capable of detecting the type of code in the PRE tags, but if you need to be specific you can specify it with the lang-* class in the PRE tag, where * can be replaced with "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl".

By default this component has a fixed width design meant to fit a page with one side nav column. The width is fixed to prevent long code lines from pushing the page to a wider width. Use the "fullwidth" class illustrated in the g41v0 (example x2) if you need a wider box on a page with no side nav.

Your Title Here



// this is a comment
if(!bar){
	bar = 'foo';
}else{
	alert('get more foo');
}

No Templates Reference this

By default this component adjusts it's height to fit the code example, but there are times when you want to fix the height to contain larger blocks of code in a smaller scrolling block. To do this simply add the class "fixed-*" to g41 DIV where * can be any number such as "fixed-300". When the "fixed-*" class is used some buttons are automatically added to the top right of the component that allow the user to adjust the height of the box.

Your Title Here



// this is a comment, a really really really really really really really really really really really long comment
var foo = 1;

// this is a function
function foobar(){

	if(!bar){
		bar = 'foo';
	}else{
		alert('get more foo');
	}

	while(foo < 100){
		foo++;
	}
}

No Templates Reference this

v0 x2 Code box w/ no title

Sample
Code
Templates (0)

This example shows this component without the H5 title.



// this is a comment
if(!bar){
	bar = 'foo';
}else{
	alert('get more foo');
}

No Templates Reference this

v0 x3 Code box w/ no prettyprint

Sample
Code
Templates (0)

If syntax coloring is not working for your code or is not needed you can remove the "prettyprint" class to disable syntax coloring.



<div class="example">

<p>This is a paragraph.</p>

</div>

No Templates Reference this

v0 x4 Code box w/full width

Sample
Code
Templates (0)

When using this component on a page with no side nav the "fullwidth" class may be added to the g41 DIV to set it to a full page width. This option may not be use on any page that contains a side nav column.

Your Title Here



// this is a comment, a really really really really really really really really really really really long comment
var foo = 1;

// this is a function
function foobar(){

	if(!bar){
		bar = 'foo';
	}else{
		alert('get more foo');
	}

	while(foo < 100){
		foo++;
	}
}