HTML Forum

**bswinnerton** · 12-23-2009, 09:14 AM

I'm just curious of the best way to do this..

I have a custom content management system that I'm slowly building from the ground up. Now on the pages that display my content it's done all in PHP. So it looks something like..

Code:

echo "<p>$content</p>";

Which works great, but sometimes I like to add code samples to a page and have arranged a CSS class that surrounds the text with a CSS padded border and new background (very similar to the same way that phpBB and other forums do it).

Now of course, putting a <div class="code">whatevermycodeis</div> inside of the P doesn't validate right and isn't the correct way of doing it, so I've gotten around it temporarily by doing <object><div class="code">code</div></object> ..but it doesn't display properly in IE.

So what would be the best way of doing this?

Thanks

**chrishirst** · 12-23-2009, 09:51 AM

use a <pre> elelment

see http://www.modtalk.co.uk/article/c-a...sign/uri-case/ for an example.

**chrishirst** · 09:53 AM

Which - oddly enough, is part of a CMS that was built from the ground up

**bswinnerton** · 12-23-2009, 09:56 AM

Is that the right link?

**bswinnerton** · 12-23-2009, 10:15 AM

Here are some links for future reference of readers:

http://www.w3schools.com/TAGS/tag_pre.asp

And wrapping the <pre> tags:
http://www.longren.org/2006/09/27/wr...side-pre-tags/

Thanks Chrishirst

**chrishirst** · 12-23-2009, 10:19 AM

Quote:

Originally Posted by bswinnerton

Is that the right link?

Looks ok to me

did you scroll down the page you you could see the box with the code displayed in it??

**bswinnerton** · 12-23-2009, 10:19 AM

Shoot, I just realized that when using <pre><div class="code">code</div></pre>, it breaks my <p> tags. Anything after code in the browser is no longer in <p>.

How can this be fixed?

**bswinnerton** · 12-23-2009, 10:20 AM

Quote:

Originally Posted by chrishirst

Looks ok to me

did you scroll down the page you you could see the box with the code displayed in it??

Ohhh, sorry I thought that you meant that it was a page about <pre> tags. My fault.

But please see my post above this one. I'm confused

**bswinnerton** · 12-23-2009, 10:26 AM

Hmm, W3C really didn't like that..

Code:

document type does not allow element "pre" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

Using XHTML 1.0 Transitional

**chrishirst** · 12-23-2009, 10:39 AM

look at my source code and you'll find that my system converts the < & > delimiters into entities so they are NOT renderable code and will NOT "break" the page code.

http://www.webmaster-talk.com/asp-fo...tml#post542714

**bswinnerton** · 12-23-2009, 10:42 AM

I could be wrong, but I don't think that the < and > are breaking the code. This would only be if I had </p> in the code, wouldn't it? I think that the problem is that you cannot have a <pre> tag inside of a <p> tag.

**chrishirst** · 12-23-2009, 10:45 AM

a <pre> is a block element as is a <p> so it is perfectly legitimate

**bswinnerton** · 12-23-2009, 10:49 AM

Hmm, W3C seems to disagree with you:

I just made this test file:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>

<p><pre>this is a test of a pre inside of a p</pre></p>

</body>
</html>

And here is what W3C had to say

**chrishirst** · 12-23-2009, 12:09 PM

http://htmlhelp.com/reference/html40/block.html

No idea why the validator should regard that as invalid they are both block elements and neither are deprecated.

**bswinnerton** · 12-23-2009, 12:19 PM

That's very odd.

I still don't understand why it's ending my <p> elements at the start of the <pre>. For example I could have something like <pre><div class="code">there are no slashes or carrots here</div></pre> and anything after that won't be part of p.

Is there another way I can do this? Or should I start looking into a way for PHP to automatically insert </p> before any div's and <p> at the end of the divs?

**chrishirst** · 12-23-2009, 04:48 PM

for the HTML code you want to show as a text block of visible code rather rendered code (HTML elements) just change the HTML delimiters to HTML entities

Look at the source code of http://www.modtalk.lcl/article/c-and...gn/dhtml-tabs/

go look at the source code of http://validator.w3.org/check?uri=ht...idator%2F1.654 as the W3c do exactly the same.

**chrishirst** · 12-24-2009, 08:08 AM

http://www.webmaster-talk.com/html-f...play-code.html

**bswinnerton** · 12:48 PM

Okay, so I took your PHP function from here:

Code:

function toCode($strItem) {
           $html = array("<",">",chr(34));
           $entities = array("&lt;","&gt;","&quot;");
           $strItem = str_replace($html, $entities, $strItem);
return $strItem;
}

but now it breaks all of the code stuff that I want to display. For example now that I use this function, if I write the following in my textbox to submit to the website:

Code:

<pre><div class="code">this is some code <a> test </a> more code</div></pre>

It will display it as:

Code:

<pre><div class="code">this is some code <a> test </a> more code</div></pre>

instead of just displaying the <a></a> (which might I add makes perfect sense), but this isn't what I want it to do. I only want it to take the "<,>"'s when it's surrounded by the <pre> tags.

**chrishirst** · 12-24-2009, 12:53 PM

You only parse the code you want to display INSIDE the<pre> through the function, not all of the page code.

**bswinnerton** · 12:59 PM

I'm still a little confused. How is this going to fix the content after the <pre><div class="code></div></pre> from not being part of the p class?

Because even if the content inside of <pre><div class="code></div></pre> doesn't actually have any code (say, it's just text), anything after it isn't part of p. So I don't think that it's the greater than and less than symbols that are causing the trouble. I think that it's the pre or div element.

Edit: and also, as to only parsing things that are inside of the <pre> element, that will take a little research on my part. I'll have to search the content for <pre> and then once it found it, run the function and then stop running it when it finds </pre>, right?

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!