SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to display xhtml on webpags as an example

    Hi Guys,
    I'm trying to find a way to display html coding on a webpage without the browser actually rendering it.
    I want it to be accessible to all and I want it to be fairly easy for me to do many times.

    Does anyone know of a way this can simply be accomplished?

    thanks

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Use the appropriate entity codes.

    Where you want to display & use &
    Where you want to display < use &lt;

    The code will then display in the page instead of being processed. You may also decide to use &gt; instead of > but that is up to you.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is that really the best way?
    Are you saying that I'll have to replace every "<" with "&lt;" and every ">" with "&gt"
    Or just the first and last?
    I'll just potentially be including a lot of examples on my website, and the less work I'll have to do each time, the better.

  4. #4
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes that's the way you do it. Very tedious process indeed.

    or: http://code.google.com/p/syntaxhighlighter/
    Last edited by RetroNetro; Apr 25, 2009 at 11:18.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by stevex33 View Post
    Is that really the best way?
    Are you saying that I'll have to replace every "<" with "&lt;" and every ">" with "&gt"
    Or just the first and last?
    I'll just potentially be including a lot of examples on my website, and the less work I'll have to do each time, the better.
    You have to change every one. Using a server side script to change them automatically is the easiest way if you are using dynamic pages. If you are including them in static pages then simply insert the content then select the block to be changed and do find and replace all on the selection (do the & change first)
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Or you could simply paste the code into a text editor and use the replace function on each character for its correct symbolism

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In theory you could wrap your code sample in a CDATA section, but for some odd reason only Opera supports those with HTML. (Other browser support CDATA sections, but only for XML.)
    Code HTML4Strict:
    <pre><code><![CDATA[<body>
      ...lots of HTML markup to show literally...
    </body>]]></code></pre>
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I also use Google Syntax Highlighter together with Postable. Postable allows you to flawlessly convert html tags into entity codes.

    Postable: noteslog.com/personal/projects/postable/ (the one I use)
    Postable by Elliot Swan: elliotswan.com/postable/ ( new discovery for me )

    It's weird they have the same tool name. Anyway I hope this helps.
    Last edited by raymondselda; Apr 26, 2009 at 11:42. Reason: added signature
    Raymond Selda - Helping you design and build websites that work

  9. #9
    SitePoint Addict
    Join Date
    Jan 2008
    Location
    Shaw AFB
    Posts
    282
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well,

    if you "develop" in "design view" of Dreamweaver, it will recognize those symbols and put in the appropriate HTML tags in code view.

    So - in Design view of DW - type in "<" and it will code it as "&lt;"

    You can probably also copy and paste your code into design view and it will render those symbols out properly.

    here's a quick screen capture I did to demonstrate.
    ~ Nate L ~

  10. #10
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Most visual editors in CMS's are able to convert the symbols appropriately too.

    In WordPress for example, you can add HTML directly in 'HTML mode' but when you switch to the visual editor the HTML you add is automatically converted so that it displays on the page as expected.

  11. #11
    SitePoint Addict jonparadise's Avatar
    Join Date
    Oct 2004
    Location
    Brighton, England
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Funnily enough I came across this the other day too. Quite how it took me so long to discover I don't know!

    Anyway, I found a handy little utility that will convert your code into a 'display friendly' format with the click of a button.

    http://www.earn-web-cash.com/online-...encoding-form/

    Of course it's worth checking the output is okay once done, but I haven't had problem with it.

  12. #12
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Location
    Florida
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could always use PHP's htmlentities() function to convert the output without doing it manually i can always undo with html_entity_decode()
    Jorge Fernandez
    Web Developer
    J9 IT Consultants | Jorge Fernandez Online Blog

  13. #13
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The htmlspecialchars() function is far better, since it only replaces those characters that need to be escaped. The htmlentities() function replaces everything outside the ASCII range and only causes bloat.

  14. #14
    SitePoint Addict CWebguy's Avatar
    Join Date
    Mar 2009
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I always used the &lt; and &gt; tags but you could also check out the
    <code> HMTL Tag. http://www.w3schools.com/tags/tag_phrase_elements.asp

  15. #15
    SitePoint Zealot evilunix's Avatar
    Join Date
    Jun 2008
    Location
    York, UK.
    Posts
    114
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My first thoughts are PHP and htmlentities().

  16. #16
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by CWebguy View Post
    I always used the &lt; and &gt; tags but you could also check out the
    <code> HMTL Tag.
    That only marks up the content as code, it doesn't eliminate the need for escaping special characters.

    Quote Originally Posted by evilunix View Post
    My first thoughts are PHP and htmlentities().
    Then read my post #13 in this thread.
    Birnam wood is come to Dunsinane

  17. #17
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey guys! Such a great & quite useful technical stuff along with HTML tags to imply on our site to more visibility.

    Thanks all!

    Keep the posting.
    The Secrets of Effective E-Commerce Website

  18. #18
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    971
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    With PHP:

    $str="<p>MyCode</p>";
    echo htmlentities($str);

  19. #19
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doesn't anyone read the posts in a thread before replying?

    @eruna: Please read post #13 above.
    Birnam wood is come to Dunsinane

  20. #20
    SitePoint Zealot stikkybubble's Avatar
    Join Date
    Sep 2006
    Location
    Pluto
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Doesn't anyone read the posts in a thread before replying?
    Nope.

  21. #21
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by stikkybubble View Post
    Nope.
    That is obvious from the number of threads where a lot of people continue to add posts stating a viewpoint that the given thread has already thoroughly shown to be mistaken where lots of evidence has been posted already that the viewpoint is mistaken and where they just repeat the garbage without any attempt to show why the earlier proofs are wrong.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  22. #22
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Check out GeSHi...
    Ryan B | My Blog | Twitter

  23. #23
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've just realized a very simple solution, I've got dreamweaver, why don't I just type all the code into there in design view and dreamweaver will do it all for me, duh, can't believe I didn't think of that before.

    Obviously this wont allow visitors in a forum like this one for example to paste in code, but for now it's probably the simplest option for me the webmaster to add examples in.

    And rguy84, thanks for that, I've installed it into my new drupal site, I'm sure it will be very helpful.

    Just another quick question, how do you suppose this forum does the row striping in the code tags? I imagine that it's not actually a table with rows as it's just free text pasted in.

  24. #24
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stevex33 View Post
    Just another quick question, how do you suppose this forum does the row striping in the code tags? I imagine that it's not actually a table with rows as it's just free text pasted in.
    I'm not totally sure I know what you mean by row stripping but what I think you're saying is how does it return a new line break? To do that is rather simple, it most likely uses the php replace function like this:

    PHP Code:
    echo str_replace("\n","<br>",$entry); 
    Where $entry is the text entered.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •