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“.
Remove Extra Spans From Syntax Highlighter Plugin
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
To enable infolinks ads after syntaxhighlighter, just put following code after the end tag of the code
Have you ever faced this issue or something similar to this ?
Remove Extra Spans From Syntaxhighlighterhttp://www.prowebguru.com/2014/08/remove-extra-spans-syntaxhighlighter/http://www.prowebguru.com/wp-content/uploads/remove-extra-spans-syntaxhighlighter.jpghttp://www.prowebguru.com/wp-content/uploads/remove-extra-spans-syntaxhighlighter.jpg20 August 2014 ProWebGuru Open SourceOpen SourceRecently 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...Recently I was writing a blog post and added some code with the help of <a title="Embed code in WordPress with the help of Syntaxhighlighter WordPress Plugin for highlighting source code." href="http://www.prowebguru.com/2010/01/free-syntaxhighlighter-for-blogger-drupal-joomla-wordpress-cms/">Syntaxhighlighter plugin</a>. With this Syntaxhighlighter plugin we can embed code in WordPress and <a title="Embed and highlight source code in wordpress" href="http://www.prowebguru.com/2010/01/free-syntaxhighlighter-for-blogger-drupal-joomla-wordpress-cms/">highlight source code</a>. When I was seeing the code, it was showing some extra spans with class "<strong>IL_AD</strong>".<span id="more-1470"></span> 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 <strong>"IL_AD" and id "IL_AD3"</strong>. I was using Google chrome, so I just did "Inspect element" which I generally use for <a title="Debug javascript, html, css in Google Chrome Browser with Inspect Element feature" href="http://www.prowebguru.com/2013/03/simple-tip-print-object-in-ie-console-log/">debugging javascript and html in browser</a>. After inspecting I found same classname "<strong>IL_AD</strong>" multiple times. When I checked that it was for the elements where "<strong>Infolinks Ads</strong>" 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 "<strong><a title="How to disable infolinks ads in certain part of the page or area" href="http://www.infolinks.com/support/products/how-do-i-restrict-intext-ads-from-certain-areas" target="_blank">Disable infolinks ads in certain areas</a></strong>". <strong>So I used off tag of the infolinks to disable infolinks ads in that section and again used on tag to enable ads again.</strong> To disable infolinks ads in syntaxhighlighter, just put following code before the start tag of the code <!--INFOLINKS_OFF--> <!--INFOLINKS_ON--> To enable infolinks ads after syntaxhighlighter, just put following code after the end tag of the code <!--INFOLINKS_OFF--> Have you ever faced this issue or something similar to this ? <!--INFOLINKS_ON--> ProWebGuru103924578884522256081 [email protected]AdministratorProWebGuru
