Add Google Code Prettify 

/ Ahsan Saeed 

<!DOCTYPE html>
<html>
<head>
  <title>My Web Page</title>

  <link rel="stylesheet" href="http://cdn.jsdelivr.net/gh/google/code-prettify@master/src/prettify.css">
  <script src="http://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
</head>

<body>

<pre class="prettyprint">
public class HelloWorld{
    public static void main(String args[]){
        System.out.println("Hello world");
    }
}
</pre>

</body>
</html>

Google Code Prettify is an open-source JavaScript library that provides a simple way to add syntax highlighting to code blocks on web pages. The library was created by Google engineer Mike Samuel and is now maintained by the open-source community.

Code syntax highlighting is a technique used to visually distinguish different elements of code, such as keywords, strings, and comments. By using different colors and fonts to highlight different elements, code becomes easier to read and understand. Google Code Prettify automates the process of syntax highlighting, making it easy for web developers to add this feature to their web pages.

The library consists of a single JavaScript file, which is only about 50 lines of code. The library defines a set of regular expressions to match different types of code syntax, such as keywords, strings, and comments. When a web page containing code blocks is loaded, the library searches for all <pre> and <code> elements with a class attribute that contains the word “prettyprint”. For each code block, the library reads the text content and applies the regular expressions defined to identify different syntax elements. The library then wraps each syntax element in an HTML <span> tag with a class that corresponds to the syntax element type (e.g. “keyword”, “string”, etc.). Finally, the library applies CSS styles to the code block to display the syntax-highlighted code.

To use Google Code Prettify, web developers need to include the library’s JavaScript file and CSS file in their web pages. They also need to add the class="prettyprint" attribute to any <pre> or <code> elements that contain code that they want to highlight.

One of the benefits of using Google Code Prettify is that it provides a consistent and familiar look for code blocks across different web pages. By default, the library uses a color scheme that is similar to the syntax highlighting used by Google Code and other code-sharing platforms. However, web developers can customize the library’s CSS styles to match the design of their web pages.

In conclusion, Google Code Prettify is a lightweight and easy-to-use library that provides a convenient way to make code blocks on web pages more readable and easier to understand. By automating the process of syntax highlighting, web developers can save time and improve the user experience of their web pages.

Leave a comment