View As HTML / View As Text button

craig467 · 01-21-2008, 02:11 PM

I am trying to make example pages - when I come across something I have never done before, I like to make example pages that show me the code to do that specific task.

I thought a good way to do this would to create a web page listing examples. Then clicking on each example would produce the output of the item that I am examplifying. Then I would like to push a button at the top that says "View as HTML /View As Text". That way I can see the code and the output that produced it with out haveing to retype code ect.

How could I do this or does anyone have any other ideas? Thanks.

rednuht · 01-21-2008, 04:21 PM

not entirely sure what you are asking, but the web page bit can be done with CSS and JavaScript very easily.
You enter each component as a new <div> with a unique id then as onclick events from buttons use JavaScript to hide/unhide the divs

Code:

document.getElementById("id_of_div_to_hide").style.display = "none";
document.getElementById("id_of_div_to_show").style.display = "block";

are you asking for code to format source code on a web page ?

boughtonp · 01-21-2008, 04:40 PM

You can use document.getElementById('id').innerHTML to access the contents of an element.

Unfortunately the browsers (particularly IE) will fiddle with your code behind the scenes, so innerHTML is not an exact replica of what you put in.
However, this is a quick example of how to achieve close to what you want...

Code:

<div id="example1">
	<strong>This is an example</strong>
</div>

<pre id="example1_code"></pre>

<button onclick="showHtml('example1')">Show HTML</button>

<script type="text/javascript">
function escape(text)
{
	var result = text.replace(/</g,'&lt;');
	result = result.replace(/>/g,'&gt;');
	result = result.replace(/"/g,'&quot;');
	return result;
}

function showHtml(id)
{
	var code = document.getElementById(id).innerHTML;
	document.getElementById(id+'_code').innerHTML =  escape(code);
}
</script>

You can use the already mentioned style.display to handle if you only want to show one or other at a time.

craig467 · 01-21-2008, 04:43 PM

I am trying to show the source code and the results of the source code on a web page. I thought it would be nice to be able to look at a page to see if it is what I want to do, then be able to show the source code on the page so that I can swipe, copy and paste the code into whatever I am working on.

Is that any clearer?

rednuht · 01-22-2008, 04:54 PM

Quote:

is that any clearer ?

No

Are you talking about HTML, JavaScript, C, Perl, or other source code ?
Are you talking about code genterated output in realtime (either server side or client side) ?

is the source code to be styled (keywords highlighted etc).

The way I would think about this is to simple design and populate a complete web page containing all the data, then use JavaScript and CSS to hide the initialy unwanted parts and unhide them on command.