How to display formatted code in webpage

Question

I am trying to write a blog and I want to display c# code in a neat formatted way. Is there a way to it. I like to do it exactly the way stack overflow does including color. :)

May I suggest [Github Gists](https://gist.github.com/) – jksnw Mar 26 '15 at 13:41 — jksnw, Mar 26 '15 at 13:41

John Gietzen · Accepted Answer · 2011-03-02T16:11:06.283

29

You have quite a few options here, but I would recommend against using a JavaScript formatter. If a user has scripts disabled, you still want the code to look good.

If you are using Visual Studio, the Productivity Power Tools add-in has a "copy HTML" option:
http://blogs.msdn.com/b/kirillosenkov/archive/2010/06/07/copy-code-in-html-format-with-visual-studio-2010.aspx

Jon Skeet provides a code formatter for public use:
http://csharpindepth.com/CodeFormatterTool.aspx

If you are using PHP, GeSHi is a good server-side option:
http://qbnz.com/highlighter/

I believe that stack-overflow uses google-code-prettify:
http://code.google.com/p/google-code-prettify/

SyntaxHighlighter is another good client-side solution:
http://alexgorbatchev.com/SyntaxHighlighter/

edited Mar 02 '11 at 16:11

answered Mar 02 '11 at 16:00

John Gietzen

48,783
32
145
190

Thank you John. Posting code on my blog is a breeze. I am using visual studio 2010 and Productivity Power Tool is quick. – VolleyBall Player Mar 02 '11 at 17:41
4

Is there any part of the internet that still looks good with JavaScript disabled? – Anthony May 24 '11 at 22:25
Anything I build looks good without it. I am a big fan of "progressive enhancement." – John Gietzen May 25 '11 at 15:01
6

@JohnGietzen Three Years later and your comment is still awkward – taylorcressy Sep 18 '14 at 23:18
3

The Jon Skeet one is no longer available :( – David Klempfner Mar 10 '19 at 04:16

score 9 · Answer 2 · answered Mar 02 '11 at 16:01

9

SO uses google-code-prettify, which is Javascript + CSS. You should get all the documentation you need on that site.

Also, if you don't mind using PHP, there's GeSHi. But client-side is probably better, so I'd go with the code prettifier.

answered Mar 02 '11 at 16:01

Rafe Kettler

75,757
21
156
151

+1 #wow .. i didn't noticed it was prettify that was used by SO – Shekhar_Pro Mar 02 '11 at 16:09
Thank you Rafe. For now I started using visual studio addin. I will definitely look into prettify today. – VolleyBall Player Mar 02 '11 at 17:44
1

Please let me know how to make scrolling vertically or horizontally by using google-code-prettify at blogspot.com – Frank Myat Thu Dec 12 '11 at 08:33

score 4 · Answer 3 · answered Mar 02 '11 at 16:01

4

you can use third-party if you want: Syntax Highlighter

answered Mar 02 '11 at 16:01

Beytan Kurt

2,203
4
34
57

Thanks. When fully set up, this one looks best and has the most features. – Anthony May 24 '11 at 22:30

score 3 · Answer 4 · answered Jul 24 '14 at 05:40

The Syntax Highlighter and google-code-prettify are the client-side solutions, its probably better because its more versatile to be applied in any web pages ( .php | .aspx | .jsp | .html ). Its downfall is that :

Initially when the page is loaded, formatted code is displayed in raw format. It takes up some time for the javascript to build the syntax highlighting of the code.
Doesn't work if the javascript is disabled.

Solution: Pre-build the syntax formatted code. Syntax Highlight Generator is an open source Online Tool to pre-build your code. This tool is built over Syntax Highlighter v3.0 library.

Syntax Highlight Generator's configuration: codeworkout.blogspot.com/2014/07/online-generator-tool-for-code-syntax_18.html

score -5 · Answer 5 · answered Dec 16 '11 at 21:06

-5

    <blockquote>
             //.....Code
    <blockquote>

answered Dec 16 '11 at 21:06

Ai47

41
3

That doesn't really answer the question. Try to add some more detail so that it is more complete. – Madara's Ghost Dec 16 '11 at 21:31

How to display formatted code in webpage

5 Answers5

Linked

Related