<code></code>

To display HTML code on a page

[Reflect]

Hi,

I remembered coming across this and making a mental note, now I need to use it.

I want to display some HTML code on a page. I thought the tag <code> would do this. I then tried the <pre> tag. The code contains a hyperlink and all the page shows when saved is the text for the hyperlink.

Confused,

Brian

[pageoneresults]

I usually insert a free form text area with the code inside so that users can cut and paste the code without having to do the cut > paste > note pad route.

<textarea rows="" name="" cols="">Insert HTML here</textarea>

[cfel2000]

Have you tried

<plaintext></plaintext>
or
<xmp> . . . </xmp>

[Reflect]

Hi,

Thanks for the quick answers. Each only show the end result hyperlink when viewed.

I ended up using <P> tags. I then cut and pasted the HTML code into normal view within FP. It now shows the code correct when viewing but here is the difference...

Code that is needed to be shown...

<p><a href="callto:nssrc3ntwkstn+secure=true">nssrc3ntwkstn</a></p>

Displays OK but looking at the source it embedded it like this...

<p><font SIZE="1" COLOR="#0000c0"><p><a href=</font><font SIZE="1">"callto:nssrc3ntwkstn+secure=true"</font><font SIZE="1" COLOR="#0000c0">></font><font SIZE="1">nssrc3ntwkstn</font><font SIZE="1" COLOR="#0000c0"></a></p></font></p>

Oh well, they only see wht appears on the page. I just strees on code bloat, guess I shouldn't in this case and jsut move on.

Edit: Pageoneresults, I tried textarea, it does work, gives a nifty scroll box to boot :).

Brian

[pageoneresults]

Edit: Pageoneresults, I tried textarea, it does work, gives a nifty scroll box to boot.

I see this method used quite frequently when visiting sites that offer scripts. I think its the best way to present a cut and paste option to users. If they try cutting and pasting from within a <p> tag that has inline styles, they end up with all of that code. They need text which the textarea offers.

[toadhall]

You could do this:
Search and replace all the "<" and ">" in the html with "&lt;" and "&gt;" respectively and stick it all in a <pre> tag for the display version. Then, next to the display code, place a link to a plain text version (code.txt f'rinstance) for copying convenience.
If your editor doesn't have Search and Replace feature, download a trial copy of Edit Plus (do a google search to find it).

(edited by: toadhall at 8:03 pm (utc) on Mar. 11, 2002)

[bruhaha]

I tried textarea, it does work, gives a nifty scroll box to boot

Yes, for the most part. There are, however a few problems with wrapping.

But before you worry about this, be sure to make the scrollbox display properly in NN 4. You'll need to do the following:

1. Place the textarea tags inside form tags (if you leave these out NN 4 will show the text--all on one line--but no box)
   
2. Add the"wrap" attribute to the textarea tags (If you leave out this step all the text will be placed on one line, and will force a horizontal scrollbar it the line is goes beyond the width of the textarea.)
   

But even then there are some problems with text-wrapping. For instance, though all browsers "prefer" to break at spaces, and after the closing angle bracket or before the opening one, you have to watch out for wrapping in the middle of a word.

On the other hand, Netscape 6 will wrap at spaces,etc., but not in the middle of a word, producing a horizontal scrollbar instead.

So, you have to try to find a suitable width for your textbox combined with well-placed spaces to prevent unwanted breaks or scrollbars.

Anyone know another solution to the wrapping problems?

[volatilegx]

I believe a wrapping solution is:

<form>
<textarea rows=10 cols=30 NOWRAP>text here</textarea>
</form>

[IanKelley]

Yes, defintiely use <textarea>.

If FP means front page and you don't like code bloat. Well, you're an oxymoron ;-)

I don't see the wrapping problem someone mentioned... If you set wrap="virtual" then there is no actual wrap (just a visual one). Copied and pasted text will show up in it's original form. You can wrap in the middle of all the words you want and it won't change anything.

[bruhaha]

Ian,

You're correct that setting the wrap to "virtual" will prevent a "real" wrap. That's definitely the ticket if the purpose is to provide code just for cut-and-paste.

But the original question did not speak of that, only of displaying the code. If you care how the code actually looks on the web page, then you do have a wrapping problem to consider. That is what I was referring to.