There are many very enthusiastic bloggers and writers in many fields. I am writing this blog for blogger who write about Information Technology, source code, algorithm. When a blogger is writing I am sure he has good enough knowledge about the subject and write very good quality content on it. Along with content quality, presentation and formatting of the content is very important so that reader can easily read and understand the idea.
When I started writing technical blogs involving source code, it was very challenging to present source code on the blog which easily readable with all standard code syntax highlighting. Without formatting, indentation and keyword highlighting its very difficult for a programmer / coder to understand the code logic. Code would need to copy paste code from blog to IDE to see it properly and understand.
While searching I found some fantastic and very easy to use tool or ways to highlight source code in your blogs. Below are detail about the tools I liked and use in my blogs
Basic and Simple
Paste following html code snippet in your blog and then paste source code in the place holder section. It does not do syntax highlighting but serves basic purpose and source code stand out from blog content. Good enough for simple and small source code.
<pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee; font-size: 12px; border: 1px dashed #999999; line-height: 14px; padding: 10px; overflow: auto; width: 100%"> <code style="color:#000000;word-wrap:normal;"> - - - - - PASTER HIGHLIGHTED CODE HERE - - - - - </code> </pre>
https://tohtml.com/
This is very easy to use online tool for source code syntax highlighting. Supports highlighting for multiple languages and multiple highlighting style. For Java source code I personally liked eclipse style because that the IDE I usually use for development.
You paste your code in the tool, select language, select style and click Highlight button. Select generated html code and paste in your blog. You can see the preview on the right.
It really good tool, I recommend it. The only little thing missing in this tool is, the source code is not displayed in a container or bordered box so that it is stand out in the blog from other content. Adding a border box is very easy though.
Just add following html snippet in your blog first and then paste the highlighted code within the html snippet at the placeholder.
<pre style='border: 1px dashed #999999; line-height: 14px; padding: 10px; overflow: auto; width: 100%'> </pre>
http://hilite.me/
This is another very good tool for source code syntax highlighting. Pretty similar to previous tool in usage and feature. Supports multiple language and styles. Generate bordered container box by default. Also has option to include line number which is great for reference while explain code the blog.
I hope it helps.. Feedback and comments always welcome.
Happy blogging..