How do I format code on my own website?

Question

I'm using prettify for color coding but my code is still flat and not indented correctly, how do I format it so it looks similar to github gist or pastebin? (I'm aware you can embed from these sites but it doesn't look very professional).

Answer 1

Here is what I would do, your welcome to go about it differently:

1. I would write my code in an editor, (like Notepad++, because it's ultra awesome).
2. I would make sure my code was formatted the way I wanted.
3. I would highlight the area of code I wanted and copy it.
4. I would then switch to the "html" tab in my Wordpress post editor.
5. I would type out an opening and closing <pre> tag. If I were using prettify I would type in <pre class="prettyprint"></pre>
6. I would paste my code between the opening and closing <pre> tags I just created.

Answer 2

If your code is flat, you will need to rewrite it - as in github. Maybe you could even find an autoformatter, but it will be as language-dependent as the highlighter.

If your code is only displayed flat, you might need a <pre> tag around it or set the css property white-space:pre to the surrounding element.

Answer 3

Depending on your needs, CodeMirror's automatic formatting might suit.

With their formatting extension, you can just do:

editor.autoFormatRange(from, to);

Here's a demo of it in action.

You'd also get the ability to edit your code snippets - and if you don't want that, you can turn it off with the editor.readOnly() function.

Answer 4

I would use gist.github.com. It looks petty professorial. If still want only CSS and you are on ruby CodeRay.