In this post we will look at some popular Javascript libraries available for syntax highlighting. Syntax highlighting is very important if want to show code in your webpage. Syntax highlighting and formatting is makes your code more readable. Syntax highlighting is mostly used by programming tutorial websites to display code. In this post first we will see how to display source code for different languages in web page and then see some popular Javascript libraries used for highlighting our displayed code.
How display source code in HTML page?
The are many ways of displaying raw source code in webpages. But we need a way which is supported by all browsers and all versions of HTML.
Tags like <xmp>, <plaintext> and <listing> and are deprecated. Displaying tags using those tags was the best way of displaying raw source code. But now we have other alternatives.
Now a days websites display source code using <pre>, <code> or <textarea>.
Let’s see how we can display source code using <textarea>
<textarea> preserves both spaces and line breaks. We don’t even have to escape html reserved character. To learn more about <textarea> tag tricks follow this link. The disadvantage of displaying code this way is that the code inside textarea cannot be highlighted.
Now let’s see how we can display source code using <pre> and <code> tags.
<pre> reserves both spaces and line breaks. <code> tag just provides proper font choice for displaying source code. But we have to escape html reserved characters for the code which we want to be displayed. This is the preferred way of displaying code in web pages.
Highlighting source code
We can use Javascript regular expressions for identifying specific programming language syntax and keywords and then highlight them. But instead of doing it manually it always better to use Javascript libraries which will save time and help in rapid development.
Two most popular libraries for highlighting displayed source code is Highlight and Prism
Highlight can detect programming language automatically from our webpage. Highlight supports more than 70 programming language highlighting. They both have their merits and demerits.
We have to choose one among the two for our projects. So my personal favorite is Highlight.
Let’s see an example using Highlight:
In the above code hightlight.js automatically detects the programming language that is put inside <pre><code>..</code></pre>. The problem with the above code is that we still have to escape html reserved characters. We can have the code characters escaped server side which is better than escaping characters manually.
Javascript for escaping html reserved characters
In the above demo I said we have to escape characters server side. You must be wondering why cannot we escape it client side using Javascript.
<html>, <head>, <body> etc cannot be used more than once in a HTML document. The second instance of these tags will be automatically removed by browser. Javascript can access and escape only after these element are present in DOM. A DOM will have all more than one instances of <html>, <head>, <body> etc removed. So we won’t have access to these HTML code and therefore cannot escape and display it. This is the problem if we want to escape HTML language. For other languages there are many other problems.
Let’s see an example of escaping using Javascript
Conclusion
So we should use <pre> and <code> tags for displaying raw source code. And all code with HTML reserved characters should be escaped server side. You have the option to choose between Prism and Highlight libraries. Please Like and Share.
@narayanprusty
Leave a Reply