This blog is primarily a programmer’s blog about programming. So you will see lots of code snippets in most of my posts. To properly handle the indentation, syntax highlighting, line numbering and other such issues with code snippets in a post, I needed a reliable wordpress plugin. I tried a few different ones, and finally decided on SyntaxHighlighter Plus. It is easy to use (with one problem that I am going to discuss), and the final result is very nice looking, as you can see in my posts.
But I faced a very annoying issue during my early usage of the plugin. I usually write my post in visual mode of wordpress, and switch to HTML mode whenever I need to insert some HTML tags into my posts. The problem is, when you have some code inserted into your post, with usual indentations and all, and wrapped in the SyntaxHighlighter Plus tag ([sourcecode language=<lang>] [/sourcecode]), and you switch to HTML mode, you are going to lose all the indentation in the code snippets. Now if you move back to visual mode, you will see that all the indentation in the code is gone, with plain, left aligned, messy looking code left behind.
After a lot of experimentation, I’ve finally found a way to get around this problem.
Whenever you decide to paste some code snippet into your code, do it in HTML mode. First insert a pair of <pre></pre> tags in there, and then paste the code, wrapped within the SH+ tags ([sourcecode language=<lang>][/sourcecode]), within the pre tags.
That’s it. Now you can freely move back and forth between visual mode and HTML mode, and you won’t lose any indentation within your code snippet.