How to display code blocks in my private blog

Question

I want to display code blocks in my private blogging site. I am creating it from the scratch. How to proceed with it. I am totally confused.

http://stackoverflow.com/questions/5028764/display-code-html-css-php-javascript-jquery-etc-on-a-webpage-just-like-code-i — cristi _b, Dec 25 '12 at 13:48
I tried tinyMCE. But it does not have such a functionality, and i could not find a plugin for the same. — Abhishek Prakash, Dec 25 '12 at 13:51

score 0 · Accepted Answer · answered Dec 25 '12 at 13:48

0

Use the proper markup to make the code monospaced and keep whitespace as-is. This basically means using <pre> and <code>:

<pre><code>
your();
code = "here";
</code></pre>

After that you just need to add some nice CSS styling to make it look nice. And if you want syntax highlighting like here on Stack Overflow simply the easiest way to get it is adding google's prettify: http://code.google.com/p/google-code-prettify/

answered Dec 25 '12 at 13:48

ThiefMaster

310,957
84
592
636

Thanks..But I want to display the code like this site: https://developer.mozilla.org/en-US/docs/DOM/Using_web_workers I need color highlighting and indentation as well. – Abhishek Prakash Dec 25 '12 at 13:59
Did you actually *read* my answer? Indentation is done by yourself and preserved by using `
```
` tags. For highlighting I've linked you to something that's even used here on SO.
```
– ThiefMaster Dec 25 '12 at 14:27
ya it got updated after i posted the comment. Thanks :) – Abhishek Prakash Dec 25 '12 at 14:29

score 0 · Answer 2 · answered Dec 25 '12 at 13:49

0

Try Syntax Highlighter. Its easy and looks really good.
Demo Link

answered Dec 25 '12 at 13:49

Ajinkya

22,324
33
110
161

Ya i looked at it. Its nice alternative. Thanks :) – Abhishek Prakash Dec 25 '12 at 14:30

How to display code blocks in my private blog

2 Answers2