Grow your CSS skills. Land your dream job.

Problems showing html code in a web page

  • # April 1, 2012 at 1:48 pm

    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

    # April 1, 2012 at 2:29 pm

    According to the Prettify usage FAQ:

    Put code snippets in

    ...

    or ... and it will automatically be pretty printed.

    Would that help?

    # April 1, 2012 at 3:17 pm

    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:





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

    # April 1, 2012 at 3:30 pm

    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.

    # April 1, 2012 at 3:45 pm

    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.

    # April 1, 2012 at 4:01 pm

    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.

    # April 1, 2012 at 4:33 pm

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

    # April 1, 2012 at 4:34 pm

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

    # April 2, 2012 at 1:25 am

    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.

    # April 2, 2012 at 2:16 am

    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!

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".