SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    173
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    how to show code snippets

    I really don't know what forum to post this in.

    I want to post code snippets on my site. I'm sure you've all seem demos and tutorials where the author shows the code used. My questions is, do people copy and paste the code from the file into the markup or is there some way they are pulling the appropriate code into the page so said snippet is only maintained once?

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Use the pre tag. And convert these < > to these &lt; &gt; here is more info http://www.websitecodetutorials.com/...on-website.php

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    173
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thanks.

    btw, I posted this in the js forum thinking the solution might use an ajax request.

    So, say you're displaying a snippet of css code. When you show code examples are you maintaining the code both in the .css file and in your markup ( or pulling it from a database)?

    I'm trying to find out if that's what people do -- maintain code in 2 separate locations. Or if there is some elegant way to pull a snippet of ( for example ) css code from the .css file so developers than can maintain code once.

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    No elegant way that I know of. Your over thinking it. Just copy and paste it. Two seconds

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would check out Prettify, it will let you post code as well as do all of the syntax highlighting.

    http://code.google.com/p/google-code-prettify/
    TierEngine - Reliable Dedicated Servers and Colocation
    99.9% Uptime Guaranteed
    View our Dedicated Server Deals!
    Have questions? We can help. 888.233.6133 - support(at)tierengine.com

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,614
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    The <pre> element is handy for preserving the formatting of the code, but it's more semantic to include <code> tags around the code as well. E.g.

    Code:
    <pre>
      <code>
        thy code here
      </code>
    </pre>
    Because <code> is an inline element, it's a good idea to set it to display: block when inside a <pre> element.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Because <code> is an inline element, it's a good idea to set it to display: block when inside a <pre> element.
    Why is that a good idea? Is it just for presentation purposes so that a different background color doesn't result in a ragged background on the right margin to the code?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,614
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Why is that a good idea?
    I should take back the comment. I used to use the <code> element inside a <pre> and had troubles with it, but recently read about the semantics of keeping the <code> element, and have been meaning to go over some old code and put it back in (I stopped using it at some point, as I found it was simpler just to use <pre> on its own.) From memory, it made a difference to set <<code> to display: block. But just testing it now, it didn't make much difference at all, apart from the background issue you mentioned. So I guess I've just thrown in a red herring. Sorry about that. (Either I've remembered incorrectly, or things have changed ... but I suspect the former.)

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    It might also be worth mentioning that you can save your code in a GitHub Gist and then embed that on your site.
    This is quite handy for longer code snippets.
    I use this technique on my blog - here's an example.

    The longer code snippets are in Gists, the shorter snippets in <pre> and <code> tags.

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    It might also be worth mentioning that you can save your code in a GitHub Gist and then embed that on your site.
    This is quite handy for longer code snippets.
    I use this technique on my blog - here's an example.

    The longer code snippets are in Gists, the shorter snippets in <pre> and <code> tags.
    So it's shown on your site and a link to Gist? That's cool.

    Ya 10 years ago I tried to use code tag but found the margins/padding it produced (or something) too inconsistent cross browser. So that's why I only use pre.

  11. #11
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    173
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PicnicTutorials View Post
    Use the pre tag. And convert these < > to these < > here is more info http://www.websitecodetutorials.com/...on-website.php
    When showing HTML, is there a tool that converts < and > the &lt; and &gt;? Or is it a manual process?

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sessions View Post
    When showing HTML, is there a tool that converts < and > the &lt; and &gt;? Or is it a manual process?
    Yes I have one. http://www.websitecodetutorials.com/...-converter.php

  13. #13
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    173
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thanks!

    I was also wondering about converting on the fly, as the page loads ( of course targeting certain elements as to not convert all html on the page )

  14. #14
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Anything is possible. Google it see what pops up.

  15. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by sessions View Post
    I was also wondering about converting on the fly, as the page loads ( of course targeting certain elements as to not convert all html on the page )
    You would need to do this server-side (using PHP, for example).
    Shouldn't be too hard.


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
  •