...

View Full Version : How to show source code on page?



Grant Palin
12-15-2002, 05: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, 05:23 AM
<pre></pre> - preformatted plain text
or you could put it in a <textarea></textarea>

krycek
12-15-2002, 05:27 AM
simply use html entities instead of the characters.

for instance, &lt; 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 &copy; lol :D

jkd
12-15-2002, 05:31 AM
Surround it in a CDATA section:

<![CDATA[

my markup

]]>

Grant Palin
12-15-2002, 05: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, 05: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, 06: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, 05:57 PM
&lt;html&gt;<br />
&lt;head&gt;<br />
&lt;title&gt;Sample&lt;/title&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;h1&gt;Hello World!&lt;/h1&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;


...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, 06:36 PM
http://www.jasonkarldavis.com/cdata.xhtml

Works for me.

Grant Palin
12-15-2002, 07: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, 09: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, 09:31 PM
I believe there is an <xmp> tag in HTML that lets you do this...

Grant Palin
12-15-2002, 10:22 PM
So....Character entities or a textbox?

cg9com
12-16-2002, 03: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, 03:24 AM
Great, that works! What is XMP anyway? Example? Is it supported in HTML/XHTML?

cg9com
12-16-2002, 06: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, 09: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 &lt; & &gt; 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, 11: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, 04: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>
<!-- Source code begins -->
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Sample&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Hello World!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
<!-- Source code ends -->
</pre>
</td>
</tr>
</table>

cg9com
12-30-2002, 06:05 AM
Originally posted by Grant Palin

<!-- Source code begins -->
<!-- Source code ends -->


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, 05: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, 06: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, 06: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, 07:05 PM
<blink> :D

Grant Palin
12-30-2002, 08: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, 08: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, 08:21 PM
Well, something like

border: 1px solid #000;

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

jkd
12-30-2002, 08: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, 08:25 PM
Thanks jkd, that worked well. And there's no extra spacing like in the table!

cg9com
12-30-2002, 09:36 PM
oh well if thats all you wanted ... lol



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum