Remove Extra Spans From Syntaxhighlighter

Recently I was writing a blog post and added some code with the help of Syntaxhighlighter plugin. With this Syntaxhighlighter plugin we can embed code in WordPress and highlight source code. When I was seeing the code, it was showing some extra spans with class “IL_AD“.

SyntaxHighlighter is a tool written in javascript to highlight the code.  The best thing about SyntaxHighlighter is that it can be used on any site and even it can be integrated into many popular blog platforms like blogger, wordpress and cms like drupal, joomla easily.

When I checked the code in the admin panel, it was not showing any extra span but when it gets rendered it was showing a span with class “IL_AD” and id “IL_AD3”.

I was using Google chrome, so I just did “Inspect element” which I generally use for debugging javascript and html in browser.

After inspecting I found same classname “IL_AD” multiple times. When I checked that it was for the elements where “Infolinks Ads” were present.

So this issue comes when you are using Infolinks ads on your blog or website. So to get rid of this the simple solution is to disable infolinks for this piece and again enable it after this piece of code.

I found in the official documentation of the infolinks that, it is possible to disable infolinks in certain part of the code. Read more at infolinks “Disable infolinks ads in certain areas“.

So I used off tag of the infolinks to disable infolinks ads in that section and again used on tag to enable ads again.

To disable infolinks ads in syntaxhighlighter, just put following code before the start tag of the code

<!--INFOLINKS_OFF-->

To enable infolinks ads after syntaxhighlighter, just put following code after the end tag of the code

<!--INFOLINKS_ON-->

Have you ever faced this issue or something similar to this ?