Syntax Highlighter for Blogger ~ Easy HTML Tricks for Blogging

Maybe some of you question arises what is a Syntax Highlighter ? which certainly was not the name of comestible: P. Syntax Highlighter is a usual feature of text editors, especially editors source code for a specific programming language for menampilka text in various colors to make it easier for programmers to read and analyze source code is. For those of you who frequently post source code on a Web / Blog Syntax Highlighter features will certainly be helpful to the source code that we post are easily distinguished as the source code and of course pleasing to the eye ^ ^. Well, now the problem is how do we use the Syntax Highlighter this particular blog on Blogger.com?

In cyberspace there are currently many types of Syntax Highlighter for web / blog that we can use for free of course, we choose to live where appropriate and suitable (according to taste is the real). Here are some examples Syntax Highlighter scattered on the Internet:

This time I will discuss how to install the syntax highlighter to use Google Code Prettify . Ok .. to the point, first login to the Blogger dashboard you. Then select Layout > Edit HTML . After her came Edit HTML page, click a check inExpand Widget Templates

The template is now in the code, we are looking for (use Find, CTRL + F):

</ Head>

If you have found, copy-paste this script and put it just above: </ head> earlier.

href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" <link type="text/css" rel="stylesheet" /> <script type = "text / javascript "src =" http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js "> </ script>

so about the placement of the script above will be like this:

href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" <link type="text/css" rel="stylesheet" /> <script type = "text / javascript "src =" http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js "> </ script> </ head>

After that we add the script loader to the body, how to find this code:

<body>

replace with the code below:

<body onload="prettyPrint();">

Siippp .. after that save, click the SAVE TEMPLATE .

Ways of Writing Source Code:

Ok .. after before we put her script Syntax Highlighter, now we get to how to use. To make the source code in our posts to be identified as the source code the way is:
The syntax is generally:

<pre class="prettyprint lang-html"> source code here ... </ Pre>

Before menulisan source code we start with this HTML tag: <pre class="prettyprint lang-language"> . To define the language program you want to use, we set the lang-language , adjust to the language of the source code that we want to post, for example lang-html for HTML source code form. Then end with a tag: </ pre> . Examples are as follows:

<pre class="prettyprint lang-html"> <html> <head> <title> Test </ title> </ head> <body> Hellow world! This is an example HTML source code. </ Body> </ html> </ pre>

In addition to the language option lang-html , there are also options for other languages as

Test Drive

How? difficult? seems easy right? hehehe .. To try out the results, we make postings to include source code (any aja), we switch to the menu New Post > mode select Edit HTML . Add this code to post:

<pre class="prettyprint lang-html"> <html> <head> <title> Test </ title> </ head> <body> Hellow world! This is an example HTML source code. </ Body> </ html> </ pre>

Publish Post and see the results. In that post I added the source code with the HTML language. To preview the results you can see in this post, you try to look at the codes that I posted, there are colors and special fonts instead?Syntax Highlighter why, exactly do I use Google Code Prettify. Syntax Highlighter for how to install the other version, then will I share the tutorial again.

Good luck:)