If you are an ardent programmer / developer trying to showcase your programming abilities through blogger, I’m sure you would have stumbled across one roadblock – highlighting syntax to make it more readable in blogger. Highlighting syntax in your blog post makes it more readable and easy for anybody to follow / use. If you search in the web for syntax highlighter for blogger, you will get more than 1000 results. So, how is this post different from the rest?
Most of the syntax highlighters use JavaScript as a means to achieve syntax highlighting. And, we want to refrain from using JavaScript, purely for performance reasons. We would like to accomplish syntax highlighting in Blogger by using simple style sheets and at the same time not make the process so complicated for users. Some syntax highlighters use the concept of Brushes, which are specific to a programming language. I often blog on PeopleCode, Java, JavaScript, Oracle PL SQL and at times PERL / Shell Scripting. This means, I have to load one brush per programming language I will be using in Blogger.
We will aim to get rid of this multiple brush concept and come up with a different approach to highlight syntax for your blog posts. To do this, we will have to perform the following:
1) Install an Open Source program editor – JEdit
2) Load a plug in – Code to HTML inside JEdit
3) Load some style sheet definitions in your blogger layout
That is it..nothing more. No JavaScript and pure HTML / CSS across. As a developer you will definitely be using an editor of your choice; if you are using JEdit then well and good, otherwise you can try JEdit.It is a lightweight open source editor and supports more than 100 programming languages. Install JEdit to your system and the JEdit screen looks as shown below
 |
| Syntax Highlighting - JEdit Programming Window |
Navigate to Plugins – Plugin Manager. Click on the Install Tab. You will be presented with a list of available plugins. Select “Code2HTML” and click on Install. This will add the plugin to the editor. This plugin will help us to convert our code into HTML with style sheet inputs. The plugin manager screen is shown below
 |
| Syntax Highlighter - JEdit Plugin Installation |
In the next part of this blog post, we will write a simple code and see how to achieve syntax highlighting for that code in Blogger. JEdit installation is just an one off activity and before posting to your blog, you will have to use JEdit to get a HTML version that you can put in your blog post.
No comments:
Post a Comment