Forums

JuanOrtizZaforas

I'm trying to show some code using prettify and everything goes fine with css, but when I try with html it doesn't work.
I use pre and code tags, like code blocks in this forum, but I'm missing something.
Can you help?
My code in jsFiddle

Senff

According to the Prettify usage FAQ:

Put code snippets in <pre class="prettyprint">...</pre> or <code class="prettyprint">... and it will automatically be pretty printed.

Would that help?

JuanOrtizZaforas

I tried that way, but still nothing. I don't think the problem is prettify, cause it doesn't work either without any classes applied.
What happens is that the html inside pre tags is still considered as html, so if I have for example:



<pre><!--code tags don't appear here-->
  <div><!--html--></div>
</pre>

What I get is a div element on my page, when I should be getting just this text: <div></div> so prettify could style it properly.

Senff

If you look at this very page and how the code blocks are styled: the PRE tags are still in the markup (with class "prettify"), used as the container, and everything in it is styled through CSS.

I have no experience with Prettify so I'm not sure if that's the way it works, but I'm just going after what I see on CSS-tricks.

JuanOrtizZaforas

Wow, you're fast!
I think I wasn't clear. Let's forget prettify. The pre and the code tags should appear in the markup, but the div should't be a "real" div, it should be just text.

Senff

Right, but to replace the < characters with < isn't that exactly what Prettify does? If those characters are not replaced, then maybe the prettify script is not loaded properly.

Or maybe I should just leave this to the Prettify experts.

JuanOrtizZaforas

It doesn't replace the < with <. It wraps the div with a span with a class
This is inside the code tag:

<span class="tag"><div></span>

JuanOrtizZaforas

Here is an image http://cl.ly/FUGm

Hompimpa

What?? I think everybody knows that in order to write the HTML code on webpage, you must escape all the < and > characters with < and >

I don't know how Chris make this forum editor easier. Maybe he changed all of that symbol when it's published, with JavaScript, or PHP.

JuanOrtizZaforas

Ah ha! I'm so stupid hahah. The thing that was troubling me was that in the inspector doesn't appear the < and &gt, so I thought there was a way to avoid using the entities.
Thanks both of you for your help!

treehouse : what would you like to learn today?

Forums

[Solved] Problems showing html code in a web page