# Testing Online Code Syntax Highlighters for Blogs (3): Google-code-prettify

Note: This post won’t make sense here. Refer to the original post.

Here’s another online code syntax highlighter called google-code-prettify. The following are the test results.

In order to use this technology in your post, the following simple steps will do.

## Step one

Add an “HTML/JavaScript” gadget to your blog. In the contents, just paste the following line of code found on the official tutorial.1

<script
</script>


## Step two

Insert the following lines of code and replace the text inside the <pre> tag with your code.

Note: Like SyntaxHighlighter and highlight.js, you need to encode <, >, &, etc into HTML encoding using an HTML encoder. At the bottom part of one of my older posts, I included a link to an HTML encoder, and here’s a list of two more.

i.e. If you want to embed HTML code using an HTML encoder, you need to type the following unencoded code first.

Then you use a HTML encoder to generate the following output and paste it inside the <pre> tag.

<pre class="prettyprint lang-html">
</pre>


Exercise: If you think that you understand the above text, try making a web page that teaches users how to embed HTML code into a web page.
Hint: Right click and choose “View Page Source” in the pop up menu.

## Step three

If your source code contains too many characters in a line, the right part of the code will go out of the box. Add the following CSS code to automatically fix the problem.

Then a scrollbar will be automatically attached to the source code container if the source code has too many columns and/or lines.

Suppose you see the following lines of code in message in response to a question on Stack Overflow. However, it has no line number, and you want to embed this piece of code into your web page with line number. So I append linenums to the class attribute of the <pre> tag.

For further details, refer to the official README.