How to show source code on page?

Grant Palin

12-15-2002, 04:19 AM

On a webpage, how can you show code (HTML, CSS, Javascript) so that it isn't used as part of that page itself? I mean, say I want to show the following code on the page:

<h1>Sample Code</h1>

How can I get the actual code to appear, and not have it integrate into the page?

cg9com

12-15-2002, 04:23 AM

<pre></pre> - preformatted plain text
or you could put it in a <textarea></textarea>

krycek

12-15-2002, 04:27 AM

simply use html entities instead of the characters.

for instance, < instead of < and & copy; for the copyright symbol

look here:

http://www.ramsch.org/martin/uni/fmi-hp/iso8859-1.html

Some programs like Dreamweaver will automatically convert special characters to entities, otherwise you will have to do it yourself.

::] krycek [::

EDIT: I had to put a space in & copy; so that it wouldn't actually display © lol :D

jkd

12-15-2002, 04:31 AM

Surround it in a CDATA section:

<![CDATA[

my markup

]]>

Grant Palin

12-15-2002, 04:38 AM

The PRE tag didn't seen to work. Here's the code I used:

<pre>
<html>
<head>
<title>Sample</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
</pre>

All I saw was the heading. No code.

I will give the newer suggestions a try.

Grant Palin

12-15-2002, 04:43 AM

Wouldn't using the HTML entities be more time consuming, having to put all those little codes in for simple symbols?

The CDATA thing didn't work. Again, all I saw was the heading. I did the following:

<![CDATA[
<pre>
<html>
<head>
<title>Sample</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
</pre>
]]>

So far, only the textarea solution has worked for me. Are there any other possibilities, or have I been doing something wrong with my other attempts?

jv00123

12-15-2002, 05:42 AM

try using an html program like dreamweaver or frontpage if you want to use the entities, and go much faster. I think that is the easiest way to do it.

krycek

12-15-2002, 04:57 PM

<html><br />
<head><br />
<title>Sample</title><br />
</head><br />
<body><br />
<h1>Hello World!</h1><br />
</body><br />
</html>

...that's the ONLY way to do it if you want it actually on your page, i.e. not in a textarea.

using <pre> will not help, the only thing pre does is to display it as preformatted text - you may want that as well, however to display the actal chars you need to use their entities.

::] krycek [::

jkd

12-15-2002, 05:36 PM

http://www.jasonkarldavis.com/cdata.xhtml

Works for me.

Grant Palin

12-15-2002, 06:55 PM

It doesn't work for me, jkd.

I couldn't even open the page in Internet Explorer 6!

I did open it in Dreamwevaer, however, and it worked in the preview inside Dreamweaver.

krycek

12-15-2002, 08:04 PM

jkd, I tested this, it is true it does not work in IE.

Also, as far as I know, Grant did not say he was using xhtml.

Grant, you are gonna have to use entities, sorry!

::] krycek [::

jkd

12-15-2002, 08:31 PM

I believe there is an <xmp> tag in HTML that lets you do this...

Grant Palin

12-15-2002, 09:22 PM

So....Character entities or a textbox?

cg9com

12-16-2002, 02:15 AM

yea try <xmp></xmp>
i had forgotten about that one
it worked for me when i needed it before.

Grant Palin

12-16-2002, 02:24 AM

Great, that works! What is XMP anyway? Example? Is it supported in HTML/XHTML?

cg9com

12-16-2002, 05:52 AM

um, i really dont think it will validate as xhtml anything.
i thought it was depricated a long time ago, possibly 3.2

uphilmt2

12-16-2002, 08:51 AM

xmp is a discontinued tag. Not listed for HTML 4, newer browsers may/may not be backward compatible for this old tag. Use at your own risk.

2.0: Obsolete
3.0/3.2: Deprecated
4.0: Not listed

Most places I've seen use <pre> and < & > to display the html.

Or you can spend sometime with javascripting on parsing your html to automatically read the symbols and replace them appropriately for display on the page. This site and many others use that technique to display active content.

:rolleyes:

Grant Palin

12-16-2002, 10:52 PM

Jeez, just when i thought I had found an easy solution. I tried using PRE tags, but the browser rendered the content anyway, instead of showing the actual code.

So, I guess it's back to using textareas or character entities, unless there's something I did wrong using PRE?

Grant Palin

12-30-2002, 03:05 AM

I've been playing around with HTML-kit, and have discovered the plugin to replace html symbols with charatcer entities atumoatically- very useful!

I've replaced the tag brackets with character entities as suggested previously, and the code now appears on the page like it should. I've enclosed it in a table to keep it all together. I also added some styles to the table to make it and it's contents stand out. The problem is, I have some extra space inside the table, above and below the section of code. Would that have something to do with the character entities, or the way I've styled the table?

Here's the code for the table styles:
table.example { /* For code samples */
background-color: #C0C0C0;
width:100%;
border-width:1px;
border-style:solid;
border-color:#000000;
padding:0px;
}

And the code for the table:
<table class="example">
<tr>
<td>
<pre>

<html>
<head>
<title>Sample</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

</pre>
</td>
</tr>
</table>

cg9com

12-30-2002, 05:05 AM

Originally posted by Grant Palin




are you really using those inside your code? or was it just an example for the forum, i imagine that could cause a problem.

mpjbrennan

12-30-2002, 04:59 PM

The xmp tag was not included in the HTML 4.01 recommendation on which XHTML 1.0 is based - another example of the W3C eliminating something which is really useful. It is supported by both IE and Mozilla however so you can choose between functionality and strict conformance to standards.

patrick

jkd

12-30-2002, 05:28 PM

You could just do

<textarea readonly="readonly">
the code
</textarea>

And style it to not look like a textarea...

jkd

12-30-2002, 05:31 PM

Originally posted by mpjbrennan
another example of the W3C eliminating something which is really useful

Care to give a few more? In my experience, W3C standards have given a lot more power than they've taken away. (And other than <xmp> - which you can replace with <![CDATA[ ]]> sections, I can't think of anything terribly useful they have taken away.)

brothercake

12-30-2002, 06:05 PM

<blink> :D

Grant Palin

12-30-2002, 07:19 PM

Originally posted by jkd
You could just do

<textarea readonly="readonly">
the code
</textarea>

Easy enough!

And style it to not look like a textarea...

What do you mean by this?

Grant Palin

12-30-2002, 07:20 PM

I did actually have those comments in my code, cg9com. I removed them, which got rid of the extra space at the top, but the bottom spaces remained.

jkd

12-30-2002, 07:21 PM

Well, something like

border: 1px solid #000;

would suffice. Maybe an overflow: visible to eliminate the scrolling.

jkd

12-30-2002, 07:24 PM

Originally posted by brothercake
<blink> :D

But we have text-decoration: blink; as an optional part of CSS2. ;)
http://www.w3.org/TR/CSS2/text.html#propdef-text-decoration

Grant Palin

12-30-2002, 07:25 PM

Thanks jkd, that worked well. And there's no extra spacing like in the table!

cg9com

12-30-2002, 08:36 PM

oh well if thats all you wanted ... lol