QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Displaying And Highlighting Source code in HTML Page

Displaying And Highlighting Source code in HTML Page

syntax-highlight

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.



Apr 7, 2014Narayan Prusty
Login Using Facebook TutorialRedirection And Duplicate Content In Websites

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago Web Developmenthighlight.js, jquery syntax highlighter, prism, source code, syntax highlight
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • How display source code in HTML page?
  • Highlighting source code
  • Javascript for escaping html reserved characters
Related Articles
  • Number Counter Animation using Javascript
  • Customizing Right Click Menu in HTML Page
  • Login Using Facebook Tutorial
  • Python like Multiline Strings In JavaScript
  • Maintaining Aspect Ratio of iFrame in Responsive Site
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license