Google Code Prettify.JS

If you are technical writers, then you may post some code snippets in your html page. In order to let the readers easy to read, you need some beautifier plugins to do the syntax highlight.

I

n this post, you will learn how to use Google Code Prettify.JS plugin to do the syntax highlight. By using this plugin, your code snippets will be beautified. It supports different programming languages, including Java, C++, HTML, CSS, and JavaScript.

In the following, it is a step-by-step guide about how to apply Google Code Prettify.JS to beautify your code.

Download Prettify.JS

First, download prettify.js and prettify.css from the web.

Insert CSS and JS Files

Next, embed the CSS and JS file in the HTML page.

<!DOCTYPE html>
<html>
  <head>
    <!-- Include prettify.css here -->
    <link rel="stylesheet" type="text/css" href="path/to/prettify.css" />
  </head>
  <body>
    <!-- Include prettify.js here -->
    <script type="text/javascript" src="path/to/prettify.js"></script>
  </body>
</html>

Insert Code Snippets

Then, put the code segments in <pre class=”prettyprint”> … code segments … </pre> or <code class=”prettyprint”> … code segments … </code> and it will be pretty printed.

<code class="prettyprint linenums">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Demo | Prettify.JS&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Hello, World!&lt;/h1&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code>
NOTE:
All the code segments inside <pre> or <code> are encoded.

Kickstart Prettify.JS

Finally, embedding jQuery library and call “prettyPrint” method once the document is ready.

<script 
  type="text/javascript" 
  src="http://code.jquery.com/jquery-1.7.2.min.js">
</script>
<script type="text/javascript">
(function(jQuery){
	
  jQuery( document ).ready( function() {
		
    prettyPrint();
		
  } );
 
}(jQuery))
</script>

That’s All. Here’s an Example

In the figure below, it demonstrates the result before and after applying the prettify plugin on your code snippets.

Wait. Make It More Prettier

To make the syntax highlight more prettier, you can apply different themes for the plugin. Here’s a gallery of themes for Google Code’s Prettify.JS.

The Bootstrap Light Theme

The Bootstrap Light Theme

The Google Code Light Theme

The Google Code Light Theme

The Solarized Dark Theme

The Solarized Dark Theme

The Solarized Light Theme

The Solarized Light Theme

The Sons of Obsidian Dark Theme

The Sons of Obsidian Dark Theme

The Tomorrow Night Blue Theme

The Tomorrow Night Blue Theme

The Tomorrow Night Dark Theme

The Tomorrow Night Dark Theme

The Tomorrow Night Eighties Theme

The Tomorrow Night Eighties Theme

The Tomorrow Night Light Theme


The Tomorrow Night Light Theme

Categories

  1. Kendall Staffen Reply
    Thanks for the content and for sharing!

Leave a Reply

*

captcha *