Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Syntax highlighting in <pre> tags

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?

like image 364
Joe Mornin Avatar asked May 09 '12 17:05

Joe Mornin


People also ask

What is the pre tag in HTML?

The <pre> tag in HTML is used to define the block of preformatted text which preserves the text spaces, line breaks, tabs, and other formatting characters which are ignored by web browsers. Text in the <pre> element is displayed in a fixed-width font, but it can be changed using CSS.

What is syntax highlighting style?

Syntax highlighting is a feature of text editors that are used for programming, scripting, or markup languages, such as HTML. The feature displays text, especially source code, in different colours and fonts according to the category of terms.

What is syntax highlighting in JavaScript?

Syntax highlighting determines the color and style of source code displayed in the Visual Studio Code editor. It is responsible for colorizing keywords like if or for in JavaScript differently than strings and comments and variable names.

What is syntax highlighting in idle?

Syntax highlighting is an important feature of any IDE that highlights the syntax of the language that you're working in. This helps you visually distinguish between the different Python constructs and the data used in your code. Python IDLE allows you to fully customize the appearance of your Python code.


1 Answers

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.

like image 75
Gio Borje Avatar answered Sep 29 '22 05:09

Gio Borje