Display code

**lunchbox170** · 10-08-2006, 02:19 PM

I want to make tutorials and how tos for HTML and CSS but I can't figure out how to display the code. I have tried the following tags:

Code:

<pre>
<textarea>
<code>

None of them work, the code that I am trying to display is still being rendered. What is wrong all of those tags should work.

**chrishirst** · 10-08-2006, 03:33 PM

you have to do the opposite of this. http://www.webmaster-talk.com/asp-fo...sp-decode.html

**lunchbox170** · 10-08-2006, 05:43 PM

That, is not what I am talking about. I want to be able to display code, so readers see the code like you can see this

Code:

<a href="text.html">test</a>

<h1>Blah</h1>

I want my readers to see the actually html code. But I can't figure out how.

**vangogh** · 10-08-2006, 05:48 PM

You can use the <code></code> tag. You may also need to use < and > for the angle brackets. You may also find using <pre></pre> helpful to keep your formatting.

**chrishirst** · 10-08-2006, 05:57 PM

Quote:

Originally Posted by lunchbox170

That, is not what I am talking about

Actually it is, which is why I said you need to do the opposite

The other thread is asking how to change the < and > back from < & >

so <h1>Blah</h1> is coded as <h1>Blah</h1>

**lunchbox170** · 10-08-2006, 06:30 PM

Oh, you are right, that does work. sorry about that. So there is no easier way, it is a pain to type that.

Thanks

**beta** · 10-08-2006, 06:59 PM

sure there is... using <code></code> and <pre></pre> as said...

**LadynRed** · 10-08-2006, 08:23 PM

Why do you want to make yet another html 'how to' site ? There are thousands of them out there already !

**lunchbox170** · 10-08-2006, 08:23 PM

As said, Tried it did not work, it should work, but it doesn't.

**chrishirst** · 10-12-2006, 02:55 AM

Quote:

=lunchbox170]So there is no easier way, it is a pain to type that.

Yep there is.
You code a server side function to parse the sections of source code when you need to do the replace.

**lunchbox170** · 10-12-2006, 07:45 PM

That's not easier

**chrishirst** · 10-13-2006, 09:53 AM

it's definitely simpler, write one function, use it wherever it's required.

This one is in ASP VbScript

Code:

function toCode(strItem)
	dim i
'Change code delimiters to HTML entities
	strItem = Replace(strItem,"<","&lt;")
	strItem = Replace(strItem,">","&gt;")
	strItem = Replace(strItem,"%","%")
	strItem = replace(strItem,chr(34),"&quot;")
toCode = strItem	
end function

Use would be

Code:

 response.write tocode("<h1>Blah</h1>")

PHP would be

PHP Code:


			
function toCode($strItem) {

           $html = array("<",">",chr(34));

           $entities = array("&lt;","&gt;","&quot;");

           $strItem = str_replace($html, $entities, $strItem);

return $strItem;

}

Use would be

PHP Code:


			
echo toCode('<h1>Blah</h1>');

**lunchbox170** · 10-13-2006, 10:34 PM

no, that really isn't eaier. You have to remember not everyone knows every thing you do.

What I want to know is why code and pre tag don't work?

**chrishirst** · 10-14-2006, 04:19 AM

Quote:

What I want to know is why code and pre tag don't work

It's really quite simple.
HTML is a markup language NOT a scripting language.

That is to say it can only change the way the text will look on the page not how the text is sent to the user agent.

Quote:

You have to remember not everyone knows every thing you do

Yep, which is why I am pointing you to ways you can achieve what you want because HTML alone cannot.

Here is a javascript function to convert the < & > inside a <pre> element to the HTML entities.

Code:

<script type="text/javascript">
function toCode() {
	html = new Array(/</g,/>/g); 
	entities = new Array('&lt;','&gt;'); 
var codeSect = document.getElementsByTagName('pre');
for (var i=0;i<codeSect.length;i++) {
	for (var j=0;j<html.length;j++) {
		codeSect[i].innerHTML = codeSect[i].innerHTML.replace(html[j],entities[j]);
	}

}

}
</script>

Put the function code inside the <head> or in a linked .js file and use <body onLoad="toCode()"> in the document to run the code.
Bear in mind that some UAs do not execute javascript so will see the formatted element rather than the underlying code.

**lunchbox170** · 10-14-2006, 11:21 AM

That didn't work...

It is weird pre and code tag should work, also your thing should have worked, why don't they.

**chrishirst** · 10-14-2006, 02:02 PM

Quote:

why don't they.

No idea, do we get a URL to look at?

page on a test site my dev server http://ma.cands.dnsalias.com/display.asp

**lunchbox170** · 10-14-2006, 05:42 PM

http://www.thelnews.com

I don't have any code to display right now, and I got rid of the Javascript.