HTML Forum

**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** · 05:17 PM

Quote:

why don't they.

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

removed server is now down

**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.

**bmcoll3278** · 10-17-2006, 11:29 PM

Here is a html solution that may work for you.

I made a test page and uploaded it to my server and it worked

<form NAME="display code">

<DIV align="center">
<input type=button value="Highlight Your Code" onClick="javascript:this.form.txt.focus();this.for m.txt.select();">
</DIV>

<///-----------------------------------------------------begin code display------------------------------------->
<///---------- every thing between these textarea tags will display as code--------------------------------->

<textarea NAME="txt" ROWS=10 COLS=70 WRAP=VIRTUAL>

<HEAD>

Some html stuff

</HEAD>

<BODY>

<font size="5"> this should do the trick for you</font>
<br><p></p>
any othe html stuff you may need
<p><center>

I think this should work
</center><p><p></p>
</form>

</textarea>
</form>
<///---------------------------------end code display------------------------------------------------->

**bmcoll3278** · 10-17-2006, 11:34 PM

here is the test page I made feel free to look at the code. I hope this helps.
http://www.bayscapades2.com/itworks.html

**feraira** · 10-18-2006, 02:23 AM

You can display the data within a textarea if you assign the value to a variable and echo the variable out in the textarea...

Or just use <xmp>.....

HTML Code:

<xmp><b>Everything will just show out as norma.. code wise.l</b></xmp>

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!