How to show code snippets

JavaScript
1

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

Use the pre tag. And convert these < > to these < > here is more info http://www.websitecodetutorials.com/code/css/how-to-display-code-examples-on-website.php

3

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

No elegant way that I know of. Your over thinking it. Just copy and paste it. Two seconds

5

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/

6

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.


<pre>
  <code>
    [I]thy code here[/I]
  </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

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?

8

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

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

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

When showing HTML, is there a tool that converts < and > the < and >? Or is it a manual process?

12

Yes I have one. http://www.websitecodetutorials.com/code/html/code-converter.php

13

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

Anything is possible. Google it see what pops up.

15

You would need to do this server-side (using PHP, for example).
Shouldn’t be too hard.