Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I Display Code Samples On Web Pages With Nice Syntax Styling Like Stack Overflow Does?

I would like to be able to pull some code samples out of a database and/or have the text embedded into the website and then have the sample formatted in a code like fashion on the screen. While the text alone on the screen is great, the format will make it more user friendly. How is this done?

I want this:

 public string MyString = "The Sample Text";


To look like:
public string MyString = "The Sample Text";


EDIT WITH ANSWER
I took Gortok's suggestion and looked into Prettify.js and its doing just what I had hoped. Here is how this is implemented.
<head runat="server">
    <script src="Scripts/prettify.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <link href="Scripts/prettify.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
    <code class="prettyprint"> 
        public String HelloString = "New String"; 
    </code>  
    <script language="javascript"> 
        $().ready(function() { 
            prettyPrint(); 
        }); 
    </script> 
</body> 
like image 415
RSolberg Avatar asked Apr 14 '09 20:04

RSolberg


3 Answers

Stack Overflow uses prettify.js from Google.

like image 71
George Stocker Avatar answered Oct 25 '22 21:10

George Stocker


I use SyntaxHighlighter by Alex Gorbatchev

http://alexgorbatchev.com/wiki/SyntaxHighlighter

It's used on Yahoo Developer Network

http://developer.yahoo.com/yui/animation/

like image 39
Adam Hopkinson Avatar answered Oct 25 '22 23:10

Adam Hopkinson


would this help:

http://code.google.com/p/syntaxhighlighter/

like image 42
Jon Erickson Avatar answered Oct 25 '22 21:10

Jon Erickson