Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 7 down vote favorite
5

I'm looking for a way to automatically format and color code I write in an HTML document. I know wikipedia does it, for example on the page: http://en.wikipedia.org/wiki/Nested_function

I'm sure there are libraries out there to do this, but I can't for the life of me, find one. Does anyone have any suggestions?

share|improve this question

1 Answer

up vote 23 down vote accepted

Have a look at the Prettify JavaScript library. It's the one generally used by people (it's the one being used here on SO, for example.)

You would use it like this:

In your <head> element:

<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

In your <body> element:

<body onload="prettyPrint()">
  <!-- any HTML you like here... -->
  <pre class="prettyprint">
def say_hi():
    print("Hello World!")
  </pre>
  <!-- any HTML you like here... -->
</body>

That's for simple use of the library. If you're using other JavaScript on your page I would recommend other methods for enabling the Prettify library (i.e., don't use the onload attribute of the <body> element.) For example, if you're using jQuery, I wrote this jQuery plugin that I usually use to syntax highlight certain elements:

// Extend jQuery functionality to support prettify as a prettify() method.
jQuery.fn.prettify = function () { this.html(prettyPrintOne(this.html())); };

Used like this:

$('#my-code-element').prettify();
share|improve this answer
1  
Spot on! Works great! Thanks. – B T Aug 13 '09 at 7:26

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.