Syntax highlighting in <pre> tags

Joe Mornin picture Joe Mornin · May 9, 2012 · Viewed 18.7k times · Source

Are there any libraries that will allow me to display code in <pre> tags and highlight the syntax according to the language? I'm imagining something like this:

<pre class="python">
class MyClass:
    """A simple example class"""
    i = 12345
    def f(self):
        return 'hello world'
</pre>

...where the CSS for pre.python would highlight the Python code appropriately.

Does something like this exist?

Answer

Gio Borje picture Gio Borje · May 9, 2012

There's SyntaxHighlighter:

<pre class="brush: python">
   # python code here
</pre>

There's also highlight.js which has the option of automatically detecting the syntax and highlighting it appropriately; however, you would need to use both <pre><code> tags to wrap your code.

If you're looking for a server-side example, there's GeSHi or Pygments for Python.